feat: upgrade SDK and react-components

Author: giacomosardo

components/composite/OrderSummary/index.tsx

@@ -80,8 +80,6 @@ export const OrderSummary: React.FC<Props> = ({ appCtx }) => {
           <RecapLine>
             <ShippingAmount>
               {(props) => {
-                console.log(props)
-
                 if (!appCtx.isShipmentRequired) return <></>
                 return (
                   <>

components/composite/StepCustomer/AddressInputGroup/index.tsx

@@ -68,7 +68,7 @@ export const AddressInputGroup: React.FC<Props> = ({
 
   const appCtx = useContext(AppContext)
 
-  let shippingCountryCodeLock = ""
+  let shippingCountryCodeLock: string | undefined = ""
 
   if (appCtx) {
     shippingCountryCodeLock = appCtx.shippingCountryCodeLock

components/composite/StepCustomer/BillingAddressFormNew/index.tsx

@@ -45,9 +45,9 @@ export const BillingAddressFormNew: React.FC<Props> = ({
       />
       <AddressInputGroup
         fieldName="billing_address_line_2"
-        resource="billingAddress"
+        resource="billing_address"
         type="text"
-        value={billingAddress?.line2 || ""}
+        value={billingAddress?.line_2 || ""}
       />
       <Grid>
         <AddressInputGroup

components/composite/StepCustomer/CheckoutCustomerAddresses.tsx

@@ -87,6 +87,23 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
     }
   }, [shipToDifferentAddress])
 
+  useEffect(() => {
+    // temp fix to resolve flag bug
+    if (showBillingAddressForm) {
+      localStorage.setItem(
+        "_save_billing_address_to_customer_address_book",
+        "false"
+      )
+    }
+    if (showShippingAddressForm) {
+      localStorage.setItem(
+        "_save_shipping_address_to_customer_address_book",
+        "false"
+      )
+    }
+    // --
+  }, [showBillingAddressForm, showShippingAddressForm])
+
   const handleScroll = (type: AddressTypeEnum) => {
     const tab = document
       .querySelector(`h3[data-cy="${type}-address"]`)

components/composite/StepCustomer/ShippingAddressFormNew/index.tsx

@@ -39,9 +39,9 @@ export const ShippingAddressFormNew: React.FC<Props> = ({
 
       <AddressInputGroup
         fieldName="shipping_address_line_2"
-        resource="shippingAddress"
+        resource="shipping_address"
         type="text"
-        value={shippingAddress?.line2 || ""}
+        value={shippingAddress?.line_2 || ""}
       />
 
       <Grid>

components/composite/StepPayment/CheckoutCustomerPayment.tsx

@@ -1,5 +1,5 @@
 import {
-  CustomerCardsTemplate,
+  CustomerCardsType,
   PaymentMethod,
   PaymentSource,
 } from "@commercelayer/react-components"
@@ -26,10 +26,14 @@ interface Props {
 
 export const CheckoutCustomerPayment: React.FC<Props> = ({ refetchOrder }) => {
   const { t } = useTranslation()
+
+  // TemplateSaveToWalletCheckbox
+  const [checked, setChecked] = useState(false)
+
   const TemplateCustomerCards = ({
     customerPayments,
     PaymentSourceProvider,
-  }: CustomerCardsTemplate) => {
+  }: CustomerCardsType) => {
     return (
       <>
         {customerPayments.map((p, k) => {
@@ -53,7 +57,6 @@ export const CheckoutCustomerPayment: React.FC<Props> = ({ refetchOrder }) => {
   const TemplateSaveToWalletCheckbox = ({
     name,
   }: CustomerSaveToWalletProps) => {
-    const [checked, setChecked] = useState(false)
     const handleClick = (
       e: MouseEvent<HTMLInputElement, globalThis.MouseEvent>
     ) => e?.stopPropagation()

components/composite/StepPayment/PaymentContainer/index.tsx

@@ -72,8 +72,8 @@ export const PaymentContainer: React.FC = ({ children }) => {
           },
         },
         paypalPayment: {
-          cancelUrl: `${window.location.href}&paymentReturn=true`,
-          returnUrl: `${window.location.href}&paymentReturn=true`,
+          cancel_url: `${window.location.href}&paymentReturn=true`,
+          return_url: `${window.location.href}&paymentReturn=true`,
           infoMessage: {
             text: t("stepPayment.paypalDescription"),
             className: "text-sm text-gray-500",

components/composite/StepPayment/PaymentDetails/index.tsx

@@ -46,9 +46,9 @@ export const PaymentDetails: React.FC<Props> = ({ hasEditButton = false }) => {
         </div>
         {isCreditCard && (
           <div className="pl-10 text-gray-500 lg:pl-2">
-            {t("stepPayment.expires")} <PaymentSourceDetail type="expMonth" />
+            {t("stepPayment.expires")} <PaymentSourceDetail type="exp_month" />
             /
-            <PaymentSourceDetail type="expYear" />
+            <PaymentSourceDetail type="exp_year" />
           </div>
         )}
       </div>

components/composite/StepPlaceOrder/index.tsx

@@ -96,8 +96,8 @@ const StepPlaceOrder: React.FC<Props> = ({
   const handlePlaceOrder = async () => {
     setIsPlacingOrder(true)
     if (gtmCtx?.firePurchase && gtmCtx?.fireAddPaymentInfo) {
-      gtmCtx.fireAddPaymentInfo()
-      gtmCtx.firePurchase()
+      await gtmCtx.fireAddPaymentInfo()
+      await gtmCtx.firePurchase()
     }
     await refetchOrder()
     setIsPlacingOrder(false)

components/composite/StepShipping/index.tsx

@@ -117,11 +117,12 @@ export const StepShipping: React.FC<Props> = () => {
 
   const handleChange = (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    shippingMethod: ShippingMethodCollection | Record<string, any>
+    shippingMethod: ShippingMethodCollection | Record<string, any>,
+    shipmentId: string
   ): void => {
     setShipmentsSelected((shipmentsSelected) =>
       shipmentsSelected?.map((shipment) => {
-        return shipment.shipmentId === shippingMethod.id
+        return shipment.shipmentId === shipmentId
           ? {
               ...shipment,
               shippingMethodId: shippingMethod.id,
@@ -136,7 +137,7 @@ export const StepShipping: React.FC<Props> = () => {
     await refetchOrder()
     setIsLocalLoader(false)
     if (gtmCtx?.fireAddShippingInfo) {
-      gtmCtx.fireAddShippingInfo()
+      await gtmCtx.fireAddShippingInfo()
     }
   }
 
@@ -193,26 +194,22 @@ export const StepShipping: React.FC<Props> = () => {
                       <ShippingMethod emptyText={t("stepShipping.notAvaible")}>
                         <ShippingSummary>
                           <StyledShippingMethodRadioButton
-                            className="form-radio mt-0.5 md:mt-0"
                             data-cy="shipping-method-button"
-                            onChange={(
-                              shippingMethod:
-                                | ShippingMethodCollection
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                | Record<string, any>
-                            ) => handleChange(shippingMethod)}
+                            className="form-radio mt-0.5 md:mt-0"
+                            onChange={(shippingMethod, shipmentId) =>
+                              handleChange(shippingMethod, shipmentId)
+                            }
                           />
                           <ShippingMethodName data-cy="shipping-method-name">
                             {(props) => {
                               const deliveryLeadTime =
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                 // @ts-ignore
                                 props?.deliveryLeadTimeForShipment
-                              console.log(props)
                               return (
                                 <label
                                   className="flex flex-col p-3 border rounded cursor-pointer hover:border-primary transition duration-200 ease-in"
-                                  // htmlFor={`shipment-${props.shippingMethod.id}-${props.shippingMethod.id}`}
+                                  htmlFor={props.htmlFor}
                                 >
                                   <ShippingLineItemTitle>
                                     {props.label}