Merge pull request #232 from commercelayer/perf/reducer

perf: Refactor App State with reducer

.env.local.sample

@@ -1 +1,15 @@
-PORT=3000
+NEXT_PUBLIC_CLIENT_ID=
+NEXT_PUBLIC_ENDPOINT=
+NEXT_PUBLIC_BASE_URL=
+NEXT_PUBLIC_SLUG=
+NEXT_PUBLIC_MARKET_ID=
+NEXT_PUBLIC_MARKET_ID_SINGLE_SHIPPING_METHOD=
+
+NEXT_PUBLIC_INTEGRATION_CLIENT_ID=
+NEXT_PUBLIC_INTEGRATION_CLIENT_SECRET=
+
+NEXT_PUBLIC_CUSTOMER_USERNAME=
+NEXT_PUBLIC_CUSTOMER_PASSWORD=
+
+NEXT_PUBLIC_PAYPAL_EMAIL=
+NEXT_PUBLIC_PAYPAL_PASSWORD=

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/test-results
 
 # next.js
 /.next/
@@ -27,6 +28,7 @@ yarn-error.log*
 # local env files
 .env.local
 .env.test
+.env.staging.local
 .env.development.local
 .env.test.local
 .env.production.local

.vscode/extensions.json

@@ -7,7 +7,8 @@
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
     "bradlc.vscode-tailwindcss",
-    "stylelint.vscode-stylelint"
+    "stylelint.vscode-stylelint",
+    "ms-playwright.playwright"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []

components/composite/OrderSummary/CouponOrGiftCard/index.tsx

