feat: shift payment acc id details from drawer to settings (#5903)

* feat: add account id to payments settings page * fix: optimise the field to utilise FormLabel element * feat: add account_id as a parameter to * fix: remove target_account_id from payment drawer
opengovsg · Mar 13, 2023 · c9d07df · c9d07df
1 parent 06655e5
commit c9d07df
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/frontend/src/features/admin-form/create/payment/PaymentDrawer.tsx b/frontend/src/features/admin-form/create/payment/PaymentDrawer.tsx
@@ -224,18 +224,6 @@ export const PaymentInput = (): JSX.Element => {
                 {errors?.description?.message}
               </FormErrorMessage>
             </FormControl>
-
-            <FormControl
-              isRequired
-              isReadOnly={paymentsMutation.isLoading}
-              isInvalid={!!errors.target_account_id}
-            >
-              <FormLabel>Target account ID</FormLabel>
-              <Textarea {...register('target_account_id')} />
-              <FormErrorMessage>
-                {errors?.target_account_id?.message}
-              </FormErrorMessage>
-            </FormControl>
           </>
         )}
       </Stack>

diff --git a/...features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx b/...features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx
@@ -1,6 +1,8 @@
-import { Flex, Icon, Skeleton, Text } from '@chakra-ui/react'
+import { Flex, FormControl, Icon, Skeleton, Text } from '@chakra-ui/react'
 
 import { BxsCheckCircle, BxsError, BxsInfoCircle } from '~assets/icons'
+import FormLabel from '~components/FormControl/FormLabel'
+import Input from '~components/Input'
 
 import { useAdminFormPayments, useAdminFormSettings } from '../../queries'
 
@@ -70,11 +72,41 @@ const PaymentsAccountValidation = () => {
   )
 }
 
+const PaymentsAccountInformation = ({
+  account_id,
+  isLoading,
+}: {
+  account_id: string
+  isLoading: boolean
+}) => {
+  return (
+    <FormControl mb="2.5rem">
+      <FormLabel
+        description="This is the account ID connected to this form."
+        isRequired
+      >
+        Target Account ID
+      </FormLabel>
+      <Skeleton isLoaded={!isLoading}>
+        <Input isDisabled={true} value={account_id}></Input>
+      </Skeleton>
+    </FormControl>
+  )
+}
+
 const PaymentsSectionText = () => {
   const { data: settings, isLoading } = useAdminFormSettings()
 
   if (settings?.payments?.enabled && settings?.payments?.target_account_id) {
-    return <PaymentsAccountValidation />
+    return (
+      <>
+        <PaymentsAccountValidation />
+        <PaymentsAccountInformation
+          account_id={settings.payments.target_account_id}
+          isLoading={isLoading}
+        />
+      </>
+    )
   }
 
   return (