Fix channels, checkout. Improve envs setup

.env

@@ -0,0 +1,7 @@
+# common envs
+NEXT_PUBLIC_API_URI=http://localhost:8000/graphql/
+NEXT_PUBLIC_SALEOR_CHANNEL_SLUG=default-channel
+NEXT_PUBLIC_DEMO_MODE=false
+NEXT_PUBLIC_GTM_ID=
+NEXT_PUBLIC_SENTRY_APM=0
+NEXT_PUBLIC_SENTRY_DSN=

.env.development

@@ -1,7 +1,3 @@
-# NEXT_PUBLIC_API_URI=http://localhost:8000/graphql/
- NEXT_PUBLIC_API_URI=https://master.staging.saleor.rocks/graphql/
-NEXT_PUBLIC_SALEOR_CHANNEL_SLUG=default-channel
+# development server envs
+NEXT_PUBLIC_API_URI=https://master.staging.saleor.rocks/graphql/
 NEXT_PUBLIC_DEMO_MODE=false
-NEXT_PUBLIC_GTM_ID=undefined
-NEXT_PUBLIC_SENTRY_APM=0
-NEXT_PUBLIC_SENTRY_DSN=null

.env.production

@@ -1,3 +1,4 @@
+# production server envs
 NEXT_PUBLIC_API_URI=
 NEXT_PUBLIC_SALEOR_CHANNEL_SLUG=
 NEXT_PUBLIC_DEMO_MODE=

.gitignore

@@ -12,8 +12,10 @@
 !.prettierrc
 !.prettierignore
 !.tx
+!.env
 !.env.development
 !.env.production
+
 dist
 node_modules
 src/locales/_build

src/@next/pages/CheckoutPage/CheckoutPage.tsx

@@ -19,7 +19,9 @@ import { ITaxedMoney, ICheckoutStep, ICardData, IFormError } from "@types";
 import { parseQueryString } from "@temp/core/utils";
 import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
 
