fix: keep line_2 field optional on touch

Author: malessani

components/composite/StepCustomer/AddressInputGroup/index.tsx

@@ -28,13 +28,15 @@ interface Props {
   type: BaseInputType
   fieldName: AddressInputName | AddressCountrySelectName | "email"
   resource: ResourceErrorType
+  required?: boolean
   value?: string
   openShippingAddress?: (props: ShippingToggleProps) => void
 }
 
 export const AddressInputGroup: React.FC<Props> = ({
   fieldName,
   resource,
+  required,
   type,
   value,
   openShippingAddress,
@@ -150,6 +152,7 @@ export const AddressInputGroup: React.FC<Props> = ({
         <>
           <StyledAddressInput
             id={fieldName}
+            required={required}
             data-test-id={`input_${fieldName}`}
             name={fieldName as AddressInputName}
             type={type}

components/composite/StepCustomer/BillingAddressFormNew/index.tsx

@@ -49,6 +49,7 @@ export const BillingAddressFormNew: React.FC<Props> = ({
       <AddressInputGroup
         fieldName="billing_address_line_2"
         resource="billing_address"
+        required={false}
         type="text"
         value={billingAddress?.line_2 || ""}
       />

components/composite/StepCustomer/ShippingAddressFormNew/index.tsx

@@ -40,6 +40,7 @@ export const ShippingAddressFormNew: React.FC<Props> = ({
       <AddressInputGroup
         fieldName="shipping_address_line_2"
         resource="shipping_address"
+        required={false}
         type="text"
         value={shippingAddress?.line_2 || ""}
       />

playwright.config.ts

@@ -46,7 +46,7 @@ const config: PlaywrightTestConfig = {
         // Configure the browser to use.
         browserName: "chromium",
         // Any Chromium-specific options.
-        viewport: { width: 1200, height: 800 },
+        viewport: { width: 1200, height: 900 },
         baseURL: process.env.NEXT_PUBLIC_BASE_URL,
         launchOptions: {
           // logger: {

specs/e2e/guest-addresses.spec.ts

@@ -70,7 +70,7 @@ test.describe("with customer email", () => {
     await checkoutPage.checkButton({ type: "Customer", status: "enabled" })
   })
 
-  test.skip("line_2 optional attribute on billing address", async ({
+  test("line_2 optional attribute on billing address", async ({
     checkoutPage,
   }) => {
     await checkoutPage.checkOrderSummary("Order Summary")
@@ -97,7 +97,7 @@ test.describe("with customer email", () => {
     await checkoutPage.checkBillingAddress({ ...euAddress, line_2: "" })
   })
 
-  test.skip("line_2 optional attribute on shipping address", async ({
+  test("line_2 optional attribute on shipping address", async ({
     checkoutPage,
   }) => {
     await checkoutPage.checkOrderSummary("Order Summary")
@@ -123,7 +123,7 @@ test.describe("with customer email", () => {
 
     await checkoutPage.clickStep("Customer")
 
-    await checkoutPage.checkBillingAddress({ ...euAddress, line_2: "" })
+    await checkoutPage.checkShippingAddress({ ...euAddress2, line_2: "" })
   })
 })