error messages

bigcommerce · May 10, 2024 · 99c2bea · 99c2bea
1 parent 59574a5
commit 99c2bea
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 42 deletions.
diff --git a/.../(default)/login/register-customer/_components/register-customer-form/fields/password.tsx b/.../(default)/login/register-customer/_components/register-customer-form/fields/password.tsx
@@ -19,7 +19,7 @@ interface PasswordProps {
 }
 
 export const Password = ({ field, isValid, name, onChange }: PasswordProps) => {
-  const t = useTranslations('Account.Register');
+  const t = useTranslations('Account.Register.validationMessages');
 
   return (
     <Field className="relative space-y-2 pb-7" name={name}>
@@ -42,7 +42,7 @@ export const Password = ({ field, isValid, name, onChange }: PasswordProps) => {
           className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
           match="valueMissing"
         >
-          {t('emptyPasswordValidatoinMessage')}
+          {t('password')}
         </FieldMessage>
       )}
       {FieldNameToFieldId[field.entityId] === 'confirmPassword' && (
@@ -52,7 +52,7 @@ export const Password = ({ field, isValid, name, onChange }: PasswordProps) => {
             return !isValid;
           }}
         >
-          {t('equalPasswordValidatoinMessage')}
+          {t('confirmPassword')}
         </FieldMessage>
       )}
     </Field>

diff --git a/...t)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx b/...t)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx
@@ -1,5 +1,4 @@
 import { useTranslations } from 'next-intl';
-import { ChangeEvent } from 'react';
 
 import { Field, FieldControl, FieldLabel, FieldMessage } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
@@ -12,22 +11,15 @@ type PicklistOrTextType = Extract<
   { __typename: 'PicklistOrTextFormField' }
 >;
 
-interface PicklistWithTextProps {
+interface PicklistOrTextProps {
   defaultValue?: string;
   field: PicklistOrTextType;
   name: string;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   options: Array<{ label: string; entityId: string | number }>;
   variant?: 'error';
 }
 
-export const PicklistOrText = ({
-  defaultValue,
-  field,
-  name,
-  onChange,
-  options,
-}: PicklistWithTextProps) => {
+export const PicklistOrText = ({ defaultValue, field, name, options }: PicklistOrTextProps) => {
   const t = useTranslations('Account.Register');
 
   return (
@@ -40,12 +32,7 @@ export const PicklistOrText = ({
       </FieldLabel>
       <FieldControl asChild>
         {options.length === 0 ? (
-          <Input
-            id={`field-${field.entityId}`}
-            onChange={field.isRequired ? onChange : undefined}
-            onInvalid={field.isRequired ? onChange : undefined}
-            type="text"
-          />
+          <Input id={`field-${field.entityId}`} type="text" />
         ) : (
           <Select
             aria-label="Choose state or province"
@@ -55,7 +42,7 @@ export const PicklistOrText = ({
             placeholder="Choose state or province"
             required={field.isRequired}
           >
-            <SelectContent>
+            <SelectContent position="item-aligned">
               {field.entityId === FieldNameToFieldId.stateOrProvince &&
                 options.map(({ entityId, label }) => {
                   return (

diff --git a/.../(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx b/.../(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
@@ -31,7 +31,7 @@ export const Picklist = ({ defaultValue, field, name, onChange, options }: Pickl
           placeholder={field.choosePrefix}
           required={field.isRequired}
         >
-          <SelectContent>
+          <SelectContent position="item-aligned">
             {field.entityId === FieldNameToFieldId.countryCode &&
               options.map(({ label, entityId }) => (
                 <SelectItem key={entityId} value={entityId.toString()}>

diff --git a/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/text.tsx b/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/text.tsx
@@ -19,7 +19,7 @@ interface TextProps {
 }
 
 export const Text = ({ field, isValid, name, onChange, type }: TextProps) => {
-  const t = useTranslations('Account.Register');
+  const t = useTranslations('Account.Register.validationMessages');
 
   return (
     <Field className="relative space-y-2 pb-7" name={name}>
@@ -43,15 +43,15 @@ export const Text = ({ field, isValid, name, onChange, type }: TextProps) => {
           className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
           match="valueMissing"
         >
-          {t('emptyTextValidatoinMessage')}
+          {t(FieldNameToFieldId[field.entityId] ?? 'empty')}
         </FieldMessage>
       )}
       {FieldNameToFieldId[field.entityId] === 'email' && (
         <FieldMessage
           className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
           match="typeMismatch"
         >
-          {t('emailValidationMessage')}
+          {t('email')}
         </FieldMessage>
       )}
     </Field>

diff --git a/...p/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx b/...p/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
@@ -137,10 +137,6 @@ export const RegisterCustomerForm = ({
 
   const [countryStates, setCountryStates] = useState(defaultCountry.states);
 
-  const [picklistWithTextValid, setPicklistWithTextValid] = useState<{ [key: string]: boolean }>(
-    {},
-  );
-
   const reCaptchaRef = useRef<ReCaptcha>(null);
   const [reCaptchaToken, setReCaptchaToken] = useState('');
   const [isReCaptchaValid, setReCaptchaValid] = useState(true);
@@ -192,14 +188,6 @@ export const RegisterCustomerForm = ({
     setCountryStates(states ?? []);
   };
 
-  const handlePicklistWihtTextValidation = (e: ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.id.split('-')[1]);
-
-    const validationStatus = e.target.validity.valueMissing;
-
-    return setPicklistWithTextValid({ ...picklistWithTextValid, [fieldId]: !validationStatus });
-  };
-
   const onReCaptchaChange = (token: string | null) => {
     if (!token) {
       return setReCaptchaValid(false);
@@ -348,7 +336,6 @@ export const RegisterCustomerForm = ({
                       }
                       field={field}
                       name={createFieldName('address', field.entityId)}
-                      onChange={handlePicklistWihtTextValidation}
                       options={countryStates.map(({ name }) => {
                         return { entityId: name, label: name };
                       })}

diff --git a/core/messages/en.json b/core/messages/en.json
@@ -220,14 +220,24 @@
     },
     "Register": {
         "heading": "New account",
-        "emptyTextValidatoinMessage": "This field can not be empty",
-        "emailValidationMessage": "Enter a valid email such as name@domain.com",
-        "emptyPasswordValidatoinMessage": "Enter a password",
-        "equalPasswordValidatoinMessage": "Passwords don't match",
         "submit": "Create account",
         "submitting": "Creating account...", 
         "recaptchaText": "Pass ReCAPTCHA check",
-        "successMessage": "Dear {firstName} {lastName}, your account was successfully created. Redirecting to account..."
+        "successMessage": "Dear {firstName} {lastName}, your account was successfully created. Redirecting to account...",
+        "validationMessages": {
+            "email": "Enter a valid email such as name@domain.com",
+            "empty": "This field can not be empty",
+            "firstName": "Enter your first name",
+            "lastName": "Enter your last name",
+            "password": "Enter a password",
+            "confirmPassword": "Passwords don't match",
+            "address1": "Enter an address",
+            "address2": "Enter an address",
+            "city": "Enter a suburb / city",
+            "company": "Enter a company name",
+            "phone": "Enter a phone number",
+            "postalCode": "Enter a zip / postcode"
+        }
     },
     "ChangePassword": {
       "currentPasswordLabel": "Current password",