From ceabcf878ba57e71edc7ee8b40dd14b6b82b6ace Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 12 Dec 2024 13:59:02 -0500 Subject: [PATCH 1/6] chore(core): rename translation key --- .../[locale]/(default)/(auth)/login/_components/login-form.tsx | 2 +- core/messages/da.json | 2 +- core/messages/de.json | 2 +- core/messages/en.json | 2 +- core/messages/es-419.json | 2 +- core/messages/es-AR.json | 2 +- core/messages/es-CL.json | 2 +- core/messages/es-CO.json | 2 +- core/messages/es-LA.json | 2 +- core/messages/es-MX.json | 2 +- core/messages/es-PE.json | 2 +- core/messages/es.json | 2 +- core/messages/fr.json | 2 +- core/messages/it.json | 2 +- core/messages/ja.json | 2 +- core/messages/nl.json | 2 +- core/messages/no.json | 2 +- core/messages/pl.json | 2 +- core/messages/pt-BR.json | 2 +- core/messages/pt.json | 2 +- core/messages/sv.json | 2 +- 21 files changed, 21 insertions(+), 21 deletions(-) diff --git a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx index d6218eb74..c8375f129 100644 --- a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx +++ b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx @@ -113,7 +113,7 @@ export const LoginForm = () => { className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error" match="valueMissing" > - {t('Form.entePasswordMessage')} + {t('Form.enterPasswordMessage')}
diff --git a/core/messages/da.json b/core/messages/da.json index 9681fff66..2ccf8581e 100644 --- a/core/messages/da.json +++ b/core/messages/da.json @@ -29,7 +29,7 @@ "emailLabel": "E-mail", "enterEmailMessage": "Indtast din e-mailadresse", "passwordLabel": "Adgangskode", - "entePasswordMessage": "Indtast din adgangskode.", + "enterPasswordMessage": "Indtast din adgangskode.", "submitting": "Indsender ...", "logIn": "Log ind", "forgotPassword": "Har du glemt din adgangskode?" diff --git a/core/messages/de.json b/core/messages/de.json index 6e1d7a195..2e21e2c9a 100644 --- a/core/messages/de.json +++ b/core/messages/de.json @@ -29,7 +29,7 @@ "emailLabel": "E-Mail", "enterEmailMessage": "Geben Sie Ihre E-Mail-Adresse ein", "passwordLabel": "Passwort", - "entePasswordMessage": "Geben Sie Ihr Passwort ein.", + "enterPasswordMessage": "Geben Sie Ihr Passwort ein.", "submitting": "Wird eingereicht ...", "logIn": "Anmelden", "forgotPassword": "Passwort vergessen?" diff --git a/core/messages/en.json b/core/messages/en.json index e190de8ed..9038bbfe8 100644 --- a/core/messages/en.json +++ b/core/messages/en.json @@ -29,7 +29,7 @@ "emailLabel": "Email", "enterEmailMessage": "Enter your email", "passwordLabel": "Password", - "entePasswordMessage": "Enter your password", + "enterPasswordMessage": "Enter your password", "submitting": "Submitting...", "logIn": "Log in", "forgotPassword": "Forgot your password?" diff --git a/core/messages/es-419.json b/core/messages/es-419.json index 2d1b31210..0d6b0b0d2 100644 --- a/core/messages/es-419.json +++ b/core/messages/es-419.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Ingresa tu correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Ingresa tu contraseña", + "enterPasswordMessage": "Ingresa tu contraseña", "submitting": "Enviando...", "logIn": "Inicio de sesión", "forgotPassword": "¿Olvidaste tu contraseña?" diff --git a/core/messages/es-AR.json b/core/messages/es-AR.json index 2d1b31210..0d6b0b0d2 100644 --- a/core/messages/es-AR.json +++ b/core/messages/es-AR.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Ingresa tu correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Ingresa tu contraseña", + "enterPasswordMessage": "Ingresa tu contraseña", "submitting": "Enviando...", "logIn": "Inicio de sesión", "forgotPassword": "¿Olvidaste tu contraseña?" diff --git a/core/messages/es-CL.json b/core/messages/es-CL.json index 2d1b31210..0d6b0b0d2 100644 --- a/core/messages/es-CL.json +++ b/core/messages/es-CL.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Ingresa tu correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Ingresa tu contraseña", + "enterPasswordMessage": "Ingresa tu contraseña", "submitting": "Enviando...", "logIn": "Inicio de sesión", "forgotPassword": "¿Olvidaste tu contraseña?" diff --git a/core/messages/es-CO.json b/core/messages/es-CO.json index 2d1b31210..0d6b0b0d2 100644 --- a/core/messages/es-CO.json +++ b/core/messages/es-CO.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Ingresa tu correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Ingresa tu contraseña", + "enterPasswordMessage": "Ingresa tu contraseña", "submitting": "Enviando...", "logIn": "Inicio de sesión", "forgotPassword": "¿Olvidaste tu contraseña?" diff --git a/core/messages/es-LA.json b/core/messages/es-LA.json index 2d1b31210..0d6b0b0d2 100644 --- a/core/messages/es-LA.json +++ b/core/messages/es-LA.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Ingresa tu correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Ingresa tu contraseña", + "enterPasswordMessage": "Ingresa tu contraseña", "submitting": "Enviando...", "logIn": "Inicio de sesión", "forgotPassword": "¿Olvidaste tu contraseña?" diff --git a/core/messages/es-MX.json b/core/messages/es-MX.json index 2d1b31210..0d6b0b0d2 100644 --- a/core/messages/es-MX.json +++ b/core/messages/es-MX.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Ingresa tu correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Ingresa tu contraseña", + "enterPasswordMessage": "Ingresa tu contraseña", "submitting": "Enviando...", "logIn": "Inicio de sesión", "forgotPassword": "¿Olvidaste tu contraseña?" diff --git a/core/messages/es-PE.json b/core/messages/es-PE.json index 2d1b31210..0d6b0b0d2 100644 --- a/core/messages/es-PE.json +++ b/core/messages/es-PE.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Ingresa tu correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Ingresa tu contraseña", + "enterPasswordMessage": "Ingresa tu contraseña", "submitting": "Enviando...", "logIn": "Inicio de sesión", "forgotPassword": "¿Olvidaste tu contraseña?" diff --git a/core/messages/es.json b/core/messages/es.json index 1084259ad..1830b9f79 100644 --- a/core/messages/es.json +++ b/core/messages/es.json @@ -29,7 +29,7 @@ "emailLabel": "Correo electrónico", "enterEmailMessage": "Introduzca su correo electrónico", "passwordLabel": "Contraseña", - "entePasswordMessage": "Introduce tu contraseña.", + "enterPasswordMessage": "Introduce tu contraseña.", "submitting": "Enviando...", "logIn": "Iniciar sesión", "forgotPassword": "¿Olvidó su contraseña?" diff --git a/core/messages/fr.json b/core/messages/fr.json index 09ee59039..008a88700 100644 --- a/core/messages/fr.json +++ b/core/messages/fr.json @@ -29,7 +29,7 @@ "emailLabel": "E-mail", "enterEmailMessage": "Saisissez votre adresse e-mail", "passwordLabel": "Mot de passe", - "entePasswordMessage": "Veuillez saisir votre mot de passe.", + "enterPasswordMessage": "Veuillez saisir votre mot de passe.", "submitting": "Envoi...", "logIn": "Connexion", "forgotPassword": "Mot de passe oublié ?" diff --git a/core/messages/it.json b/core/messages/it.json index 8dfc63803..4a955f9b5 100644 --- a/core/messages/it.json +++ b/core/messages/it.json @@ -29,7 +29,7 @@ "emailLabel": "E-mail", "enterEmailMessage": "Inserisci la tua e-mail", "passwordLabel": "Password", - "entePasswordMessage": "Inserisci la tua password", + "enterPasswordMessage": "Inserisci la tua password", "submitting": "Invio in corso...", "logIn": "Accedi", "forgotPassword": "Hai dimenticato la password?" diff --git a/core/messages/ja.json b/core/messages/ja.json index e2c716659..f4229abc6 100644 --- a/core/messages/ja.json +++ b/core/messages/ja.json @@ -29,7 +29,7 @@ "emailLabel": "Eメール", "enterEmailMessage": "Enter your email", "passwordLabel": "パスワード", - "entePasswordMessage": "Enter your password", + "enterPasswordMessage": "Enter your password", "submitting": "提出中…", "logIn": "ログイン", "forgotPassword": "パスワードをお忘れですか?" diff --git a/core/messages/nl.json b/core/messages/nl.json index 7aea97a38..e9c723417 100644 --- a/core/messages/nl.json +++ b/core/messages/nl.json @@ -29,7 +29,7 @@ "emailLabel": "E-mailadres", "enterEmailMessage": "Voer uw e-mail in", "passwordLabel": "Wachtwoord", - "entePasswordMessage": "Voer je wachtwoord in", + "enterPasswordMessage": "Voer je wachtwoord in", "submitting": "Verzenden...", "logIn": "Inloggen", "forgotPassword": "Wachtwoord vergeten?" diff --git a/core/messages/no.json b/core/messages/no.json index 82b097010..5b95f517c 100644 --- a/core/messages/no.json +++ b/core/messages/no.json @@ -29,7 +29,7 @@ "emailLabel": "E-post", "enterEmailMessage": "Skriv inn epostadressen din", "passwordLabel": "Passord", - "entePasswordMessage": "Skriv inn passordet ditt.", + "enterPasswordMessage": "Skriv inn passordet ditt.", "submitting": "Sender inn …", "logIn": "Logg inn", "forgotPassword": "Har du glemt passordet?" diff --git a/core/messages/pl.json b/core/messages/pl.json index 4703be56b..9cdaf94b1 100644 --- a/core/messages/pl.json +++ b/core/messages/pl.json @@ -29,7 +29,7 @@ "emailLabel": "Email", "enterEmailMessage": "Wpisz swój adres e-mail", "passwordLabel": "Hasło", - "entePasswordMessage": "Podaj hasło", + "enterPasswordMessage": "Podaj hasło", "submitting": "Przekazanie...", "logIn": "Zaloguj się", "forgotPassword": "Nie pamiętasz hasła?" diff --git a/core/messages/pt-BR.json b/core/messages/pt-BR.json index a878a496f..26cd9e903 100644 --- a/core/messages/pt-BR.json +++ b/core/messages/pt-BR.json @@ -29,7 +29,7 @@ "emailLabel": "Email", "enterEmailMessage": "Digite seu email", "passwordLabel": "Senha", - "entePasswordMessage": "Digite sua senha", + "enterPasswordMessage": "Digite sua senha", "submitting": "Enviando...", "logIn": "Credencial de acesso", "forgotPassword": "Esqueceu sua senha?" diff --git a/core/messages/pt.json b/core/messages/pt.json index a878a496f..26cd9e903 100644 --- a/core/messages/pt.json +++ b/core/messages/pt.json @@ -29,7 +29,7 @@ "emailLabel": "Email", "enterEmailMessage": "Digite seu email", "passwordLabel": "Senha", - "entePasswordMessage": "Digite sua senha", + "enterPasswordMessage": "Digite sua senha", "submitting": "Enviando...", "logIn": "Credencial de acesso", "forgotPassword": "Esqueceu sua senha?" diff --git a/core/messages/sv.json b/core/messages/sv.json index 9a692f4ee..f43373a81 100644 --- a/core/messages/sv.json +++ b/core/messages/sv.json @@ -29,7 +29,7 @@ "emailLabel": "E-post", "enterEmailMessage": "Ange din e-postadress", "passwordLabel": "Lösenord", - "entePasswordMessage": "Ange ditt lösenord", + "enterPasswordMessage": "Ange ditt lösenord", "submitting": "Skickar ...", "logIn": "Logga in", "forgotPassword": "Glömt ditt lösenord?" From f07020d2327327159fa0cb859b048b53d0474989 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 12 Dec 2024 14:33:10 -0500 Subject: [PATCH 2/6] feat(core): convert change/forgot password over to taosts --- .changeset/young-pugs-dream.md | 5 + .../_actions/change-password.ts | 30 ++-- .../_components/change-password-form.tsx | 148 +++++++++--------- 3 files changed, 93 insertions(+), 90 deletions(-) create mode 100644 .changeset/young-pugs-dream.md diff --git a/.changeset/young-pugs-dream.md b/.changeset/young-pugs-dream.md new file mode 100644 index 000000000..f38398b1a --- /dev/null +++ b/.changeset/young-pugs-dream.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +Converts the change/forgot password messages over to using a toast. diff --git a/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts b/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts index aa067d2cc..a6b3847f7 100644 --- a/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts +++ b/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts @@ -34,7 +34,12 @@ const ChangePasswordMutation = graphql(` } `); -export const changePassword = async (_previousState: unknown, formData: FormData) => { +interface ChangePasswordResponse { + status: 'success' | 'error'; + message: string; +} + +export const changePassword = async (formData: FormData): Promise => { const t = await getTranslations('ChangePassword'); try { @@ -61,29 +66,24 @@ export const changePassword = async (_previousState: unknown, formData: FormData const result = response.data.customer.resetPassword; - if (result.errors.length === 0) { - return { status: 'success', messages: [''] }; + if (result.errors.length > 0) { + result.errors.forEach((error) => { + throw new Error(error.message); + }); } return { - status: 'error', - messages: result.errors.map((error) => error.message), + status: 'success', + message: t('confirmChangePassword'), }; } catch (error: unknown) { - if (error instanceof ZodError) { - return { - status: 'error', - messages: error.issues.map(({ path, message }) => `${path.toString()}: ${message}.`), - }; - } - - if (error instanceof Error) { + if (error instanceof Error || error instanceof ZodError) { return { status: 'error', - messages: [error.message], + message: error.message, }; } - return { status: 'error', messages: [t('Errors.error')] }; + return { status: 'error', message: t('Errors.error') }; } }; diff --git a/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx b/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx index 743b8c9ab..e6b3a1484 100644 --- a/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx +++ b/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx @@ -1,8 +1,10 @@ 'use client'; +import { AlertCircle, Check } from 'lucide-react'; import { useTranslations } from 'next-intl'; -import { ChangeEvent, useActionState, useRef, useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import { useFormStatus } from 'react-dom'; +import { toast } from 'react-hot-toast'; import { Button } from '~/components/ui/button'; import { @@ -14,11 +16,8 @@ import { FormSubmit, Input, } from '~/components/ui/form'; -import { Message } from '~/components/ui/message'; import { useRouter } from '~/i18n/routing'; -import { useAccountStatusContext } from '../../../account/_components/account-status-provider'; -import { SubmitMessagesList } from '../../../account/_components/submit-messages-list'; import { changePassword } from '../_actions/change-password'; interface Props { @@ -47,92 +46,91 @@ const SubmitButton = () => { export const ChangePasswordForm = ({ customerId, customerToken }: Props) => { const t = useTranslations('ChangePassword.Form'); - const form = useRef(null); const router = useRouter(); - const [state, formAction] = useActionState(changePassword, { - status: 'idle', - messages: [''], - }); const [newPassword, setNewPasssword] = useState(''); const [isConfirmPasswordValid, setIsConfirmPasswordValid] = useState(true); - const { setAccountState } = useAccountStatusContext(); const handleNewPasswordChange = (e: ChangeEvent) => setNewPasssword(e.target.value); + const handleConfirmPasswordValidation = (e: ChangeEvent) => { const confirmPassword = e.target.value; setIsConfirmPasswordValid(confirmPassword === newPassword); }; - if (state.status === 'success') { - setAccountState({ status: 'success', messages: [t('confirmChangePassword')] }); + const handleChangePassword = async (formData: FormData) => { + const { status, message } = await changePassword(formData); + + if (status === 'error') { + toast.error(message, { + icon: , + }); + + return; + } + + toast.success(message, { + icon: , + }); + router.push('/login'); - } + }; return ( - <> - {state.status === 'error' && ( - - - - )} - -
- - - - - - - - - - - - - {t('newPasswordLabel')} - - - - - - - - - {t('confirmPasswordLabel')} - - - - - value !== newPassword} - > - {t('confirmPasswordValidationMessage')} - - - - - - -
- +
+ + + + + + + + + + + + + {t('newPasswordLabel')} + + + + + + + + + {t('confirmPasswordLabel')} + + + + + value !== newPassword} + > + {t('confirmPasswordValidationMessage')} + + + + + + +
); }; From b72ab99fb122aabb190c7bc336f75f04be44e7e5 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 12 Dec 2024 14:39:51 -0500 Subject: [PATCH 3/6] feat(core): convert login over to taosts --- .changeset/proud-queens-serve.md | 5 + .../(default)/(auth)/login/_actions/login.ts | 10 +- .../(auth)/login/_components/login-form.tsx | 144 +++++++++--------- core/messages/en.json | 1 + 4 files changed, 86 insertions(+), 74 deletions(-) create mode 100644 .changeset/proud-queens-serve.md diff --git a/.changeset/proud-queens-serve.md b/.changeset/proud-queens-serve.md new file mode 100644 index 000000000..9dd2cb6d1 --- /dev/null +++ b/.changeset/proud-queens-serve.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +Converts the login messages over to using a toast. diff --git a/core/app/[locale]/(default)/(auth)/login/_actions/login.ts b/core/app/[locale]/(default)/(auth)/login/_actions/login.ts index 3dc737d21..cde7caf6a 100644 --- a/core/app/[locale]/(default)/(auth)/login/_actions/login.ts +++ b/core/app/[locale]/(default)/(auth)/login/_actions/login.ts @@ -6,7 +6,11 @@ import { getLocale } from 'next-intl/server'; import { Credentials, signIn } from '~/auth'; import { redirect } from '~/i18n/routing'; -export const login = async (_previousState: unknown, formData: FormData) => { +interface LoginResponse { + status: 'success' | 'error'; +} + +export const login = async (formData: FormData): Promise => { try { const locale = await getLocale(); @@ -23,6 +27,10 @@ export const login = async (_previousState: unknown, formData: FormData) => { }); redirect({ href: '/account/orders', locale }); + + return { + status: 'success', + }; } catch (error: unknown) { rethrow(error); diff --git a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx index c8375f129..0989fe941 100644 --- a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx +++ b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx @@ -1,8 +1,10 @@ 'use client'; +import { AlertCircle, Check } from 'lucide-react'; import { useTranslations } from 'next-intl'; -import { ChangeEvent, useActionState, useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import { useFormStatus } from 'react-dom'; +import { toast } from 'react-hot-toast'; import { Link } from '~/components/link'; import { Button } from '~/components/ui/button'; @@ -15,10 +17,7 @@ import { FormSubmit, Input, } from '~/components/ui/form'; -import { Message } from '~/components/ui/message'; -import { useAccountStatusContext } from '../../../account/_components/account-status-provider'; -import { SubmitMessagesList } from '../../../account/_components/submit-messages-list'; import { login } from '../_actions/login'; const SubmitButton = () => { @@ -42,10 +41,6 @@ export const LoginForm = () => { const [isEmailValid, setIsEmailValid] = useState(true); const [isPasswordValid, setIsPasswordValid] = useState(true); - const [state, formAction] = useActionState(login, { status: 'idle' }); - const { accountState } = useAccountStatusContext(); - - const isFormInvalid = state?.status === 'error'; const handleInputValidation = (e: ChangeEvent) => { const validationStatus = e.target.validity.valueMissing; @@ -63,71 +58,74 @@ export const LoginForm = () => { } }; + const handleLogin = async (formData: FormData) => { + const { status } = await login(formData); + + if (status === 'error') { + toast.error(t('error'), { + icon: , + }); + + return; + } + + toast.success(t('successful'), { + icon: , + }); + }; + return ( - <> - {accountState.status === 'success' && ( - - - - )} - - {isFormInvalid && ( - -

{t('Form.error')}

- - )} -
- - {t('Form.emailLabel')} - - - - - {t('Form.enterEmailMessage')} - - - - {t('Form.passwordLabel')} - - - - - {t('Form.enterPasswordMessage')} - - -
- - - - - {t('Form.forgotPassword')} - -
-
- +
+ + {t('Form.emailLabel')} + + + + + {t('Form.enterEmailMessage')} + + + + {t('Form.passwordLabel')} + + + + + {t('Form.enterPasswordMessage')} + + +
+ + + + + {t('Form.forgotPassword')} + +
+
); }; diff --git a/core/messages/en.json b/core/messages/en.json index 9038bbfe8..a8d81b103 100644 --- a/core/messages/en.json +++ b/core/messages/en.json @@ -26,6 +26,7 @@ "heading": "Log In", "Form": { "error": "Your email address or password is incorrect. Try signing in again or reset your password", + "successful": "You have successfully logged in.", "emailLabel": "Email", "enterEmailMessage": "Enter your email", "passwordLabel": "Password", From eb44202ec23cfcc5987ae9fe5db4293338c8c314 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 12 Dec 2024 14:55:36 -0500 Subject: [PATCH 4/6] feat(core): convert reset password over to taosts --- .changeset/late-boats-own.md | 5 ++ .../_actions/reset-password.ts | 51 +++++---------- .../_components/reset-password-form/index.tsx | 64 ++++++------------- 3 files changed, 42 insertions(+), 78 deletions(-) create mode 100644 .changeset/late-boats-own.md diff --git a/.changeset/late-boats-own.md b/.changeset/late-boats-own.md new file mode 100644 index 000000000..4a52c68a6 --- /dev/null +++ b/.changeset/late-boats-own.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +Converts the reset password messages over to using a toast. diff --git a/core/app/[locale]/(default)/(auth)/login/forgot-password/_actions/reset-password.ts b/core/app/[locale]/(default)/(auth)/login/forgot-password/_actions/reset-password.ts index 0eb100cbf..0eb123c56 100644 --- a/core/app/[locale]/(default)/(auth)/login/forgot-password/_actions/reset-password.ts +++ b/core/app/[locale]/(default)/(auth)/login/forgot-password/_actions/reset-password.ts @@ -10,20 +10,6 @@ const ResetPasswordSchema = z.object({ email: z.string().email(), }); -const processZodErrors = (err: z.ZodError) => { - const { fieldErrors, formErrors } = err.flatten((issue: z.ZodIssue) => ({ - message: issue.message, - })); - - if (formErrors.length > 0) { - return formErrors.map(({ message }) => message); - } - - return Object.entries(fieldErrors).flatMap(([, errorList]) => { - return errorList?.map(({ message }) => message) ?? ['']; - }); -}; - const ResetPasswordMutation = graphql(` mutation ResetPassword($input: RequestResetPasswordInput!, $reCaptcha: ReCaptchaV2Input) { customer { @@ -40,17 +26,16 @@ const ResetPasswordMutation = graphql(` } `); -interface SubmitResetPasswordForm { - formData: FormData; - path: string; - reCaptchaToken: string; +interface SubmitResetPasswordResponse { + status: 'success' | 'error'; + message: string; } -export const resetPassword = async ({ - formData, - path, - reCaptchaToken, -}: SubmitResetPasswordForm) => { +export const resetPassword = async ( + formData: FormData, + path: string, + reCaptchaToken?: string, +): Promise => { const t = await getTranslations('Login.ForgotPassword'); try { @@ -74,26 +59,24 @@ export const resetPassword = async ({ const result = response.data.customer.requestResetPassword; - if (result.errors.length === 0) { - return { status: 'success', data: parsedData }; + if (result.errors.length > 0) { + result.errors.forEach((error) => { + throw new Error(error.message); + }); } return { - status: 'error', - errors: result.errors.map((error) => error.message), + status: 'success', + message: t('Form.confirmResetPassword', { email: parsedData.email }), }; } catch (error: unknown) { - if (error instanceof z.ZodError) { + if (error instanceof Error || error instanceof z.ZodError) { return { status: 'error', - errors: processZodErrors(error), + message: error.message, }; } - if (error instanceof Error) { - return { status: 'error', errors: [error.message] }; - } - - return { status: 'error', errors: [t('Errors.error')] }; + return { status: 'error', message: t('Errors.error') }; } }; diff --git a/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx b/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx index 840a65adc..17be7c848 100644 --- a/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx +++ b/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx @@ -1,15 +1,12 @@ 'use client'; +import { AlertCircle, Check } from 'lucide-react'; import { useTranslations } from 'next-intl'; -import { ChangeEvent, useEffect, useRef, useState } from 'react'; +import { ChangeEvent, useRef, useState } from 'react'; import { useFormStatus } from 'react-dom'; import ReCaptcha from 'react-google-recaptcha'; +import { toast } from 'react-hot-toast'; -import { - AccountState as FormStatus, - useAccountStatusContext, -} from '~/app/[locale]/(default)/account/_components/account-status-provider'; -import { SubmitMessagesList } from '~/app/[locale]/(default)/account/_components/submit-messages-list'; import { type FragmentOf } from '~/client/graphql'; import { Button } from '~/components/ui/button'; import { @@ -21,7 +18,6 @@ import { FormSubmit, Input, } from '~/components/ui/form'; -import { Message } from '~/components/ui/message'; import { useRouter } from '~/i18n/routing'; import { resetPassword } from '../../_actions/reset-password'; @@ -54,28 +50,22 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => { const t = useTranslations('Login.ForgotPassword.Form'); const form = useRef(null); - const [formStatus, setFormStatus] = useState(null); const [isEmailValid, setIsEmailValid] = useState(true); const reCaptchaRef = useRef(null); - const [reCaptchaToken, setReCaptchaToken] = useState(''); - const [isReCaptchaValid, setReCaptchaValid] = useState(true); - const { setAccountState } = useAccountStatusContext(); + const [reCaptchaToken, setReCaptchaToken] = useState(); const router = useRouter(); - useEffect(() => { - setAccountState({ status: 'idle', messages: [''] }); - }, [setAccountState]); + const isReCaptchaValid = Boolean(reCaptchaToken); const onReCatpchaChange = (token: string | null) => { if (!token) { - setReCaptchaValid(false); + setReCaptchaToken(undefined); return; } setReCaptchaToken(token); - setReCaptchaValid(true); }; const handleEmailValidation = (e: ChangeEvent) => { @@ -85,47 +75,33 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => { }; const onSubmit = async (formData: FormData) => { - if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) { - setReCaptchaValid(false); - + if (!isReCaptchaValid) { return; } - setReCaptchaValid(true); - - const submit = await resetPassword({ - formData, - reCaptchaToken, - path: '/change-password', - }); - - if (submit.status === 'success') { - form.current?.reset(); + const { status, message } = await resetPassword(formData, '/change-password', reCaptchaToken); - const customerEmail = formData.get('email'); + if (status === 'error') { + reCaptchaRef.current?.reset(); - setAccountState({ - status: 'success', - messages: [t('confirmResetPassword', { email: customerEmail?.toString() })], + toast.error(message, { + icon: , }); - router.push('/login'); - } - if (submit.status === 'error') { - setFormStatus({ status: 'error', messages: submit.errors ?? [''] }); + return; } - reCaptchaRef.current?.reset(); + form.current?.reset(); + + toast.success(message, { + icon: , + }); + + router.push('/login'); }; return ( <> - {formStatus?.status === 'error' && ( - - - - )} -

{t('description')}

From 5557b73b798025be6ddc9298e025471699c015b8 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 12 Dec 2024 15:41:34 -0500 Subject: [PATCH 5/6] feat(core): convert the rest of the auth pages to toasts --- .changeset/chilled-rocks-sneeze.md | 5 + core/app/[locale]/(default)/(auth)/layout.tsx | 2 +- .../(auth)/login/_components/login-form.tsx | 4 +- .../_components/reset-password-form/index.tsx | 5 +- .../[locale]/(default)/(auth)/login/page.tsx | 7 - .../(default)/account/orders/page-data.ts | 3 +- .../settings/_actions/update-customer.ts | 43 +- .../_components/update-settings-form.tsx | 438 +++++++++--------- .../_components/change-password-form.tsx | 2 +- .../(default)/account/settings/page-data.tsx | 3 +- core/messages/en.json | 1 + core/tests/ui/e2e/change-password.spec.ts | 12 +- core/tests/ui/e2e/forgot-password.spec.ts | 8 +- core/tests/ui/e2e/login.spec.ts | 8 +- core/tests/ui/e2e/register.spec.ts | 2 +- 15 files changed, 269 insertions(+), 274 deletions(-) create mode 100644 .changeset/chilled-rocks-sneeze.md diff --git a/.changeset/chilled-rocks-sneeze.md b/.changeset/chilled-rocks-sneeze.md new file mode 100644 index 000000000..1319c8358 --- /dev/null +++ b/.changeset/chilled-rocks-sneeze.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +Change the rest of the auth pages to use toasts. diff --git a/core/app/[locale]/(default)/(auth)/layout.tsx b/core/app/[locale]/(default)/(auth)/layout.tsx index 5ba784a3a..7a1de0e3d 100644 --- a/core/app/[locale]/(default)/(auth)/layout.tsx +++ b/core/app/[locale]/(default)/(auth)/layout.tsx @@ -12,7 +12,7 @@ export default async function Layout({ children, params }: Props) { const { locale } = await params; if (session) { - redirect({ href: '/account', locale }); + redirect({ href: '/account/orders', locale }); } return children; diff --git a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx index 0989fe941..85df228be 100644 --- a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx +++ b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx @@ -62,14 +62,14 @@ export const LoginForm = () => { const { status } = await login(formData); if (status === 'error') { - toast.error(t('error'), { + toast.error(t('Form.error'), { icon: , }); return; } - toast.success(t('successful'), { + toast.success(t('Form.successful'), { icon: , }); }; diff --git a/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx b/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx index 17be7c848..c039c4a40 100644 --- a/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx +++ b/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx @@ -75,7 +75,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => { }; const onSubmit = async (formData: FormData) => { - if (!isReCaptchaValid) { + if (reCaptchaSettings?.isEnabledOnStorefront && !isReCaptchaValid) { return; } @@ -91,12 +91,11 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => { return; } - form.current?.reset(); - toast.success(message, { icon: , }); + form.current?.reset(); router.push('/login'); }; diff --git a/core/app/[locale]/(default)/(auth)/login/page.tsx b/core/app/[locale]/(default)/(auth)/login/page.tsx index cd428bf83..59d2078ed 100644 --- a/core/app/[locale]/(default)/(auth)/login/page.tsx +++ b/core/app/[locale]/(default)/(auth)/login/page.tsx @@ -2,7 +2,6 @@ import { getTranslations, setRequestLocale } from 'next-intl/server'; import { Link } from '~/components/link'; import { Button } from '~/components/ui/button'; -import { locales } from '~/i18n/routing'; import { LoginForm } from './_components/login-form'; @@ -52,9 +51,3 @@ export default async function Login({ params }: Props) {
); } - -export function generateStaticParams() { - return locales.map((locale) => ({ locale })); -} - -export const dynamic = 'force-static'; diff --git a/core/app/[locale]/(default)/account/orders/page-data.ts b/core/app/[locale]/(default)/account/orders/page-data.ts index 99a86dec0..ed411d4d2 100644 --- a/core/app/[locale]/(default)/account/orders/page-data.ts +++ b/core/app/[locale]/(default)/account/orders/page-data.ts @@ -5,6 +5,7 @@ import { getSessionCustomerAccessToken } from '~/auth'; import { client } from '~/client'; import { PaginationFragment } from '~/client/fragments/pagination'; import { graphql, VariablesOf } from '~/client/graphql'; +import { TAGS } from '~/client/tags'; import { OrderShipmentFragment } from '../order/[slug]/page-data'; @@ -101,7 +102,7 @@ export const getCustomerOrders = cache( document: CustomerAllOrders, variables: { ...paginationArgs, ...filtersArgs }, customerAccessToken, - fetchOptions: { cache: 'no-store' }, + fetchOptions: { cache: 'no-store', next: { tags: [TAGS.customer] } }, }); const orders = response.data.customer?.orders; diff --git a/core/app/[locale]/(default)/account/settings/_actions/update-customer.ts b/core/app/[locale]/(default)/account/settings/_actions/update-customer.ts index 1d5db9b97..78c358631 100644 --- a/core/app/[locale]/(default)/account/settings/_actions/update-customer.ts +++ b/core/app/[locale]/(default)/account/settings/_actions/update-customer.ts @@ -1,11 +1,12 @@ 'use server'; -import { revalidatePath } from 'next/cache'; +import { revalidateTag } from 'next/cache'; import { getTranslations } from 'next-intl/server'; import { getSessionCustomerAccessToken } from '~/auth'; import { client } from '~/client'; import { graphql, VariablesOf } from '~/client/graphql'; +import { TAGS } from '~/client/tags'; import { parseAccountFormData } from '~/components/form-fields/shared/parse-fields'; const UpdateCustomerMutation = graphql(` @@ -58,7 +59,12 @@ const isUpdateCustomerInput = (data: unknown): data is AddCustomerAddressInput = return false; }; -export const updateCustomer = async (formData: FormData) => { +interface UpdateCustomerResponse { + status: 'success' | 'error'; + message: string; +} + +export const updateCustomer = async (formData: FormData): Promise => { const t = await getTranslations('Account.Settings.UpdateCustomer'); const customerAccessToken = await getSessionCustomerAccessToken(); @@ -67,7 +73,7 @@ export const updateCustomer = async (formData: FormData) => { if (!isUpdateCustomerInput(parsed)) { return { status: 'error', - errors: [t('Errors.inputError')], + message: t('Errors.inputError'), }; } @@ -80,27 +86,22 @@ export const updateCustomer = async (formData: FormData) => { }, }); - revalidatePath('/account/settings', 'page'); - const result = response.data.customer.updateCustomer; - if (result.errors.length === 0) { - const { customer } = result; - - if (!customer) { - return { - status: 'error', - errors: [t('Errors.notFound')], - }; - } - - const { firstName, lastName } = customer; + if (result.errors.length > 0) { + result.errors.forEach((error) => { + throw new Error(error.message); + }); + } - return { status: 'success', data: { firstName, lastName } }; + if (!result.customer) { + return { + status: 'error', + message: t('Errors.notFound'), + }; } - return { - status: 'error', - errors: result.errors.map((error) => error.message), - }; + revalidateTag(TAGS.customer); + + return { status: 'success', message: t('successMessage') }; }; diff --git a/core/app/[locale]/(default)/account/settings/_components/update-settings-form.tsx b/core/app/[locale]/(default)/account/settings/_components/update-settings-form.tsx index a56af5bab..68b778a8c 100644 --- a/core/app/[locale]/(default)/account/settings/_components/update-settings-form.tsx +++ b/core/app/[locale]/(default)/account/settings/_components/update-settings-form.tsx @@ -1,8 +1,10 @@ 'use client'; +import { AlertCircle, Check } from 'lucide-react'; import { useTranslations } from 'next-intl'; import { ChangeEvent, MouseEvent, useRef, useState } from 'react'; import { useFormStatus } from 'react-dom'; +import { toast } from 'react-hot-toast'; import { ExistingResultType } from '~/client/util'; import { @@ -30,10 +32,7 @@ import { import { Link } from '~/components/link'; import { Button } from '~/components/ui/button'; import { Form, FormSubmit } from '~/components/ui/form'; -import { Message } from '~/components/ui/message'; -import { AccountState as FormStatus } from '../../_components/account-status-provider'; -import { SubmitMessagesList } from '../../_components/submit-messages-list'; import { updateCustomer } from '../_actions/update-customer'; import { getCustomerSettingsQuery } from '../page-data'; @@ -89,7 +88,6 @@ const SubmitButton = ({ messages }: SumbitMessages) => { export const UpdateSettingsForm = ({ addressFields, customerFields, customerInfo }: FormProps) => { const form = useRef(null); - const [formStatus, setFormStatus] = useState(null); const [textInputValid, setTextInputValid] = useState>({}); const [multiTextValid, setMultiTextValid] = useState>({}); @@ -149,19 +147,20 @@ export const UpdateSettingsForm = ({ addressFields, customerFields, customerInfo }; const onSubmit = async (formData: FormData) => { - const submit = await updateCustomer(formData); + const { status, message } = await updateCustomer(formData); - if (submit.status === 'success') { - setFormStatus({ - status: 'success', - messages: [t('successMessage')], + if (status === 'error') { + toast.error(message, { + icon: , }); - } - if (submit.status === 'error') { - setFormStatus({ status: 'error', messages: submit.errors ?? [''] }); + return; } + toast.success(message, { + icon: , + }); + window.scrollTo({ top: 0, behavior: 'smooth', @@ -169,223 +168,214 @@ export const UpdateSettingsForm = ({ addressFields, customerFields, customerInfo }; return ( - <> - {formStatus && formStatus.status !== 'idle' && ( - - - - )} - -
- {addressFields.map((field) => { - const fieldName = FieldNameToFieldId[field.entityId] ?? ''; - - if (!isExistedField(fieldName)) { - return null; - } + +
+ {addressFields.map((field) => { + const fieldName = FieldNameToFieldId[field.entityId] ?? ''; - return ( - - ); - })} -
+ if (!isExistedField(fieldName)) { + return null; + } + + return ( field.entityId === FieldNameToFieldId.email) - ?.label ?? '' - } - name="customer-email" + defaultValue={customerInfo[fieldName]} + entityId={field.entityId} + isRequired={field.isRequired} + isValid={textInputValid[field.entityId]} + key={field.entityId} + label={field.label} + name={createFieldName(field, 'address')} onChange={handleTextInputValidation} - type="email" /> -
- {customerFields - .filter(({ isBuiltIn }) => !isBuiltIn) - .map((field) => { - const fieldId = field.entityId; - const fieldName = createFieldName(field, 'customer'); - const previouslySubmittedField = customerInfo.formFields.find( - ({ entityId: id }) => id === fieldId, - ); - - switch (field.__typename) { - case 'NumberFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).NumberFormField; - - return ( - - - - ); - } - - case 'CheckboxesFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).CheckboxesFormField; - - return ( - - - - ); - } - - case 'MultilineTextFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).MultilineTextFormField; - - return ( - - - - ); - } - - case 'DateFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).DateFormField; - - return ( - - - - ); - } - - case 'RadioButtonsFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).MultipleChoiceFormField; - - return ( - - - - ); - } - - case 'PicklistFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).MultipleChoiceFormField; - - return ( - - - - ); - } - - case 'TextFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).TextFormField; - - return ( - - id === fieldId)?.label ?? '' - } - name={fieldName} - onChange={handleCustomTextValidation} - type="text" - /> - - ); - } - - case 'PasswordFormField': { - const submittedValue = - getPreviouslySubmittedValue(previouslySubmittedField).PasswordFormField; - - return ( - - - - ); - } - - default: - return null; + ); + })} +
+ field.entityId === FieldNameToFieldId.email)?.label ?? + '' + } + name="customer-email" + onChange={handleTextInputValidation} + type="email" + /> +
+ {customerFields + .filter(({ isBuiltIn }) => !isBuiltIn) + .map((field) => { + const fieldId = field.entityId; + const fieldName = createFieldName(field, 'customer'); + const previouslySubmittedField = customerInfo.formFields.find( + ({ entityId: id }) => id === fieldId, + ); + + switch (field.__typename) { + case 'NumberFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).NumberFormField; + + return ( + + + + ); } - })} -
- - - - - - {t('changePassword')} - -
+ + case 'CheckboxesFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).CheckboxesFormField; + + return ( + + + + ); + } + + case 'MultilineTextFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).MultilineTextFormField; + + return ( + + + + ); + } + + case 'DateFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).DateFormField; + + return ( + + + + ); + } + + case 'RadioButtonsFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).MultipleChoiceFormField; + + return ( + + + + ); + } + + case 'PicklistFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).MultipleChoiceFormField; + + return ( + + + + ); + } + + case 'TextFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).TextFormField; + + return ( + + id === fieldId)?.label ?? ''} + name={fieldName} + onChange={handleCustomTextValidation} + type="text" + /> + + ); + } + + case 'PasswordFormField': { + const submittedValue = + getPreviouslySubmittedValue(previouslySubmittedField).PasswordFormField; + + return ( + + + + ); + } + + default: + return null; + } + })} +
+ + + + + + {t('changePassword')} +
- - +
+ ); }; diff --git a/core/app/[locale]/(default)/account/settings/change-password/_components/change-password-form.tsx b/core/app/[locale]/(default)/account/settings/change-password/_components/change-password-form.tsx index 47a2215b3..78c563b7d 100644 --- a/core/app/[locale]/(default)/account/settings/change-password/_components/change-password-form.tsx +++ b/core/app/[locale]/(default)/account/settings/change-password/_components/change-password-form.tsx @@ -143,7 +143,7 @@ export const ChangePasswordForm = () => { icon: , }); - void logout(); + await logout(); }; return ( diff --git a/core/app/[locale]/(default)/account/settings/page-data.tsx b/core/app/[locale]/(default)/account/settings/page-data.tsx index c4de8f68d..bb5c76ffc 100644 --- a/core/app/[locale]/(default)/account/settings/page-data.tsx +++ b/core/app/[locale]/(default)/account/settings/page-data.tsx @@ -6,6 +6,7 @@ import { client } from '~/client'; import { FormFieldValuesFragment } from '~/client/fragments/form-fields-values'; import { PaginationFragment } from '~/client/fragments/pagination'; import { graphql, VariablesOf } from '~/client/graphql'; +import { TAGS } from '~/client/tags'; import { FormFieldsFragment } from '~/components/form-fields/fragment'; const CustomerSettingsQuery = graphql( @@ -167,7 +168,7 @@ export const getCustomerAddresses = cache( document: GetCustomerAddressesQuery, variables: { ...paginationArgs }, customerAccessToken, - fetchOptions: { cache: 'no-store' }, + fetchOptions: { cache: 'no-store', next: { tags: [TAGS.customer] } }, }); const addresses = response.data.customer?.addresses; diff --git a/core/messages/en.json b/core/messages/en.json index a8d81b103..70e48d19d 100644 --- a/core/messages/en.json +++ b/core/messages/en.json @@ -252,6 +252,7 @@ "submitText": "Change password" }, "UpdateCustomer": { + "successMessage": "Your account settings have been updated", "Errors": { "inputError": "Something went wrong with processing user input.", "notFound": "Customer does not exist" diff --git a/core/tests/ui/e2e/change-password.spec.ts b/core/tests/ui/e2e/change-password.spec.ts index dec883ff4..bc73cc315 100644 --- a/core/tests/ui/e2e/change-password.spec.ts +++ b/core/tests/ui/e2e/change-password.spec.ts @@ -15,9 +15,7 @@ test('Cannot change password with invalid reset token and customerId', async ({ await page.getByRole('button', { name: 'Change password' }).click(); - await expect(page.getByRole('region')).toHaveText( - 'Invalid password reset token or customerEntityId.', - ); + await expect(page.getByText('Invalid password reset token or customerEntityId.')).toBeVisible(); }); test('Change password from Account Settings and log in', async ({ page, account }) => { @@ -33,9 +31,11 @@ test('Change password from Account Settings and log in', async ({ page, account await page.getByRole('button', { name: 'Change password' }).click(); - await expect(page.getByRole('region')).toHaveText( - 'Your password has been successfully updated. Please log in using your new credentials.', - ); + await expect( + page.getByText( + 'Your password has been successfully updated. Please log in using your new credentials.', + ), + ).toBeVisible(); await page.goto('/account/orders/'); await page.getByRole('heading', { name: 'Log In' }).waitFor(); diff --git a/core/tests/ui/e2e/forgot-password.spec.ts b/core/tests/ui/e2e/forgot-password.spec.ts index 5022164c0..1e94ebe70 100644 --- a/core/tests/ui/e2e/forgot-password.spec.ts +++ b/core/tests/ui/e2e/forgot-password.spec.ts @@ -14,7 +14,9 @@ test('Forgot password', async ({ page }) => { await page.getByRole('button', { name: 'Reset password' }).click(); await expect(page).toHaveURL('/login/'); - await expect(page.getByRole('region')).toHaveText( - `If the email address ${email} is linked to an account in our store, we have sent you a password reset email. Please check your inbox and spam folder if you don't see it.`, - ); + await expect( + page.getByText( + `If the email address ${email} is linked to an account in our store, we have sent you a password reset email. Please check your inbox and spam folder if you don't see it.`, + ), + ).toBeVisible(); }); diff --git a/core/tests/ui/e2e/login.spec.ts b/core/tests/ui/e2e/login.spec.ts index 2d7db7482..a1018165b 100644 --- a/core/tests/ui/e2e/login.spec.ts +++ b/core/tests/ui/e2e/login.spec.ts @@ -43,9 +43,11 @@ test('If a customer is logged in, redirect to account pages', async ({ page, acc const customer = await account.create(); await customer.login(); - await page.waitForURL('/account/orders/'); + await expect(page).toHaveURL('/account/orders/'); + await expect(page.getByRole('heading', { name: 'Orders' })).toBeVisible(); + await page.goto('/login'); - await page.waitForURL('/account/orders/'); - await expect(page.getByRole('heading', { name: 'My Account' })).toBeVisible(); + await expect(page).toHaveURL('/account/orders/'); + await expect(page.getByRole('heading', { name: 'Orders' })).toBeVisible(); }); diff --git a/core/tests/ui/e2e/register.spec.ts b/core/tests/ui/e2e/register.spec.ts index a8fe319a0..726a0e985 100644 --- a/core/tests/ui/e2e/register.spec.ts +++ b/core/tests/ui/e2e/register.spec.ts @@ -35,5 +35,5 @@ test('Account is not created if email is already in use', async ({ page, account await page.getByRole('button', { name: 'Create account' }).click(); - await expect(page.getByText('The email address is already in use.')).toBeVisible(); + await expect(page.getByText('Something went wrong. Please try again later.')).toBeVisible(); }); From 005d7aae252c125b2328ef28270475043e20c4f6 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 12 Dec 2024 15:43:46 -0500 Subject: [PATCH 6/6] chore(core): remove the account status providers --- .changeset/old-bananas-destroy.md | 5 +++ .../_components/account-status-provider.tsx | 44 ------------------- .../_components/submit-errors-list.tsx | 7 --- .../_components/submit-messages-list.tsx | 7 --- core/app/providers.tsx | 6 +-- 5 files changed, 6 insertions(+), 63 deletions(-) create mode 100644 .changeset/old-bananas-destroy.md delete mode 100644 core/app/[locale]/(default)/account/_components/account-status-provider.tsx delete mode 100644 core/app/[locale]/(default)/account/_components/submit-errors-list.tsx delete mode 100644 core/app/[locale]/(default)/account/_components/submit-messages-list.tsx diff --git a/.changeset/old-bananas-destroy.md b/.changeset/old-bananas-destroy.md new file mode 100644 index 000000000..c5469d527 --- /dev/null +++ b/.changeset/old-bananas-destroy.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +Remove the account state provider components diff --git a/core/app/[locale]/(default)/account/_components/account-status-provider.tsx b/core/app/[locale]/(default)/account/_components/account-status-provider.tsx deleted file mode 100644 index ff8b848f8..000000000 --- a/core/app/[locale]/(default)/account/_components/account-status-provider.tsx +++ /dev/null @@ -1,44 +0,0 @@ -'use client'; - -import { createContext, ReactNode, useContext, useEffect, useState } from 'react'; - -import { usePathname } from '~/i18n/routing'; - -export interface AccountState { - status: 'idle' | 'error' | 'success'; - messages: string[]; -} - -const defaultState: AccountState = { status: 'idle', messages: [''] }; - -export const AccountStatusContext = createContext<{ - accountState: AccountState; - setAccountState: (state: AccountState | ((prevState: AccountState) => AccountState)) => void; -} | null>(null); - -export const AccountStatusProvider = ({ children }: { children: ReactNode }) => { - const [accountState, setAccountState] = useState(defaultState); - const pathname = usePathname(); - - useEffect(() => { - if (pathname !== '/account/' && pathname !== '/login/' && pathname !== '/account/addresses/') { - setAccountState(defaultState); - } - }, [pathname]); - - return ( - - {children} - - ); -}; - -export function useAccountStatusContext() { - const context = useContext(AccountStatusContext); - - if (!context) { - throw new Error('useAccountStatusContext must be used within a AccountStatusProvider'); - } - - return context; -} diff --git a/core/app/[locale]/(default)/account/_components/submit-errors-list.tsx b/core/app/[locale]/(default)/account/_components/submit-errors-list.tsx deleted file mode 100644 index 44feaf145..000000000 --- a/core/app/[locale]/(default)/account/_components/submit-errors-list.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const SubmitErrorsList = ({ errors }: { errors: string[] }) => ( -
    - {errors.map((error) => ( -
  • {error}
    • - ))} -
-); diff --git a/core/app/[locale]/(default)/account/_components/submit-messages-list.tsx b/core/app/[locale]/(default)/account/_components/submit-messages-list.tsx deleted file mode 100644 index d5496c56c..000000000 --- a/core/app/[locale]/(default)/account/_components/submit-messages-list.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const SubmitMessagesList = ({ messages }: { messages: string[] }) => ( -
    - {messages.map((message) => ( -
  • {message}
    • - ))} -
-); diff --git a/core/app/providers.tsx b/core/app/providers.tsx index 1f0512c62..7431c3077 100644 --- a/core/app/providers.tsx +++ b/core/app/providers.tsx @@ -5,14 +5,10 @@ import { PropsWithChildren } from 'react'; import { CartProvider } from '~/components/header/cart-provider'; import { CompareDrawerProvider } from '~/components/ui/compare-drawer'; -import { AccountStatusProvider } from './[locale]/(default)/account/_components/account-status-provider'; - export function Providers({ children }: PropsWithChildren) { return ( - - {children} - + {children} ); }