@@ -19,15 +19,20 @@ import {
 
 interface Props {
   readonly?: boolean
+  setCouponOrGiftCard: () => Promise<void>
 }
 
-export const CouponOrGiftCard: React.FC<Props> = ({ readonly }) => {
+export const CouponOrGiftCard: React.FC<Props> = ({
+  readonly,
+  setCouponOrGiftCard,
+}) => {
   const { t } = useTranslation()
 
   const [codeError, setCodeError] = useState(false)
 
-  const handleSubmit = async ({ success }: { success: boolean }) => {
-    if (!success) return setCodeError(true)
+  const handleSubmit = async (response: { success: boolean }) => {
+    if (!response.success) return setCodeError(true)
+    await setCouponOrGiftCard()
     return setCodeError(false)
   }
 
@@ -75,11 +80,16 @@ export const CouponOrGiftCard: React.FC<Props> = ({ readonly }) => {
             <CouponRecap>
               <span data-cy="code-coupon" {...p}>
                 <CouponName>{code}</CouponName>
-                <StyledGiftCardOrCouponRemoveButton
-                  data-cy="remove_coupon"
-                  type="coupon"
-                  label="Remove"
-                />
+                {!readonly && (
+                  <StyledGiftCardOrCouponRemoveButton
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    onClick={handleSubmit}
+                    data-cy="remove_coupon"
+                    type="coupon"
+                    label="Remove"
+                  />
+                )}
               </span>
             </CouponRecap>
           )
@@ -95,12 +105,17 @@ export const CouponOrGiftCard: React.FC<Props> = ({ readonly }) => {
             <CouponRecap>
               <span data-cy="code-giftcard" {...p}>
                 {code}
-                <StyledGiftCardOrCouponRemoveButton
-                  data-cy="remove_giftcard"
-                  type="gift_card"
-                  className=""
-                  label="Remove"
-                />
+                {!readonly && (
+                  <StyledGiftCardOrCouponRemoveButton
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    onClick={handleSubmit}
+                    data-cy="remove_giftcard"
+                    type="gift_card"
+                    className=""
+                    label="Remove"
+                  />
+                )}
               </span>
             </CouponRecap>
           )

components/composite/OrderSummary/LineItemTypes/QuantityWithPrice.tsx

@@ -0,0 +1,31 @@
+import {
+  LineItemQuantity,
+  LineItemAmount,
+} from "@commercelayer/react-components"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+const LineItemQuantityWithPrice = () => {
+  const { t } = useTranslation()
+  return (
+    <LineItemQuantity>
+      {(props) => {
+        if (props.quantity === 1) {
+          return t("orderRecap.quantity", { count: props.quantity })
+        }
+        return (
+          <LineItemAmount type="unit">
+            {(propsPrice) =>
+              t("orderRecap.quantity", {
+                count: props.quantity,
+                price: propsPrice.price,
+              })
+            }
+          </LineItemAmount>
+        )
+      }}
+    </LineItemQuantity>
+  )
+}
+
+export const QuantityWithPrice = React.memo(LineItemQuantityWithPrice)

components/composite/OrderSummary/LineItemTypes/index.tsx

@@ -2,13 +2,13 @@ import {
   LineItem,
   LineItemImage,
   LineItemName,
-  LineItemQuantity,
   LineItemAmount,
   LineItemOptions,
   LineItemType,
 } from "@commercelayer/react-components"
-import { useTranslation } from "react-i18next"
+import React from "react"
 
+import { QuantityWithPrice } from "./QuantityWithPrice"
 import {
   LineItemDescription,
   LineItemQty,
@@ -28,8 +28,6 @@ const CODE_LOOKUP: { [k: string]: "sku_code" | "bundle_code" | undefined } = {
 }
 
 export const LineItemTypes: React.FC<Props> = ({ type }) => {
-  const { t } = useTranslation()
-
   return (
     <LineItem type={type}>
       <LineItemWrapper>
@@ -47,12 +45,7 @@ export const LineItemTypes: React.FC<Props> = ({ type }) => {
             <StyledLineItemOption />
           </LineItemOptions>
           <LineItemQty>
-            <LineItemQuantity>
-              {(props) =>
-                !!props.quantity &&
-                t("orderRecap.quantity", { count: props.quantity })
-              }
-            </LineItemQuantity>
+            <QuantityWithPrice />
           </LineItemQty>
         </LineItemDescription>
       </LineItemWrapper>

components/composite/OrderSummary/LineItemTypes/styled.tsx

@@ -12,7 +12,7 @@ export const LineItemTitle = styled.div`
   ${tw`flex justify-between text-black`}
 `
 export const LineItemQty = styled.div`
-  ${tw`text-xs uppercase mt-1 bg-gray-200 max-w-max py-1 px-2.5 rounded-full tracking-wider text-gray-400 font-bold`}
+  ${tw`text-xs mt-1 bg-gray-200 max-w-max py-1 px-2.5 rounded-full tracking-wider text-gray-400 font-bold`}
 `
 export const StyledLineItemSkuCode = styled(LineItemCode)`
   ${tw`text-xxs uppercase text-gray-400 font-bold`}

components/composite/OrderSummary/index.tsx

@@ -68,7 +68,10 @@ export const OrderSummary: React.FC<Props> = ({ appCtx, readonly }) => {
       <TotalWrapper>
         <AmountSpacer />
         <AmountWrapper>
-          <CouponOrGiftCard readonly={readonly} />
+          <CouponOrGiftCard
+            readonly={readonly}
+            setCouponOrGiftCard={appCtx.setCouponOrGiftCard}
+          />
           <RecapLine>
             <RecapLineItem>{t("orderRecap.subtotal_amount")}</RecapLineItem>
             <SubTotalAmount />

components/composite/StepCustomer/AddressSectionEmail/index.tsx

@@ -13,11 +13,13 @@ import { Label } from "components/ui/form/Label"
 
 interface Props {
   readonly?: boolean
+  setCustomerEmail?: (email: string) => void
   emailAddress: string | undefined
 }
 
 export const AddressSectionEmail: React.FC<Props> = ({
   readonly,
+  setCustomerEmail,
   emailAddress,
 }) => {
   const { t } = useTranslation()
@@ -36,6 +38,11 @@ export const AddressSectionEmail: React.FC<Props> = ({
       message: t("input.mustBeValidEmail"),
     },
   ]
+  const saveEmail = (email: string) => {
+    if (setCustomerEmail) {
+      setCustomerEmail(email)
+    }
+  }
 
   return (
     <Wrapper>
@@ -52,6 +59,9 @@ export const AddressSectionEmail: React.FC<Props> = ({
               id="customer_email"
               errorClassName="hasError"
               saveOnBlur={true}
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              onBlur={saveEmail}
               value={emailAddress}
             />
             <StyledErrors

components/composite/StepCustomer/CheckoutAddresses.tsx

@@ -31,6 +31,7 @@ interface Props {
   setShipToDifferentAddress: Dispatch<SetStateAction<boolean>>
   openShippingAddress: (props: ShippingToggleProps) => void
   disabledShipToDifferentAddress: boolean
+  setCustomerEmail: (email: string) => void
   handleSave: () => void
 }
 
@@ -45,6 +46,7 @@ export const CheckoutAddresses: React.FC<Props> = ({
   setShipToDifferentAddress,
   openShippingAddress,
   disabledShipToDifferentAddress,
+  setCustomerEmail,
   handleSave,
 }: Props) => {
   const { t } = useTranslation()
@@ -68,7 +70,10 @@ export const CheckoutAddresses: React.FC<Props> = ({
 
   return (
     <Fragment>
-      <AddressSectionEmail emailAddress={emailAddress} />
+      <AddressSectionEmail
+        emailAddress={emailAddress}
+        setCustomerEmail={setCustomerEmail}
+      />
       <AddressesContainer shipToDifferentAddress={shipToDifferentAddress}>
         <div className="mt-4">
           <AddressSectionTitle>

components/composite/StepCustomer/index.tsx

@@ -1,6 +1,6 @@
 // import { Address, AddressField } from "@commercelayer/react-components"
 import classNames from "classnames"
-import { Fragment, useContext, useState } from "react"
+import { Fragment, useContext, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { AccordionContext } from "components/data/AccordionProvider"
@@ -75,13 +75,18 @@ export const StepCustomer: React.FC<Props> = () => {
     isUsingNewShippingAddress,
     hasCustomerAddresses,
     shippingCountryCodeLock,
-    refetchOrder,
+    setAddresses,
+    setCustomerEmail,
   } = appCtx
 
   const [shipToDifferentAddress, setShipToDifferentAddress] = useState(
     !hasSameAddresses
   )
 
+  useEffect(() => {
+    setShipToDifferentAddress(!hasSameAddresses)
+  }, [hasSameAddresses])
+
   const [disabledShipToDifferentAddress, setDisabledShipToDifferentAddress] =
     useState(
       !!(
@@ -103,7 +108,7 @@ export const StepCustomer: React.FC<Props> = () => {
 
   const handleSave = async () => {
     setIsLocalLoader(true)
-    await refetchOrder()
+    await setAddresses()
 
     // it is used temporarily to scroll
     // to the next step and fix
@@ -133,6 +138,7 @@ export const StepCustomer: React.FC<Props> = () => {
                 billingAddress={billingAddress}
                 emailAddress={emailAddress}
                 hasSameAddresses={hasSameAddresses}
+                setCustomerEmail={setCustomerEmail}
                 isShipmentRequired={isShipmentRequired}
                 isLocalLoader={isLocalLoader}
                 openShippingAddress={openShippingAddress}

components/composite/StepPayment/CheckoutCustomerPayment.tsx

@@ -20,10 +20,10 @@ import {
 } from "./styled"
 
 interface Props {
-  refetchOrder: () => Promise<void>
+  selectPayment: () => Promise<void>
 }
 
-export const CheckoutCustomerPayment: React.FC<Props> = ({ refetchOrder }) => {
+export const CheckoutCustomerPayment: React.FC<Props> = ({ selectPayment }) => {
   const { t } = useTranslation()
 
   // TemplateSaveToWalletCheckbox
@@ -91,7 +91,7 @@ export const CheckoutCustomerPayment: React.FC<Props> = ({ refetchOrder }) => {
         className="payment"
         loader={PaymentSkeleton}
         clickableContainer
-        onClick={refetchOrder}
+        onClick={selectPayment}
       >
         <PaymentWrapper>
           <PaymentSummaryList />

components/composite/StepPayment/CheckoutPayment.tsx

@@ -10,20 +10,20 @@ import {
 } from "./styled"
 
 interface Props {
-  refetchOrder: () => Promise<void>
+  selectPayment: () => Promise<void>
 }
 
-export const CheckoutPayment: React.FC<Props> = ({ refetchOrder }) => {
+export const CheckoutPayment: React.FC<Props> = ({ selectPayment }) => {
   return (
     <>
       <PaymentMethod
         activeClass="active"
         className="payment"
         loader={PaymentSkeleton}
         clickableContainer
-        onClick={refetchOrder}
+        onClick={selectPayment}
       >
-        <PaymentWrapper>
+        <PaymentWrapper data-cy="payment-sources-container">
           <PaymentSummaryList />
           <PaymentSourceContainer data-cy="payment-source">
             <PaymentSource className="flex flex-col" loader={PaymentSkeleton}>

components/composite/StepPayment/index.tsx

@@ -5,6 +5,7 @@ import {
   PaymentSource,
   PaymentSourceBrandIcon,
 } from "@commercelayer/react-components"
+import { PaymentMethod } from "@commercelayer/sdk"
 import classNames from "classnames"
 import { useContext } from "react"
 import { Trans, useTranslation } from "react-i18next"
@@ -92,7 +93,11 @@ export const StepPayment: React.FC = () => {
     return null
   }
 
-  const { isGuest, isPaymentRequired, refetchOrder } = appCtx
+  const { isGuest, isPaymentRequired, setPayment } = appCtx
+
+  const selectPayment = async (payment?: PaymentMethod) => {
+    setPayment(payment)
+  }
 
   return (
     <StepContainer
@@ -106,9 +111,9 @@ export const StepPayment: React.FC = () => {
           <div>
             {isPaymentRequired ? (
               isGuest ? (
-                <CheckoutPayment refetchOrder={refetchOrder} />
+                <CheckoutPayment selectPayment={selectPayment} />
               ) : (
-                <CheckoutCustomerPayment refetchOrder={refetchOrder} />
+                <CheckoutCustomerPayment selectPayment={selectPayment} />
               )
             ) : (
               <p className="text-sm text-gray-400">