use defaultChannelSlug in queries and mutations (#937)

* use defaultChannelSlug in queries and mutations * update types * update SitemapGenerator * update README and changelog * [SALEOR-458] Clean up queries * [SALEOR-458] Use next SDK version * [SALEOR-458] Use default channel as fallback * Add missing channel at search view * Ditch deprecated navigation field from shop query * Update CHANGELOG.md * Rename channel variables Co-authored-by: jwm0 <[email protected]> Co-authored-by: Krzysztof Wolski <[email protected]>
saleor · Nov 18, 2020 · 1c17431 · 1c17431
1 parent c5c4bca
commit 1c17431
Show file tree

Hide file tree

Showing 45 changed files with 301 additions and 278 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ All notable, unreleased changes to this project will be documented in this file.
 
 - Add EditorJS renderer - #947 by @krzysztofwolski
 - New cart sidebar - #907 by @orzechdev
+- Support for multichannel - #937 by @AlicjaSzu
 
 ## 2.11.0
 
@@ -43,7 +44,6 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix search crashing when displaying item with no category - #928 by @mmarkusik
 - Fix generating site map - #915 by @rboixaderg
 
-
 ## 2.10.4
 
 - Fix build errors introduced in version 2.10.3 - by @dominik-zeglen

diff --git a/README.md b/README.md
@@ -177,6 +177,10 @@ npm run generate
     - Check to see that "Less secure app access" is turned ON. Under "Manage your Google Account" > Go to the security tab. By default, the setting is off for security reasons.
     - If using 2FA make sure to set an [app password](https://support.google.com/accounts/answer/185833?p=InvalidSecondFactor&visit_id=637355441414497566-1310044707&rd=1) and use that in place of your normal login password.
 
+### Multichannel
+
+- **Set [SALEOR_CHANNEL_SLUG] environment variable.** - Default value: `default-channel`.
+
 ## License
 
 This project is licensed under the BSD-3-Clause License - see the [LICENSE](https://github.com/mirumee/saleor-storefront/blob/master/LICENSE) file for details

diff --git a/config/webpack/config.base.js b/config/webpack/config.base.js
@@ -118,6 +118,7 @@ module.exports = ({ sourceDir, distDir }) => ({
     }),
     new webpack.EnvironmentPlugin({
       API_URI: "http://localhost:8000/graphql/",
+      SALEOR_CHANNEL_SLUG: "default-channel",
       DEMO_MODE: false,
       GTM_ID: undefined,
       SENTRY_APM: "0",

diff --git a/gqlTypes/globalTypes.ts b/gqlTypes/globalTypes.ts
@@ -268,11 +268,14 @@ export enum OrderDirection {
 }
 
 export enum ProductOrderField {
+  COLLECTION = "COLLECTION",
   DATE = "DATE",
   MINIMAL_PRICE = "MINIMAL_PRICE",
   NAME = "NAME",
   PRICE = "PRICE",
+  PUBLICATION_DATE = "PUBLICATION_DATE",
   PUBLISHED = "PUBLISHED",
+  RATING = "RATING",
   TYPE = "TYPE",
 }
 
@@ -284,6 +287,7 @@ export interface AttributeInput {
 
 export interface ProductOrder {
   direction: OrderDirection;
+  channel?: string | null;
   attributeId?: string | null;
   field?: ProductOrderField | null;
 }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@editorjs/list": "^1.6.0",
     "@editorjs/quote": "^2.4.0",
     "@lhci/cli": "^0.4.1",
-    "@saleor/sdk": "^0.1.5",
+    "@saleor/sdk": "^0.3.0-0",
     "@sentry/apm": "^5.15.5",
     "@sentry/browser": "^5.15.5",
     "@stripe/react-stripe-js": "^1.1.2",

diff --git a/src/components/Footer/Nav.tsx b/src/components/Footer/Nav.tsx
@@ -1,3 +1,4 @@
+import { channelSlug } from "@temp/constants";
 import * as React from "react";
 
 import { NavLink } from "..";
@@ -10,9 +11,14 @@ class Nav extends React.PureComponent {
     return (
       <footer className="footer-nav">
         <div className="container">
-          <TypedSecondaryMenuQuery>
+          <TypedSecondaryMenuQuery
+            variables={{
+              channel: channelSlug,
+              slug: "footer",
+            }}
+          >
             {({ data }) => {
-              return data.shop.navigation.secondary.items.map(item => (
+              return data.menu.items.map(item => (
                 <div className="footer-nav__section" key={item.id}>
                   <h4 className="footer-nav__section-header">
                     <NavLink item={item} />

diff --git a/src/components/Footer/gqlTypes/SecondaryMenu.ts b/src/components/Footer/gqlTypes/SecondaryMenu.ts
@@ -6,7 +6,7 @@
 // GraphQL query operation: SecondaryMenu
 // ====================================================
 
-export interface SecondaryMenu_shop_navigation_secondary_items_category {
+export interface SecondaryMenu_menu_items_category {
   __typename: "Category";
   /**
    * The ID of the object.
@@ -15,7 +15,7 @@ export interface SecondaryMenu_shop_navigation_secondary_items_category {
   name: string;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary_items_collection {
+export interface SecondaryMenu_menu_items_collection {
   __typename: "Collection";
   /**
    * The ID of the object.
@@ -24,12 +24,12 @@ export interface SecondaryMenu_shop_navigation_secondary_items_collection {
   name: string;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary_items_page {
+export interface SecondaryMenu_menu_items_page {
   __typename: "Page";
   slug: string;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary_items_children_category {
+export interface SecondaryMenu_menu_items_children_category {
   __typename: "Category";
   /**
    * The ID of the object.
@@ -38,7 +38,7 @@ export interface SecondaryMenu_shop_navigation_secondary_items_children_category
   name: string;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary_items_children_collection {
+export interface SecondaryMenu_menu_items_children_collection {
   __typename: "Collection";
   /**
    * The ID of the object.
@@ -47,68 +47,57 @@ export interface SecondaryMenu_shop_navigation_secondary_items_children_collecti
   name: string;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary_items_children_page {
+export interface SecondaryMenu_menu_items_children_page {
   __typename: "Page";
   slug: string;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary_items_children {
+export interface SecondaryMenu_menu_items_children {
   __typename: "MenuItem";
   /**
    * The ID of the object.
    */
   id: string;
   name: string;
-  category: SecondaryMenu_shop_navigation_secondary_items_children_category | null;
+  category: SecondaryMenu_menu_items_children_category | null;
   /**
    * URL to the menu item.
    */
   url: string | null;
-  collection: SecondaryMenu_shop_navigation_secondary_items_children_collection | null;
-  page: SecondaryMenu_shop_navigation_secondary_items_children_page | null;
+  collection: SecondaryMenu_menu_items_children_collection | null;
+  page: SecondaryMenu_menu_items_children_page | null;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary_items {
+export interface SecondaryMenu_menu_items {
   __typename: "MenuItem";
   /**
    * The ID of the object.
    */
   id: string;
   name: string;
-  category: SecondaryMenu_shop_navigation_secondary_items_category | null;
+  category: SecondaryMenu_menu_items_category | null;
   /**
    * URL to the menu item.
    */
   url: string | null;
-  collection: SecondaryMenu_shop_navigation_secondary_items_collection | null;
-  page: SecondaryMenu_shop_navigation_secondary_items_page | null;
-  children: (SecondaryMenu_shop_navigation_secondary_items_children | null)[] | null;
+  collection: SecondaryMenu_menu_items_collection | null;
+  page: SecondaryMenu_menu_items_page | null;
+  children: (SecondaryMenu_menu_items_children | null)[] | null;
 }
 
-export interface SecondaryMenu_shop_navigation_secondary {
+export interface SecondaryMenu_menu {
   __typename: "Menu";
-  items: (SecondaryMenu_shop_navigation_secondary_items | null)[] | null;
+  items: (SecondaryMenu_menu_items | null)[] | null;
 }
 
-export interface SecondaryMenu_shop_navigation {
-  __typename: "Navigation";
-  /**
-   * Secondary navigation bar.
-   */
-  secondary: SecondaryMenu_shop_navigation_secondary | null;
-}
-
-export interface SecondaryMenu_shop {
-  __typename: "Shop";
+export interface SecondaryMenu {
   /**
-   * Shop's navigation.
+   * Look up a navigation menu by ID or name.
    */
-  navigation: SecondaryMenu_shop_navigation | null;
+  menu: SecondaryMenu_menu | null;
 }
 
-export interface SecondaryMenu {
-  /**
-   * Return information about the shop.
-   */
-  shop: SecondaryMenu_shop;
+export interface SecondaryMenuVariables {
+  channel: string;
+  slug: string;
 }
diff --git a/src/components/Footer/queries.ts b/src/components/Footer/queries.ts
@@ -21,16 +21,12 @@ const secondaryMenu = gql`
     }
   }
 
-  query SecondaryMenu {
-    shop {
-      navigation {
-        secondary {
-          items {
-            ...SecondaryMenuSubItem
-            children {
-              ...SecondaryMenuSubItem
-            }
-          }
+  query SecondaryMenu($channel: String!, $slug: String!) {
+    menu(channel: $channel, slug: $slug) {
+      items {
+        ...SecondaryMenuSubItem
+        children {
+          ...SecondaryMenuSubItem
         }
       }
     }

diff --git a/src/components/MainMenu/MainMenu.tsx b/src/components/MainMenu/MainMenu.tsx
@@ -9,6 +9,7 @@ import ReactSVG from "react-svg";
 
 import { DemoBanner } from "@components/atoms";
 import classNames from "classnames";
+import { channelSlug } from "@temp/constants";
 import {
   MenuDropdown,
   Offline,
@@ -84,9 +85,16 @@ const MainMenu: React.FC<MainMenuProps> = ({ demoMode }) => {
       {demoMode && <DemoBanner />}
       <nav className="main-menu" id="header">
         <div className="main-menu__left">
-          <TypedMainMenuQuery renderOnError displayLoader={false}>
+          <TypedMainMenuQuery
+            renderOnError
+            displayLoader={false}
+            variables={{
+              channel: channelSlug,
+              slug: "navbar",
+            }}
+          >
             {({ data }) => {
-              const items = maybe(() => data.shop.navigation.main.items, []);
+              const items = maybe(() => data.menu.items, []);
 
               return (
                 <ul>

diff --git a/src/components/MainMenu/NavDropdown.tsx b/src/components/MainMenu/NavDropdown.tsx
@@ -4,13 +4,13 @@ import classNames from "classnames";
 import * as React from "react";
 
 import { NavLink, OverlayContextInterface } from "..";
-import { MainMenu_shop_navigation_main_items } from "./gqlTypes/MainMenu";
+import { MainMenu_menu_items } from "./gqlTypes/MainMenu";
 import NavItem from "./NavItem";
 
 import "./scss/index.scss";
 
 class NavDropdown extends React.PureComponent<
-  MainMenu_shop_navigation_main_items & {
+  MainMenu_menu_items & {
     overlay: OverlayContextInterface;
     showDropdown: boolean;
     onShowDropdown: () => void;