fix(checkout): CHECKOUT-10180 Initialize checklist formik with correct value

packages/ui/src/form/Checklist/Checklist.test.tsx

@@ -1,14 +1,25 @@
-import { Formik } from 'formik';
+import { Formik, useFormikContext } from 'formik';
 import React from 'react';
 
 import { render, screen } from '@bigcommerce/checkout/test-utils';
 
 import { Checklist } from './Checklist';
 
-const renderChecklist = (children?: React.ReactNode) =>
+const FormikValue = ({ name }: { name: string }) => {
+    const { values } = useFormikContext<Record<string, string>>();
+
+    return <span data-test="formik-value">{values[name]}</span>;
+};
+
+const renderChecklist = (children?: React.ReactNode, defaultSelectedItemId?: string) =>
     render(
-        <Formik initialValues={{ payment: '' }} onSubmit={jest.fn()}>
-            <Checklist name="payment">{children}</Checklist>
+        <Formik initialValues={{ shippingOptionId: '' }} onSubmit={jest.fn()}>
+            <>
+                <Checklist defaultSelectedItemId={defaultSelectedItemId} name="shippingOptionId">
+                    {children}
+                </Checklist>
+                <FormikValue name="shippingOptionId" />
+            </>
         </Formik>,
     );
 
@@ -27,4 +38,16 @@ describe('Checklist', () => {
         expect(accordion).toHaveClass('form-checklist');
         expect(accordion).toHaveClass('optimizedCheckout-form-checklist');
     });
+
+    it('initializes the formik field with the default selected item id', () => {
+        renderChecklist(undefined, 'standard-shipping');
+
+        expect(screen.getByTestId('formik-value')).toHaveTextContent('standard-shipping');
+    });
+
+    it('leaves the formik field empty when no default selected item id is provided', () => {
+        renderChecklist();
+
+        expect(screen.getByTestId('formik-value')).toBeEmptyDOMElement();
+    });
 });

packages/ui/src/form/Checklist/Checklist.tsx

@@ -27,13 +27,18 @@ export interface ChecklistContextProps {
 export const ChecklistContext = createContext<ChecklistContextProps | undefined>(undefined);
 
 export const Checklist: FunctionComponent<ChecklistProps> = ({
+    defaultSelectedItemId,
     name,
     onSelect = noop,
     ...props
 }) => {
     const { setFieldValue } = useFormikContext();
 
     useEffect(() => {
+        if (defaultSelectedItemId) {
+            void setFieldValue(name, defaultSelectedItemId);
+        }
+
         return () => {
             void setFieldValue(name, '');
         };
@@ -55,6 +60,7 @@ export const Checklist: FunctionComponent<ChecklistProps> = ({
             <Accordion
                 {...props}
                 className="form-checklist optimizedCheckout-form-checklist"
+                defaultSelectedItemId={defaultSelectedItemId}
                 onSelect={handleSelect}
             />
         </ChecklistContext.Provider>