notification type add notify address demo issue (#2361)

* Error creating events by calendar if End Date before Start Date or End time is before Start time * fix:Status service view includes extraneous top margin above heading * fix: add and edit notification type cancel state * fix: notification type add notify address demo issue --------- Co-authored-by: Shuang chen <[email protected]> Co-authored-by: Shuang chen <[email protected]> Co-authored-by: athena-chen-chen <[email protected]>
GovAlta · Dec 6, 2023 · 90aea2a · 90aea2a
1 parent e1e6cb8
commit 90aea2a
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 91 deletions.
diff --git a/...pp/src/app/pages/admin/services/notifications/addEditNotification/addEditNotification.tsx b/...pp/src/app/pages/admin/services/notifications/addEditNotification/addEditNotification.tsx
@@ -68,7 +68,9 @@ export const NotificationTypeModalForm: FunctionComponent<NotificationTypeFormPr
   }, [initialValue]);
 
   useEffect(() => {
-    setIsNotifyAddress(type?.address && type.address.length > 0);
+    setIsNotifyAddress(
+      (type?.address && type.address.length > 0) || (type?.addressPath && type.addressPath.length > 0)
+    );
   }, [type]);
 
   const roleNames = realmRoles
@@ -115,77 +117,6 @@ export const NotificationTypeModalForm: FunctionComponent<NotificationTypeFormPr
     );
   };
 
