From 49b245617c67de73dd902cf1b25ca0e4fb19f532 Mon Sep 17 00:00:00 2001
From: Alexander Saiannyi <alexander.saiannyi@bigcommerce.com>
Date: Mon, 25 Mar 2024 15:12:57 +0100
Subject: [PATCH] feat(core): add account settings form placeholder with
 translations

---
 .changeset/happy-eggs-buy.md                  |   5 +
 .../_components/account-settings-form.tsx     | 103 ++++++++++++++++++
 .../[locale]/(default)/account/[tab]/page.tsx |  69 +-----------
 apps/core/messages/en.json                    |  13 +++
 4 files changed, 124 insertions(+), 66 deletions(-)
 create mode 100644 .changeset/happy-eggs-buy.md
 create mode 100644 apps/core/app/[locale]/(default)/account/[tab]/_components/account-settings-form.tsx

diff --git a/.changeset/happy-eggs-buy.md b/.changeset/happy-eggs-buy.md
new file mode 100644
index 000000000..c498c1553
--- /dev/null
+++ b/.changeset/happy-eggs-buy.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+add change password for logged-in customer
diff --git a/apps/core/app/[locale]/(default)/account/[tab]/_components/account-settings-form.tsx b/apps/core/app/[locale]/(default)/account/[tab]/_components/account-settings-form.tsx
new file mode 100644
index 000000000..e080e78df
--- /dev/null
+++ b/apps/core/app/[locale]/(default)/account/[tab]/_components/account-settings-form.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { Button } from '@bigcommerce/components/button';
+import { Field, FieldControl, FieldLabel, Form, FormSubmit } from '@bigcommerce/components/form';
+import { Input } from '@bigcommerce/components/input';
+import { Loader2 as Spinner } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useFormStatus } from 'react-dom';
+
+import { Link } from '~/components/link';
+
+const SubmitButton = () => {
+  const { pending } = useFormStatus();
+  const t = useTranslations('SubmitAccountSettings');
+
+  return (
+    <Button
+      className="relative w-full items-center px-8 py-2 md:w-fit"
+      data-button
+      disabled={pending}
+      variant="primary"
+    >
+      <>
+        {pending && (
+          <>
+            <span className="absolute z-10 flex h-full w-full items-center justify-center bg-gray-400">
+              <Spinner aria-hidden="true" className="animate-spin" />
+            </span>
+            <span className="sr-only">{t('spinnerText')}</span>
+          </>
+        )}
+        <span aria-hidden={pending}>{t('submitText')}</span>
+      </>
+    </Button>
+  );
+};
+
+export const AccountSettingsForm = () => {
+  const t = useTranslations('Account.AccountSettings');
+
+  return (
+    <Form className="mb-14 flex w-full flex-wrap gap-y-4 md:py-4 lg:p-0">
+      <Field className="relative w-full space-y-2 pb-7 lg:w-1/2 lg:pe-2" name="first-name">
+        <FieldLabel htmlFor="first-name" isRequired={true}>
+          {t('firstName')}
+        </FieldLabel>
+        <FieldControl asChild>
+          <Input autoComplete="none" id="first-name" required type="text" />
+        </FieldControl>
+      </Field>
+      <Field className="relative w-full space-y-2 pb-7 lg:w-1/2 lg:ps-2" name="last-name">
+        <FieldLabel htmlFor="last-name" isRequired={true}>
+          {t('lastName')}
+        </FieldLabel>
+        <FieldControl asChild>
+          <Input autoComplete="none" id="last-name" required type="text" />
+        </FieldControl>
+      </Field>
+      <Field className="relative w-full space-y-2 pb-7 lg:w-1/2 lg:pe-2" name="company">
+        <FieldLabel htmlFor="company">{t('companyName')}</FieldLabel>
+        <FieldControl asChild>
+          <Input autoComplete="none" id="company" type="text" />
+        </FieldControl>
+      </Field>
+      <Field className="relative w-full space-y-2 pb-7 lg:w-1/2 lg:ps-2" name="phone">
+        <FieldLabel htmlFor="phone">{t('phone')}</FieldLabel>
+        <FieldControl asChild>
+          <Input autoComplete="none" id="phone" type="tel" />
+        </FieldControl>
+      </Field>
+      <Field className="relative w-full space-y-2 pb-7 lg:flex-grow" name="email">
+        <FieldLabel htmlFor="email" isRequired={true}>
+          {t('email')}
+        </FieldLabel>
+        <FieldControl asChild>
+          <Input autoComplete="none" id="email" required type="email" />
+        </FieldControl>
+      </Field>
+      <div className="flex w-full flex-col items-start gap-2 md:flex-row md:items-center md:justify-start md:gap-10">
+        <FormSubmit asChild>
+          <SubmitButton />
+        </FormSubmit>
+        <Button
+          className="relative w-full items-center px-8 py-2 md:w-fit"
+          data-button
+          type="reset"
+          variant="secondary"
+        >
+          {t('cancel')}
+        </Button>
+        <Link
+          className="my-5 inline-flex w-full items-center justify-center text-primary hover:text-secondary md:my-0 md:ms-auto md:w-fit md:justify-start"
+          href={{
+            pathname: '/account',
+            query: { action: 'reset_password' },
+          }}
+        >
+          {t('resetPassword')}
+        </Link>
+      </div>
+    </Form>
+  );
+};
diff --git a/apps/core/app/[locale]/(default)/account/[tab]/page.tsx b/apps/core/app/[locale]/(default)/account/[tab]/page.tsx
index 42224cbe0..47b1121e3 100644
--- a/apps/core/app/[locale]/(default)/account/[tab]/page.tsx
+++ b/apps/core/app/[locale]/(default)/account/[tab]/page.tsx
@@ -3,9 +3,10 @@ import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, getTranslations } from 'next-intl/server';
 