-import { cartUrl } from "@temp/app/routes";
+import { cartUrl, orderFinalizedUrl } from "@temp/app/routes";
+import { useRouter } from "next/router";
+import { ParsedUrlQueryInput } from "querystring";
 import { CheckoutRouter } from "./CheckoutRouter";
 import {
   CheckoutAddressSubpage,
@@ -101,6 +103,7 @@ const getButton = (text?: string, onClick?: () => void) => {
 const CheckoutPage: React.FC<IProps> = ({}: IProps) => {
   const location = useLocation();
   const history = useHistory();
+  const { push } = useRouter();
   const querystring = parseQueryString(location);
   const {
     loaded: cartLoaded,
@@ -215,10 +218,13 @@ const CheckoutPage: React.FC<IProps> = ({}: IProps) => {
   ) => {
     const activeStepIndex = getActiveStepIndex();
     if (currentStep === CheckoutStep.Review) {
-      history.push({
-        pathname: "/order-finalized",
-        state: data,
-      });
+      push(
+        {
+          pathname: orderFinalizedUrl,
+          query: data as ParsedUrlQueryInput,
+        },
+        orderFinalizedUrl
+      );
     } else {
       history.push(steps[activeStepIndex + 1].link);
     }

src/@next/pages/ThankYouPage/ThankYouPage.tsx

@@ -1,21 +1,25 @@
 import React from "react";
-import { useHistory, useLocation } from "react-router-dom";
 
 import { ThankYou } from "@components/organisms";
 import { BASE_URL } from "@temp/core/config";
-import { generateGuestOrderDetailsUrl } from "@utils/core";
 import { NextPage } from "next";
 
-const ThankYouPage: NextPage = () => {
-  const location = useLocation();
-  const history = useHistory();
-  const { token, orderNumber } = location.state;
-  return (
+import { useRouter } from "next/router";
+import { orderHistoryUrl } from "@temp/app/routes";
+import { NotFound } from "@temp/components";
+import { IProps } from "./types";
+
+const ThankYouPage: NextPage<IProps> = ({ query: { orderNumber, token } }) => {
+  const { push } = useRouter();
+
+  return token && orderNumber ? (
     <ThankYou
-      continueShopping={() => history.push(BASE_URL)}
+      continueShopping={() => push(BASE_URL)}
       orderNumber={orderNumber}
-      orderDetails={() => history.push(generateGuestOrderDetailsUrl(token))}
+      orderDetails={() => push({ pathname: orderHistoryUrl, query: { token } })}
     />
+  ) : (
+    <NotFound />
   );
 };
 

src/@next/pages/ThankYouPage/index.ts

@@ -1 +1,2 @@
 export * from "./ThankYouPage";
+export type { IProps as ThankYouPageProps } from "./types";

src/@next/pages/ThankYouPage/types.ts

@@ -0,0 +1,6 @@
+export type IProps = {
+  query: {
+    orderNumber?: string;
+    token?: string;
+  };
+};

src/components/MobileNav/NavList.tsx

@@ -1,17 +1,17 @@
-import "./scss/index.scss";
-
 import * as React from "react";
 import { FormattedMessage } from "react-intl";
 import Link from "next/link";
 import ReactSVG from "react-svg";
-import { commonMessages } from "@temp/intl";
 
+import { commonMessages } from "@temp/intl";
 import { BASE_URL } from "@temp/core/config";
 import NavItem, { INavItem } from "./NavItem";
 
 import backImg from "../../images/arrow-back.svg";
 import logoImg from "../../images/logo.svg";
 
+import "./scss/index.scss";
+
 interface NavListProps {
   items: INavItem[];
   hideOverlay(): void;

src/pages/_app.tsx

@@ -5,21 +5,38 @@ import * as React from "react";
 import type { AppProps } from "next/app";
 import { ThemeProvider } from "styled-components";
 import { Router, StaticRouter } from "react-router-dom";
-
+import { Integrations as ApmIntegrations } from "@sentry/apm";
+import TagManager from "react-gtm-module";
+import * as Sentry from "@sentry/browser";
 import { defaultTheme, GlobalStyle } from "@styles";
 import { NotificationTemplate } from "@components/atoms";
 import { NextQueryParamProvider } from "@temp/components";
 import { history } from "@temp/history";
-import { apiUrl, ssrMode } from "../constants";
+import {
+  apiUrl,
+  channelSlug,
+  sentryDsn,
+  sentrySampleRate,
+  ssrMode,
+} from "../constants";
 import { LocaleProvider } from "../components/Locale";
 import { App as StorefrontApp } from "../app";
 
-const saleorConfig: ConfigInput = { apiUrl };
+if (process.env.GTM_ID) {
+  TagManager.initialize({ gtmId: process.env.GTM_ID });
+}
 
-const notificationOptions = {
-  position: positions.BOTTOM_RIGHT,
-  timeout: 2500,
-};
+if (sentryDsn) {
+  Sentry.init({
+    dsn: sentryDsn,
+    integrations: [new ApmIntegrations.Tracing()],
+    tracesSampleRate: sentrySampleRate,
+  });
+}
+
+const saleorConfig: ConfigInput = { apiUrl, channel: channelSlug };
+
+const notificationConfig = { position: positions.BOTTOM_RIGHT, timeout: 2500 };
 
 const App = ({ Component, pageProps }: AppProps) => {
   const app = (
@@ -36,7 +53,7 @@ const App = ({ Component, pageProps }: AppProps) => {
     <ThemeProvider theme={defaultTheme}>
       <AlertProvider
         template={NotificationTemplate as any}
-        {...notificationOptions}
+        {...notificationConfig}
       >
         <LocaleProvider>
           <GlobalStyle />

src/pages/order-finalized.ts

@@ -0,0 +1,6 @@
+import { ThankYouPage, ThankYouPageProps } from "@pages";
+
+export default ThankYouPage;
+
+ThankYouPage.getInitialProps = async ({ query }) =>
+  ({ query } as ThankYouPageProps);