-  const selectNotificationsBySubscription = () => {
-    return (
-      <div key="select channel" style={{ display: 'flex', flexDirection: 'row' }}>
-        {channels.map((channel, key) => {
-          return (
-            <div key={key}>
-              <div style={{ paddingRight: '20px' }}>
-                <GoACheckbox
-                  name={channel.value}
-                  checked={type.channels?.map((value) => value).includes(channel.value) || channel.value === 'email'}
-                  disabled={channel.value === 'email'}
-                  onChange={() => {
-                    const channels = type.channels || ['email'];
-                    const checked = channels.findIndex((ch) => ch === channel.value);
-                    if (checked === -1) {
-                      channels.push(channel.value);
-                    } else {
-                      channels.splice(checked, 1);
-                    }
-
-                    setType({ ...type, channels: channels });
-                  }}
-                  testId="manage-subscriptions-checkbox"
-                  value="manageSubscribe"
-                  ariaLabel={`manage-subscriptions-checkbox`}
-                  text={channel.title}
-                />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-  const radioValue = () => {
-    const value = type.channels && type.channels.length > 1 ? type.channels[0] : 'email';
-    // eslint-disable-next-line array-callback-return
-    channels.map((channel) => {
-      if (channel.value === value) {
-        return channel.title;
-      }
-    });
-    return channels[0].title;
-  };
-  const selectNotificationsByAddress = () => {
-    return (
-      <GoARadioGroup
-        name="channel"
-        testId="notification-channel-radio-group"
-        ariaLabel="notification-channel-radio-group"
-        value={radioValue()}
-        onChange={(name, channel) => {
-          const channels = type.channels || ['email'];
-          const checked = channels.findIndex((ch) => ch === channel);
-          if (checked === -1) {
-            channels.push(channel);
-          } else {
-            channels.splice(checked, 1);
-          }
-
-          setType({ ...type, channels: channels });
-        }}
-        orientation="horizontal"
-      >
-        {channels?.map((channel) => (
-          <GoARadioItem name="channel" value={channel.title} />
-        ))}
-      </GoARadioGroup>
-    );
-  };
-
   const { errors, validators } = useValidators(
     'name',
     'name',
@@ -238,6 +169,7 @@ export const NotificationTypeModalForm: FunctionComponent<NotificationTypeFormPr
                 }
                 if (!isNotifyAddress) {
                   type.address = null;
+                  type.addressPath = null;
                 }
                 onSave(type);
               }}
@@ -291,7 +223,38 @@ export const NotificationTypeModalForm: FunctionComponent<NotificationTypeFormPr
           />
         </GoAFormItem>
         <GoAFormItem error={errors?.['channels']} label="Select Notification Channels">
-          {!isNotifyAddress ? selectNotificationsBySubscription() : selectNotificationsByAddress()}
+          <div key="select channel" style={{ display: 'flex', flexDirection: 'row' }}>
+            {channels.map((channel, key) => {
+              return (
+                <div key={key}>
+                  <div style={{ paddingRight: '20px' }}>
+                    <GoACheckbox
+                      name={channel.value}
+                      checked={
+                        type.channels?.map((value) => value).includes(channel.value) || channel.value === 'email'
+                      }
+                      disabled={isNotifyAddress && channel.value !== 'email'}
+                      onChange={() => {
+                        const channels = type.channels || ['email'];
+                        const checked = channels.findIndex((ch) => ch === channel.value);
+                        if (checked === -1) {
+                          channels.push(channel.value);
+                        } else {
+                          channels.splice(checked, 1);
+                        }
+
+                        setType({ ...type, channels: channels });
+                      }}
+                      testId="manage-subscriptions-checkbox"
+                      value="manageSubscribe"
+                      ariaLabel={`manage-subscriptions-checkbox`}
+                      text={channel.title}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
         </GoAFormItem>
 
         <div data-testid="manage-subscriptions-checkbox-wrapper">
@@ -348,24 +311,39 @@ export const NotificationTypeModalForm: FunctionComponent<NotificationTypeFormPr
           </GoARadioGroup>
         </GoAFormItem>
         {isNotifyAddress && (
-          <GoAFormItem label="Address Path" error={errors?.['address']}>
-            <GoAInput
-              type="text"
-              name="name"
-              value={type.address}
-              testId={`address-notification-modal-input`}
-              aria-label="addressPath"
-              width="60%"
-              onChange={(_, value) => {
-                const validations = {
-                  address: value,
-                };
-                validators.remove('address');
-                validators.checkAll(validations);
-                type.address = value;
-              }}
-            />
-          </GoAFormItem>
+          <div>
+            <GoAFormItem label="Address" error={errors?.['address']}>
+              <GoAInput
+                type="text"
+                name="address"
+                value={type.address}
+                testId={`address-notification-modal-input`}
+                aria-label="input-address"
+                width="60%"
+                onChange={(_, value) => {
+                  const validations = {
+                    address: value,
+                  };
+                  validators.remove('address');
+                  validators.checkAll(validations);
+                  type.address = value;
+                }}
+              />
+            </GoAFormItem>
+            <GoAFormItem label="Address Path">
+              <GoAInput
+                type="text"
+                name="addressPath"
+                value={type.addressPath}
+                testId={`address-notification-modal-input`}
+                aria-label="input-path-address"
+                width="60%"
+                onChange={(_, value) => {
+                  type.addressPath = value;
+                }}
+              />
+            </GoAFormItem>
+          </div>
         )}
         {tenantClients &&
           !isNotifyAddress &&

diff --git a/apps/tenant-management-webapp/src/app/store/notification/models.ts b/apps/tenant-management-webapp/src/app/store/notification/models.ts
@@ -10,6 +10,7 @@ export interface NotificationItem {
   customized?: boolean;
   manageSubscribe?: boolean;
   address?: string;
+  addressPath?: string;
 }
 
 export enum Channel {

diff --git a/apps/tenant-management-webapp/src/app/store/notification/sagas.ts b/apps/tenant-management-webapp/src/app/store/notification/sagas.ts
@@ -200,6 +200,7 @@ export function* updateNotificationType({ payload }: UpdateNotificationTypeActio
                 publicSubscribe: payload.publicSubscribe,
                 manageSubscribe: payload.manageSubscribe,
                 address: payload.address,
+                addressPath: payload.addressPath,
               },
             },
           },