feat: update copy for payment method for self onboarding

Author: serikjensen

docs/workflows-overview/employee-onboarding/employee-onboarding.md

@@ -241,10 +241,11 @@ function MyComponent() {
 
 #### Props
 
-| Name                | Type   | Description                            |
-| ------------------- | ------ | -------------------------------------- |
-| employeeId Required | string | The associated employee identifier.    |
-| onEvent Required    |        | See events table for available events. |
+| Name                | Type   | Description                                                                                          |
+| ------------------- | ------ | ---------------------------------------------------------------------------------------------------- |
+| employeeId Required | string | The associated employee identifier.                                                                  |
+| onEvent Required    |        | See events table for available events.                                                               |
+| isAdmin             |        | If the onboarding is being performed by an admin. When false it is configured to be self onboarding. |
 
 #### Events
 

src/components/Employee/PaymentMethod/PaymentMethod.tsx

@@ -38,6 +38,7 @@ import { useComponentDictionary } from '@/i18n/I18n'
 interface PaymentMethodProps extends CommonComponentInterface<'Employee.PaymentMethod'> {
   employeeId: string
   defaultValues?: never
+  isAdmin?: boolean
 }
 
 export function PaymentMethod(props: PaymentMethodProps & BaseComponentInterface) {
@@ -48,7 +49,7 @@ export function PaymentMethod(props: PaymentMethodProps & BaseComponentInterface
   )
 }
 
-const Root = ({ employeeId, className, dictionary }: PaymentMethodProps) => {
+const Root = ({ employeeId, className, dictionary, isAdmin = false }: PaymentMethodProps) => {
   useI18n('Employee.PaymentMethod')
   useComponentDictionary('Employee.PaymentMethod', dictionary)
   const { baseSubmitHandler, onEvent } = useBase()
@@ -239,6 +240,7 @@ const Root = ({ employeeId, className, dictionary }: PaymentMethodProps) => {
           handleAdd,
           handleDelete,
           handleSplit,
+          isAdmin,
         }}
       >
         <FormProvider {...formMethods}>
@@ -257,7 +259,7 @@ const Root = ({ employeeId, className, dictionary }: PaymentMethodProps) => {
 }
 
 export const PaymentMethodContextual = () => {
-  const { employeeId, onEvent } = useFlow<OnboardingContextInterface>()
+  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()
   const { t } = useTranslation('common')
 
   if (!employeeId) {
@@ -269,5 +271,5 @@ export const PaymentMethodContextual = () => {
       }),
     )
   }
-  return <PaymentMethod employeeId={employeeId} onEvent={onEvent} />
+  return <PaymentMethod employeeId={employeeId} onEvent={onEvent} isAdmin={isAdmin} />
 }

src/components/Employee/PaymentMethod/PaymentTypeForm.tsx

@@ -11,7 +11,7 @@ export type PaymentTypeInputs = z.input<typeof PaymentTypeSchema>
 export type PaymentTypePayload = z.output<typeof PaymentTypeSchema>
 
 export function PaymentTypeForm() {
-  const { mode } = usePaymentMethod()
+  const { mode, isAdmin } = usePaymentMethod()
   const { t } = useTranslation('Employee.PaymentMethod')
   if (mode !== 'INITIAL' && mode !== 'LIST') return
   return (
@@ -23,12 +23,12 @@ export function PaymentTypeForm() {
         {
           value: PAYMENT_METHODS.directDeposit,
           label: t('directDepositLabel'),
-          description: t('directDepositDescription'),
+          description: isAdmin ? t('directDepositDescription') : t('directDepositDescriptionSelf'),
         },
         {
           value: PAYMENT_METHODS.check,
           label: t('checkLabel'),
-          description: t('checkDescription'),
+          description: isAdmin ? t('checkDescription') : t('checkDescriptionSelf'),
         },
       ]}
     />

src/components/Employee/PaymentMethod/usePaymentMethod.ts

@@ -62,6 +62,7 @@ type PaymentMethodContextType = {
   handleSplit: () => void
   handleCancel: () => void
   handleDelete: (uuid: string) => void
+  isAdmin: boolean
 }
 
 export type MODE = 'ADD' | 'LIST' | 'SPLIT' | 'INITIAL'

src/i18n/en/Employee.PaymentMethod.json

@@ -13,9 +13,11 @@
   "saveCta": "Save",
   "cancelAddCta": "Cancel",
   "checkDescription": "If you select check as the payment method, you'll need to write a physical check to this employee each payday.",
+  "checkDescriptionSelf": "If you select check as the payment method, you'll receive a physical check.",
   "checkLabel": "Check",
   "deleteBankAccountCTA": "Delete",
   "directDepositDescription": "We recommend direct deposit — we can deposit paychecks directly into your employees' bank accounts.",
+  "directDepositDescriptionSelf": "We recommend direct deposit — we can deposit paychecks directly into your account.",
   "directDepositLabel": "Direct Deposit",
   "hamburgerTitle": "Bank account actions",
   "nameLabel": "Account nickname",

src/types/i18next.d.ts

@@ -835,9 +835,11 @@ export interface EmployeePaymentMethod{
 "saveCta":string;
 "cancelAddCta":string;
 "checkDescription":string;
+"checkDescriptionSelf":string;
 "checkLabel":string;
 "deleteBankAccountCTA":string;
 "directDepositDescription":string;
+"directDepositDescriptionSelf":string;
 "directDepositLabel":string;
 "hamburgerTitle":string;
 "nameLabel":string;