diff --git a/.github/workflows/test-env-deploy.yml b/.github/workflows/test-env-deploy.yml index 4875a280f9..e1fede118a 100644 --- 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 index ec1f79385b..1830e3bf6b 100644 --- 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 index 0043822da3..9c51dfd87c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6119,9 +6119,9 @@ } }, "@saleor/sdk": { - "version": "0.3.0-2", - "resolved": "https://registry.npmjs.org/@saleor/sdk/-/sdk-0.3.0-2.tgz", - "integrity": "sha512-/NSHOj5zs5xdgOD6sp1diMhXy0lqsbCOJMXKLcyp89GQ2GyfP7efvyXNpGUdfNKVJpdHIy3RKlkwXhTYZq/T1A==", + "version": "0.3.0-3", + "resolved": "https://registry.npmjs.org/@saleor/sdk/-/sdk-0.3.0-3.tgz", + "integrity": "sha512-P1eMGX+D+D5c/uhnhYonr8hcJhWpv+KurOaDmusxoWznsipTWmLCGEwOweqrBiIadEicARerDtaROIP5LybpHA==", "requires": { "apollo-cache": "^1.3.5", "apollo-cache-inmemory": "^1.6.6", diff --git a/package.json b/package.json index 9084db0001..6519dd9058 100644 --- 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 index 18265644e1..2c15494a46 100755 --- 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 = ({ + orderStatus, orderNumber, continueShopping, orderDetails, @@ -31,7 +46,11 @@ const ThankYou: React.FC = ({ {orderNumber} - + + + + + +
+
+`; + +exports[`Storyshots @components/organisms/ThankYou with order unfulfilled 1`] = ` +.c0 { + position: relative; + margin: 20px; +} + +.c9 { + position: absolute; + width: 100%; + height: 100%; + border: 3px solid rgba(0,0,0,0.2); + top: 0; + left: 0; + pointer-events: none; + box-sizing: border-box; +} + +.c8 { + background-color: #13bebb; + padding: 0.9rem 3.7rem; + border: none; + -webkit-transition: 0.3s; + transition: 0.3s; + outline: none; + cursor: pointer; + color: #fff; + width: 100%; +} + +.c8:hover { + background-color: #06a09e; + color: #fff; +} + +.c8:active { + background-color: #06a09e; + box-shadow: -3px 3px 14px 0px rgba(129,67,67,0.2); +} + +.c8:disabled { + background-color: #7d7d7d; +} + +.c8:disabled, +.c8:disabled:hover { + cursor: default; +} + +.c6 { + background-color: #fff; + padding: 0.9rem 3.7rem; + border: none; + -webkit-transition: 0.3s; + transition: 0.3s; + outline: none; + cursor: pointer; + color: rgb(33,18,94); + width: 100%; + box-shadow: inset 0px 0px 0px 3px rgb(33,18,94); + border-left: 1px solid rgb(33,18,94); + border-right: 1px solid rgb(33,18,94); +} + +.c6:hover { + background-color: rgb(33,18,94); + color: #fff; +} + +.c6:active { + background-color: #190c4e; + box-shadow: -3px 3px 14px 0px rgba(129,67,67,0.2); +} + +.c6:disabled { + background-color: #7d7d7d; +} + +.c6:disabled, +.c6:disabled:hover { + cursor: default; +} + +.c7 { + display: inline-block; + font-size: 1.125rem; + text-transform: uppercase; + font-weight: 600; + line-height: 1.25rem; +} + +.c1 { + width: 1140px; + max-width: 100vw; + margin: 0 auto; + padding: 0 1rem; +} + +.c2 { + margin: 80px 0; +} + +.c3 { + font-size: 6rem; + margin: 0; + line-height: 110%; + padding-bottom: 40px; + border-bottom: 1px solid rgba(50,50,50,0.1); + margin-bottom: 40px; +} + +.c3 span { + font-weight: 600; +} + +.c4 { + font-size: 1.125rem; + margin: 0; + line-height: 170%; +} + +.c4 span { + font-weight: 600; +} + +.c5 { + width: 50%; + margin-top: 40px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 30px; +} + +.c5 button { + padding-left: 0; + padding-right: 0; +} + +@media (max-width:540px) { + .c8 { + padding: 0.9rem 1rem; + width: 100%; + } +} + +@media (max-width:540px) { + .c6 { + padding: 0.9rem 1rem; + width: 100%; + } +} + +@media (max-width:992px) { + .c1 { + width: 100%; + } +} + +@media (max-width:540px) { + .c2 { + margin: 40px 0; + } +} + +@media (max-width:540px) { + .c3 { + font-size: 4rem; + } +} + +@media (max-width:540px) { + .c5 { + grid-template-columns: 1fr; + grid-row-gap: 20px; + width: 100%; + margin-top: 20px; + } +} + +
+
+
+

+ Thank you +
+ + for your order! + +

+

+ Your order number is + + + #341414 + +

+

+ We’ve emailed you an order confirmation, and we’ll notify you when the order has been shipped. +

+
+ + +
+
+
+
+
+`; diff --git a/src/@next/components/organisms/ThankYou/stories.tsx b/src/@next/components/organisms/ThankYou/stories.tsx index fbe1685a36..be2d48a935 100644 --- a/src/@next/components/organisms/ThankYou/stories.tsx +++ b/src/@next/components/organisms/ThankYou/stories.tsx @@ -1,20 +1,36 @@ +import { OrderStatus } from "@saleor/sdk"; import { action } from "@storybook/addon-actions"; import { storiesOf } from "@storybook/react"; import React from "react"; import { ThankYou } from "."; +const continueShopping = action("Continue shopping has been clicked"); +const orderDetails = action("Order details has been clicked"); + storiesOf("@components/organisms/ThankYou", module) .addParameters({ component: ThankYou }) - .add("default", () => { - const continueShopping = action("Continue shopping has been clicked"); - const orderDetails = action("Order details has been clicked"); - - return ( - - ); - }); + .add("default", () => ( + + )) + .add("with order unfulfilled", () => ( + + )) + .add("with order unconfirmed", () => ( + + )); diff --git a/src/@next/components/organisms/ThankYou/test.tsx b/src/@next/components/organisms/ThankYou/test.tsx index fd96953230..b1a93f1dc6 100644 --- a/src/@next/components/organisms/ThankYou/test.tsx +++ b/src/@next/components/organisms/ThankYou/test.tsx @@ -1,63 +1,58 @@ +import { OrderStatus } from "@saleor/sdk/lib/gqlTypes/globalTypes"; import { mount, shallow } from "enzyme"; import "jest-styled-components"; import React from "react"; import { ThankYou } from "."; +import { messages } from "./ThankYou"; describe("", () => { - const orderNumber = "123"; - const orderDetailsMock = jest.fn(); - const continueShoppingMock = jest.fn(); + const props = { + orderStatus: OrderStatus.UNFULFILLED, + orderNumber: "123", + orderDetails: jest.fn(), + continueShopping: jest.fn(), + }; it("exists", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper.exists()).toEqual(true); }); it("should contain order number", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); - expect(wrapper.text()).toContain(orderNumber); + expect(wrapper.text()).toContain(props.orderNumber); }); it("should call orderDetails function when clicked", () => { - const wrapper = mount( - - ); + const wrapper = mount(); wrapper.find("button").at(1).simulate("click"); - expect(orderDetailsMock).toHaveBeenCalled(); + expect(props.orderDetails).toHaveBeenCalled(); }); it("should call continueShopping function when clicked", () => { + const wrapper = mount(); + + wrapper.find("button").at(0).simulate("click"); + + expect(props.continueShopping).toHaveBeenCalled(); + }); + + it("should display proper subtitle when order status is UNCONFIRMED", () => { const wrapper = mount( - + ); - wrapper.find("button").at(0).simulate("click"); + expect(wrapper.text()).toContain(messages.unconfirmed.defaultMessage); + }); + + it("should display proper subtitle when order status is UNFULFILLED", () => { + const wrapper = mount(); - expect(continueShoppingMock).toHaveBeenCalled(); + expect(wrapper.text()).toContain(messages.unfulfilled.defaultMessage); }); }); diff --git a/src/@next/components/organisms/ThankYou/types.ts b/src/@next/components/organisms/ThankYou/types.ts index 1b83c301f9..8a9c47087d 100755 --- a/src/@next/components/organisms/ThankYou/types.ts +++ b/src/@next/components/organisms/ThankYou/types.ts @@ -1,4 +1,7 @@ +import { OrderStatus } from "@saleor/sdk"; + export interface IProps { + orderStatus: OrderStatus; orderNumber: string; continueShopping: () => void; orderDetails: () => void; diff --git a/src/@next/pages/CheckoutPage/subpages/CheckoutReviewSubpage.tsx b/src/@next/pages/CheckoutPage/subpages/CheckoutReviewSubpage.tsx index ac25cb9165..833771447c 100644 --- a/src/@next/pages/CheckoutPage/subpages/CheckoutReviewSubpage.tsx +++ b/src/@next/pages/CheckoutPage/subpages/CheckoutReviewSubpage.tsx @@ -8,13 +8,14 @@ import { RouteComponentProps } from "react-router"; import { CheckoutReview } from "@components/organisms"; import { statuses as dummyStatuses } from "@components/organisms/DummyPaymentGateway"; -import { useCheckout } from "@saleor/sdk"; +import { OrderStatus, useCheckout } from "@saleor/sdk"; import { IFormError } from "@types"; export interface ISubmitCheckoutData { id: string; orderNumber: string; token: string; + orderStatus: OrderStatus; } export interface ICheckoutReviewSubpageHandles { @@ -97,6 +98,7 @@ const CheckoutReviewSubpageWithRef: RefForwardingComponent< setErrors([]); onSubmitSuccess({ id: data?.order?.id, + orderStatus: data?.order?.status, orderNumber: data?.order?.number, token: data?.order?.token, }); diff --git a/src/@next/pages/ThankYouPage/ThankYouPage.tsx b/src/@next/pages/ThankYouPage/ThankYouPage.tsx index bab28276d2..3ed4344416 100755 --- a/src/@next/pages/ThankYouPage/ThankYouPage.tsx +++ b/src/@next/pages/ThankYouPage/ThankYouPage.tsx @@ -10,11 +10,12 @@ import { IProps } from "./types"; const ThankYouPage: React.FC = ({}: IProps) => { const location = useLocation(); const history = useHistory(); - const { token, orderNumber } = location.state; + const { token, orderNumber, orderStatus } = location.state; return ( history.push(BASE_URL)} orderNumber={orderNumber} + orderStatus={orderStatus} orderDetails={() => history.push(generateGuestOrderDetailsUrl(token))} /> );