perf: upgrade @commercelayer/sdk and @types/react

Author: malessani

.circleci/config.yml

@@ -6,7 +6,7 @@ orbs:
 jobs:
   test: # this can be any name you choose
     docker:
-      - image: mcr.microsoft.com/playwright:v1.32.3-focal
+      - image: mcr.microsoft.com/playwright:v1.34.3-focal
     resource_class: medium+
     parallelism: 10
 

@typings/checkout.d.ts

@@ -1,3 +1,6 @@
+type NullableType<T> = T | null | undefined
+type ChildrenType = JSX.Element[] | JSX.Element | null
+
 interface HSLProps {
   h: number
   s: string
@@ -12,16 +15,16 @@ interface CheckoutSettings {
   endpoint: string
   domain: string
   slug: string
-  logoUrl?: string
+  logoUrl: NullableType<string>
   companyName: string
   language: string
   primaryColor: HSLProps
   favicon: string
-  gtmId?: string
-  supportEmail?: string
-  supportPhone?: string
-  termsUrl?: string
-  privacyUrl?: string
+  gtmId: NullableType<string>
+  supportEmail: NullableType<string>
+  supportPhone: NullableType<string>
+  termsUrl: NullableType<string>
+  privacyUrl: NullableType<string>
 }
 
 interface InvalidCheckoutSettings {

components/composite/ErrorContainer/index.tsx

@@ -4,7 +4,7 @@ import { Footer } from "components/ui/Footer"
 
 import { Wrapper, LogoWrapper, FullLogo, Main, Error } from "./styled"
 
-export const ErrorContainer = ({ children }: { children: JSX.Element[] | JSX.Element | null }) => {
+export const ErrorContainer = ({ children }: { children: ChildrenType }) => {
   return (
     <Base>
       <Container>

components/composite/OrderSummary/ReturnToCart/index.tsx

@@ -1,11 +1,10 @@
-import Link from "next/link"
 // eslint-disable-next-line import/order
 import { useTranslation } from "next-i18next"
 
 import { CartLinkWrapper, LinkWrapper } from "./styled"
 
 interface Props {
-  cartUrl?: string
+  cartUrl: NullableType<string>
 }
 
 export const ReturnToCart = ({ cartUrl }: Props) => {

components/composite/StepComplete/index.tsx

@@ -83,7 +83,7 @@ export const StepComplete: React.FC<Props> = ({
             >
               <Trans
                 i18nKey={"stepComplete.description"}
-                values={{ orderNumber: orderNumber }}
+                values={{ orderNumber }}
                 components={{
                   WrapperOrderId: <strong className="text-black" />,
                 }}
@@ -130,40 +130,44 @@ export const StepComplete: React.FC<Props> = ({
                     </RecapItemTitle>
                     <RecapBox>
                       <CustomAddress
-                        firstName={ctx.billingAddress?.first_name}
-                        lastName={ctx.billingAddress?.last_name}
-                        city={ctx.billingAddress?.city}
-                        line1={ctx.billingAddress?.line_1}
-                        line2={ctx.billingAddress?.line_2}
-                        zipCode={ctx.billingAddress?.zip_code}
-                        stateCode={ctx.billingAddress?.state_code}
-                        countryCode={ctx.billingAddress?.country_code}
-                        phone={ctx.billingAddress?.phone}
+                        firstName={ctx.billingAddress?.first_name ?? ""}
+                        lastName={ctx.billingAddress?.last_name ?? ""}
+                        city={ctx.billingAddress?.city ?? ""}
+                        line1={ctx.billingAddress?.line_1 ?? ""}
+                        line2={ctx.billingAddress?.line_2 ?? ""}
+                        zipCode={ctx.billingAddress?.zip_code ?? ""}
+                        stateCode={ctx.billingAddress?.state_code ?? ""}
+                        countryCode={ctx.billingAddress?.country_code ?? ""}
+                        phone={ctx.billingAddress?.phone ?? ""}
                         addressType="billing"
                       />
                     </RecapBox>
                   </div>
-                  <>{ctx.isShipmentRequired && (
-                    <div data-testid="shipping-address-recap">
-                      <RecapItemTitle>
-                        {t("stepComplete.ship_to")}
-                      </RecapItemTitle>
-                      <RecapBox>
-                        <CustomAddress
-                          firstName={ctx.shippingAddress?.first_name}
-                          lastName={ctx.shippingAddress?.last_name}
-                          city={ctx.shippingAddress?.city}
-                          line1={ctx.shippingAddress?.line_1}
-                          line2={ctx.shippingAddress?.line_2}
-                          zipCode={ctx.shippingAddress?.zip_code}
-                          stateCode={ctx.shippingAddress?.state_code}
-                          countryCode={ctx.shippingAddress?.country_code}
-                          phone={ctx.shippingAddress?.phone}
-                          addressType="shipping"
-                        />
-                      </RecapBox>
-                    </div>
-                  )}</>
+                  <>
+                    {ctx.isShipmentRequired && (
+                      <div data-testid="shipping-address-recap">
+                        <RecapItemTitle>
+                          {t("stepComplete.ship_to")}
+                        </RecapItemTitle>
+                        <RecapBox>
+                          <CustomAddress
+                            firstName={ctx.shippingAddress?.first_name ?? ""}
+                            lastName={ctx.shippingAddress?.last_name ?? ""}
+                            city={ctx.shippingAddress?.city ?? ""}
+                            line1={ctx.shippingAddress?.line_1 ?? ""}
+                            line2={ctx.shippingAddress?.line_2 ?? ""}
+                            zipCode={ctx.shippingAddress?.zip_code ?? ""}
+                            stateCode={ctx.shippingAddress?.state_code ?? ""}
+                            countryCode={
+                              ctx.shippingAddress?.country_code ?? ""
+                            }
+                            phone={ctx.shippingAddress?.phone ?? ""}
+                            addressType="shipping"
+                          />
+                        </RecapBox>
+                      </div>
+                    )}
+                  </>
                 </AddressContainer>
               </RecapCol>
 

components/composite/StepCustomer/AddressInputGroup/index.tsx

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

components/composite/StepCustomer/AddressSectionEmail/index.tsx

@@ -11,7 +11,7 @@ import { Label } from "components/ui/form/Label"
 interface Props {
   readonly?: boolean
   setCustomerEmail?: (email: string) => void
-  emailAddress?: string
+  emailAddress: NullableType<string>
 }
 
 export const AddressSectionEmail: React.FC<Props> = ({
@@ -59,7 +59,7 @@ export const AddressSectionEmail: React.FC<Props> = ({
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
               onBlur={saveEmail}
-              value={emailAddress}
+              value={emailAddress ?? ""}
             />
             <StyledErrors
               data-testid="customer_email_error"

components/composite/StepCustomer/AddressSectionTitle/index.tsx

@@ -5,7 +5,10 @@ interface Props {
   children?: JSX.Element[] | JSX.Element
 }
 
-export const AddressSectionTitle = ({ children, ...rest }: Props): JSX.Element => {
+export const AddressSectionTitle = ({
+  children,
+  ...rest
+}: Props): JSX.Element => {
   return <Wrapper {...rest}>{children}</Wrapper>
 }
 

components/composite/StepCustomer/BillingAddressFormNew/index.tsx

@@ -8,7 +8,7 @@ import { AddressInputGroup } from "components/composite/StepCustomer/AddressInpu
 import { AppContext } from "components/data/AppProvider"
 
 interface Props {
-  billingAddress?: Address
+  billingAddress: NullableType<Address>
   openShippingAddress: (props: ShippingToggleProps) => void
 }
 

components/composite/StepCustomer/CheckoutAddresses.tsx

@@ -19,9 +19,9 @@ import { BillingAddressFormNew } from "./BillingAddressFormNew"
 import { ShippingAddressFormNew } from "./ShippingAddressFormNew"
 
 interface Props {
-  billingAddress?: Address
-  shippingAddress?: Address
-  emailAddress?: string
+  billingAddress: NullableType<Address>
+  shippingAddress: NullableType<Address>
+  emailAddress: NullableType<string>
   hasSameAddresses: boolean
   isShipmentRequired: boolean
   isLocalLoader: boolean
@@ -49,9 +49,8 @@ export const CheckoutAddresses: React.FC<Props> = ({
 }: Props) => {
   const { t } = useTranslation()
 
-  const [shippingAddressFill, setShippingAddressFill] = useState<
-    Address | undefined
-  >(shippingAddress)
+  const [shippingAddressFill, setShippingAddressFill] =
+    useState<NullableType<Address>>(shippingAddress)
 
   const handleToggleDifferentAddress = () => {
     return [