-import { Link } from '~/components/link';
 import { LocaleType } from '~/i18n';
 
+import { AccountSettingsForm as FormPlaceholder } from './_components/account-settings-form';
+
 interface Props {
   params: {
     tab: 'orders' | 'messages' | 'addresses' | 'wishlists' | 'recently-viewed' | 'settings';
@@ -19,59 +20,6 @@ export function generateMetadata({ params: { tab } }: Props): Metadata {
   };
 }
 
-const FormPlaceholder = () => (
-  <div className="mb-14 flex flex-col gap-3 md:p-8 lg:p-0">
-    <div className="relative space-y-2 pb-7">
-      <label htmlFor="first-name">First Name</label>
-      <input
-        autoComplete="on"
-        className="w-full border-2 border-gray-200 px-4 py-2.5 text-base"
-        id="first-name"
-        required
-        type="text"
-      />
-    </div>
-    <div className="relative space-y-2 pb-7">
-      <label htmlFor="last-name">Last Name</label>
-      <input
-        autoComplete="on"
-        className="w-full border-2 border-gray-200 px-4 py-2.5 text-base"
-        id="last-name"
-        required
-        type="text"
-      />
-    </div>
-    <div className="relative space-y-2 pb-7">
-      <label htmlFor="company-name">Company Name</label>
-      <input
-        autoComplete="on"
-        className="w-full border-2 border-gray-200 px-4 py-2.5 text-base"
-        id="company-name"
-        type="text"
-      />
-    </div>
-    <div className="relative space-y-2 pb-7">
-      <label htmlFor="phone">Phone</label>
-      <input
-        autoComplete="on"
-        className="w-full border-2 border-gray-200 px-4 py-2.5 text-base"
-        id="phone"
-        type="tel"
-      />
-    </div>
-    <div className="relative space-y-2 pb-7">
-      <label htmlFor="email">Email</label>
-      <input
-        autoComplete="on"
-        className="w-full border-2 border-gray-200 px-4 py-2.5 text-base"
-        id="email"
-        required
-        type="email"
-      />
-    </div>
-  </div>
-);
-
 export default async function AccountTabPage({ params: { tab, locale } }: Props) {
   const messages = await getMessages({ locale });
   const Account = messages.Account ?? {};
@@ -82,18 +30,7 @@ export default async function AccountTabPage({ params: { tab, locale } }: Props)
       <div className="mx-auto my-6 max-w-4xl">
         <h2 className="mb-8 text-4xl font-black lg:text-5xl">{t('accountSettings')}</h2>
         <NextIntlClientProvider locale={locale} messages={{ Account }}>
-          <>
-            <FormPlaceholder />
-            <Link
-              className="my-5 inline-flex items-center justify-start text-primary hover:text-secondary md:my-0"
-              href={{
-                pathname: '/account',
-                query: { action: 'reset_password' },
-              }}
-            >
-              {t('resetPasswordHeading')}
-            </Link>
-          </>
+          <FormPlaceholder />
         </NextIntlClientProvider>
       </div>
     );
diff --git a/apps/core/messages/en.json b/apps/core/messages/en.json
index 875168851..679c40beb 100644
--- a/apps/core/messages/en.json
+++ b/apps/core/messages/en.json
@@ -184,6 +184,19 @@
         "createLink": "Create Account "
       }
     },
+    "AccountSettings": {
+      "firstName": "First Name",
+      "lastName": "Last Name",
+      "companyName": "Company Name",
+      "phone": "Phone",
+      "email": "Email",
+      "cancel": "Cancel",
+      "resetPassword": "Reset Password"
+    },
+    "SubmitAccountSettings": {
+      "spinnerText": "Submitting...",
+      "submitText": "Update settings"
+    },
     "ChangePassword": {
       "currentPasswordLabel": "Current password",
       "newPasswordLabel": "New password",