Merge pull request #281 from open-formulieren/bug/5817-profile-preferences-modal-initial-values

Fix initial value of digitalAddressPreferencesModal

Author: sergei-maertens

src/registry/customerProfile/digitalAddressPreferencesModal.tsx

@@ -14,18 +14,20 @@ import Modal from '@/components/modal/Modal';
 import PortalUrl from './PortalUrl';
 import {useCustomerProfileComponentParameters} from './hooks';
 
+type FormValues = {preference: PreferenceUpdateOptions};
+type PreferenceRadioOption = RadioOption & {value: PreferenceUpdateOptions};
+
 interface DigitalAddressPreferencesModalProps extends Pick<ModalProps, 'closeModal' | 'isOpen'> {
   onSubmit: (preference: PreferenceUpdateOptions) => void;
   digitalAddressType: DigitalAddressType;
+  initialValue: FormValues;
 }
 
-type FormValues = {preference: PreferenceUpdateOptions};
-type PreferenceRadioOption = RadioOption & {value: PreferenceUpdateOptions};
-
 const DigitalAddressPreferencesModal: React.FC<DigitalAddressPreferencesModalProps> = ({
   closeModal,
   isOpen,
   onSubmit,
+  initialValue,
   digitalAddressType,
 }) => {
   const id = useId();
@@ -44,8 +46,7 @@ const DigitalAddressPreferencesModal: React.FC<DigitalAddressPreferencesModalPro
       closeModal={closeModal}
     >
       <Formik<FormValues>
-        // By default, use the 'useOnlyOnce' option
-        initialValues={{preference: 'useOnlyOnce'}}
+        initialValues={initialValue}
         onSubmit={({preference}) => onSubmit(preference)}
       >
         <Form>

src/registry/customerProfile/index.stories.tsx

@@ -149,6 +149,61 @@ export const OpenPreferencesModal: Story = {
   },
 };
 
+export const OpenPreferencesModalWithInitialValue: Story = {
+  args: {
+    componentDefinition: {
+      id: 'customerProfile',
+      type: 'customerProfile',
+      key: 'customerProfile',
+      label: 'Profile',
+      digitalAddressTypes: ['email'],
+      shouldUpdateCustomerData: false,
+    },
+  },
+  parameters: {
+    formik: {
+      initialValues: {
+        customerProfile: [
+          {
+            type: 'email',
+            address: 'test@mail.com',
+            preferenceUpdate: 'isNewPreferred',
+          },
+        ],
+      },
+    },
+  },
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+    const emailField = await canvas.findByLabelText('Email');
+
+    // Initial value is set
+    expect(emailField).toHaveValue('test@mail.com');
+
+    // Open preferences modal
+    await userEvent.click(
+      await canvas.findByRole('button', {
+        name: 'Update preferences',
+      })
+    );
+
+    await step('In preferences modal', async () => {
+      // Open preferences modal
+      const modal = within(await canvas.findByRole('dialog'));
+      const forFutureUseRadio = modal.getByRole('radio', {
+        name: 'Save my preferences for the next time. You can always change them again later in the portal.',
+      });
+      const oneTimeUseRadio = modal.getByRole('radio', {
+        name: 'Use this email address only for this form.',
+      });
+
+      // Expect the preference from the initial value to be checked
+      expect(forFutureUseRadio).toBeChecked();
+      expect(oneTimeUseRadio).not.toBeChecked();
+    });
+  },
+};
+
 export const OpenPreferencesModalWithoutPortalUrl: Story = {
   args: {
     componentDefinition: {

src/registry/customerProfile/subFields.tsx

@@ -159,9 +159,12 @@ const DigitalAddressTextfield: React.FC<DigitalAddressTextfieldProps> = ({
   const {getFieldHelpers, getFieldMeta} = useFormikContext<DigitalAddress>();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const {updatePreferencesModalEnabled} = useCustomerProfileComponentParameters();
-  const {setValue: setPreference} = getFieldHelpers<DigitalAddress['preferenceUpdate']>(
-    `${namePrefix}.preferenceUpdate`
-  );
+
+  const preferenceUpdateFieldName = `${namePrefix}.preferenceUpdate`;
+  const {value: preference} =
+    getFieldMeta<DigitalAddress['preferenceUpdate']>(preferenceUpdateFieldName);
+  const {setValue: setPreference} =
+    getFieldHelpers<DigitalAddress['preferenceUpdate']>(preferenceUpdateFieldName);
 
   const {value, error} = getFieldMeta<DigitalAddress['address']>(fieldName);
 
@@ -205,6 +208,7 @@ const DigitalAddressTextfield: React.FC<DigitalAddressTextfieldProps> = ({
           </ButtonGroup>
           <DigitalAddressPreferencesModal
             isOpen={isModalOpen}
+            initialValue={{preference: preference || 'useOnlyOnce'}}
             closeModal={() => setIsModalOpen(false)}
             onSubmit={newPreference => {
               // Update the preference field