Saleor 1515/customise order confirmation messages (#956)

* Add custom message dependent on order status in checkout final step * Update types and stories and test * Change saleor sdk source to a git branch for updated order status * Do not block release deployment if lock is not updated * Bump SDK version Co-authored-by: Krzysztof Wolski <[email protected]>
saleor · Nov 30, 2020 · 07a6bd1 · 07a6bd1
1 parent 5aaa9f7
commit 07a6bd1
Show file tree

Hide file tree

Showing 11 changed files with 593 additions and 54 deletions.
diff --git a/.github/workflows/test-env-deploy.yml b/.github/workflows/test-env-deploy.yml
@@ -48,7 +48,7 @@ jobs:
 
       - name: Install deps
         run: |
-          npm ci
+          npm i
 
       - name: Get custom API_URI
         id: api_uri

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@ All notable, unreleased changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- Handle Order confirmation at Thank You page - #956 by @mmarkusik
 - Add EditorJS renderer - #947 by @krzysztofwolski
 - New cart sidebar - #907 by @orzechdev
 - Support for multichannel - #937 by @AlicjaSzu

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.3.0-2",
+    "@saleor/sdk": "^0.3.0-3",
     "@sentry/apm": "^5.15.5",
     "@sentry/browser": "^5.15.5",
     "@stripe/react-stripe-js": "^1.1.2",

diff --git a/src/@next/components/organisms/ThankYou/ThankYou.tsx b/src/@next/components/organisms/ThankYou/ThankYou.tsx
@@ -1,17 +1,32 @@
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { defineMessages, FormattedMessage } from "react-intl";
 
 import { Button } from "@components/atoms";
 import { Container } from "@components/templates";
 import { checkoutMessages } from "@temp/intl";
 
+import { OrderStatus } from "@saleor/sdk";
 import * as S from "./styles";
 import { IProps } from "./types";
 
+export const messages = defineMessages({
+  unfulfilled: {
+    defaultMessage:
+      "We’ve emailed you an order confirmation, and we’ll notify you when the order has been shipped.",
+    description: "thank you subtitle",
+  },
+  unconfirmed: {
+    defaultMessage:
+      "Your order has been placed, it needs to be confirmed by the staff, we'll send you an email when it's done.",
+    description: "thank you subtitle",
+  },
+});
+
 /**
  * Thank you page after completing the checkout.
  */
 const ThankYou: React.FC<IProps> = ({
+  orderStatus,
   orderNumber,
   continueShopping,
   orderDetails,
@@ -31,7 +46,11 @@ const ThankYou: React.FC<IProps> = ({
           <span>{orderNumber}</span>
         </S.Paragraph>
         <S.Paragraph>
-          <FormattedMessage defaultMessage="We’ve emailed you an order confirmation, and we’ll notify you when the order has been shipped." />
+          <FormattedMessage
+            {...(orderStatus === OrderStatus.UNCONFIRMED
+              ? messages.unconfirmed
+              : messages.unfulfilled)}
+          />
         </S.Paragraph>
         <S.Buttons>
           <Button