@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/app/[commerce]/[locale]/[currency]/account/change-email/page.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import clsx from 'clsx';
+import { AccountChangeEmailFormType } from '@akinon/next/types';
+
+import { Button, Input, Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import { useUpdateEmailMutation } from '@akinon/next/data/client/account';
+import { useMemo, useState } from 'react';
+import { useSearchParams, usePathname } from 'next/navigation';
+import { useRouter, useLocalization } from '@akinon/next/hooks';
+import { useGetProfileInfoQuery } from '@akinon/next/data/client/account';
+import { Trans } from '@akinon/next/components/trans';
+
+const accountChangeEmailSchema = (t) =>
+  yup.object().shape({
+    email: yup
+      .string()
+      .email(t('account.change_email.form.email.error'))
+      .required(t('account.change_email.form.required')),
+    emailConfirm: yup
+      .string()
+      .email(t('account.change_email.form.email.error'))
+      .oneOf(
+        [yup.ref('email')],
+        t('account.change_email.form.email_confirm.error.not_same')
+      )
+      .required(t('account.change_email.form.required')),
+    password: yup.string().required(t('account.change_email.form.required'))
+  });
+
+export default function Page() {
+  const { data } = useSession();
+  const { data: profileInfo } = useGetProfileInfoQuery();
+
+  const { t } = useLocalization();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<AccountChangeEmailFormType>({
+    resolver: yupResolver(accountChangeEmailSchema(t))
+  });
+
+  const [formError, setFormError] = useState(null);
+  const [updateEmail] = useUpdateEmailMutation();
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const onSubmit: SubmitHandler<AccountChangeEmailFormType> = async (data) => {
+    updateEmail(data)
+      .unwrap()
+      .then(() => {
+        router.push(pathname + '?formSuccess=true');
+      })
+      .catch((error) => setFormError(error.data));
+  };
+
+  const LinkText = (props) => {
+    return (
+      <Link {...props} href={props.href || '#'} className="underline">
+        {props.title}
+      </Link>
+    );
+  };
+
+  const successParam = searchParams.get('formSuccess');
+
+  const isSuccess = useMemo(() => successParam === 'true', [successParam]);
+
+  return (
+    <div>
+      <div className="p-6 bg-gray-150">
+        <h3 className="text-3xl text-center mb-5">
+          {t('account.change_email.header.title')}
+        </h3>
+        <p className="text-center">
+          {' '}
+          {t('account.change_email.header.subtitle')}
+        </p>
+      </div>
+      <div className="flex flex-col lg:flex-row">
+        {isSuccess ? (
+          <div className="border border-gray-500 mt-5 p-6 lg:px-24 lg:py-10 lg:w-[670px]">
+            <h3 className="text-3xl mb-5">
+              {t('account.change_email.form.success.title')}
+            </h3>
+            <p className="text-sm mb-4">
+              {t('account.change_email.form.success.description')}
+            </p>
+            <Link href={'/'} className="underline">
+              {t('account.change_email.form.success.button')}
+            </Link>
+          </div>
+        ) : (
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="border border-gray-500 mt-5 p-6 lg:px-24 lg:py-10 lg:w-[670px]"
+          >
+            <div className="text-sm mb-10">
+              <p>{t('account.change_email.form.current_email')}</p>
+              <p>{profileInfo?.email}</p>
+              {formError && (
+                <div className="text-sm text-error">
+                  {formError.non_field_errors}
+                </div>
+              )}
+            </div>
+            <div className={clsx(errors.email ? 'mb-8' : 'mb-5')}>
+              <Input
+                label={t('account.change_email.form.email.placeholder')}
+                {...register('email')}
+                error={errors.email}
+                required
+              />
+            </div>
+            <div className={clsx(errors.emailConfirm ? 'mb-8' : 'mb-5')}>
+              <Input
+                label={t('account.change_email.form.email_confirm.placeholder')}
+                {...register('emailConfirm')}
+                error={errors.emailConfirm}
+                required
+              />
+            </div>
+            <div className={clsx(errors.password ? 'mb-8' : 'mb-5')}>
+              <Input
+                label={t('account.change_email.form.password.placeholder')}
+                type="password"
+                {...register('password')}
+                error={errors.password}
+                required
+              />
+            </div>
+
+            <Button type="submit" className="w-full font-medium">
+              {t('account.change_email.form.submit_button')}
+            </Button>
+          </form>
+        )}
+        <div className="my-6 lg:ml-8">
+          <h2 className="text-3xl mb-4">
+            {t('account.change_email.info.title')}
+          </h2>
+          <p className="text-sm font-medium">
+            <Trans
+              i18nKey="account.change_email.info.content"
+              components={{
+                ContactLink: (
+                  <LinkText
+                    href={ROUTES.ACCOUNT_CONTACT}
+                    title={t('account.change_email.info.contact')}
+                  />
+                ),
+                Faq: (
+                  <LinkText
+                    href={ROUTES.ACCOUNT_FAQ}
+                    title={t('account.change_email.info.faq')}
+                  />
+                )
+              }}
+            />
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/change-password/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import clsx from 'clsx';
+import { AccountChangePasswordFormType } from '@akinon/next/types';
+
+import { Button, Input, Link } from '@theme/components';
+import { ROUTES } from 'routes';
+import { useUpdatePasswordMutation } from '@akinon/next/data/client/account';
+import { useMemo, useState } from 'react';
+import { useSearchParams, usePathname } from 'next/navigation';
+import { useRouter } from '@akinon/next/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import PasswordRulesFeedback from '@theme/components/password-rules-feedback';
+import { Trans } from '@akinon/next/components/trans';
+
+const accountChangePasswordSchema = (t) =>
+  yup.object().shape({
+    old_password: yup
+      .string()
+      .required(t('account.change_password.form.required')),
+    new_password1: yup
+      .string()
+      .required(t('account.change_password.form.required'))
+      .matches(
+        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{6,}$/,
+        t('account.change_password.form.error.password_rule')
+      )
+      .max(50, t('account.change_password.form.error.password_max')),
+    new_password2: yup
+      .string()
+      .oneOf(
+        [yup.ref('new_password1')],
+        t('account.change_password.form.new_password_repeat.error.not_same')
+      )
+      .required(t('account.change_password.form.required'))
+  });
+export default function Page() {
+  const { t } = useLocalization();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors }
+  } = useForm<AccountChangePasswordFormType>({
+    resolver: yupResolver(accountChangePasswordSchema(t))
+  });
+
+  const [formError, setFormError] = useState(null);
+  const [updatePassword] = useUpdatePasswordMutation();
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const passwordValue = watch('new_password1', '');
+
+  const onSubmit: SubmitHandler<AccountChangePasswordFormType> = (data) => {
+    updatePassword(data)
+      .unwrap()
+      .then(() => {
+        router.push(pathname + '?formSuccess=true');
+      })
+      .catch((error) => setFormError(error.data));
+  };
+
+  const LinkText = (props) => {
+    return (
+      <Link {...props} href={props.href || '#'} className="underline">
+        {props.title}
+      </Link>
+    );
+  };
+
+  const successParam = searchParams.get('formSuccess');
+
+  const isSuccess = useMemo(() => successParam === 'true', [successParam]);
+
+  return (
+    <div>
+      <div className="p-6 bg-gray-150">
+        <h3 className="text-3xl text-center mb-5">
+          {t('account.change_password.header.title')}
+        </h3>
+      </div>
+      <div className="flex flex-col lg:flex-row">
+        {isSuccess ? (
+          <div className="border border-gray-500 mt-5 p-6 lg:px-24 lg:py-10 lg:w-[670px]">
+            <h3
+              className="text-3xl mb-5"
+              data-testid="account-change-password-response"
+            >
+              {t('account.change_password.form.success.title')}
+            </h3>
+
+            <p className="text-sm mb-4">
+              {t('account.change_password.form.success.description')}
+            </p>
+
+            <Link
+              href={'/'}
+              className="underline"
+              data-testid="account-change-password-response-button"
+            >
+              {t('account.change_password.form.success.button')}
+            </Link>
+          </div>
+        ) : (
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="border border-gray-500 mt-5 p-6 lg:px-24 lg:py-10 lg:w-[670px]"
+          >
+            <div className={clsx(errors.old_password ? 'mb-8' : 'mb-5')}>
+              <Input
+                label={t(
+                  'account.change_password.form.current_password.placeholder'
+                )}
+                data-testid="account-current-password"
+                type="password"
+                {...register('old_password')}
+                error={errors.old_password}
+                required
+              />
+
+              {formError && (
+                <div className="text-sm text-error mb-2">
+                  {formError.old_password}
+                </div>
+              )}
+            </div>
+
+            <div
+              className={clsx(
+                'relative',
+                errors.new_password1 ? 'mb-8' : 'mb-5'
+              )}
+            >
+              <Input
+                label={t(
+                  'account.change_password.form.new_password.placeholder'
+                )}
+                type="password"
+                data-testid="account-new-password"
+                {...register('new_password1')}
+                error={errors.new_password1}
+                required
+              />
+
+              <PasswordRulesFeedback
+                password={passwordValue}
+                isVisible={errors?.new_password1 ? true : false}
+              />
+            </div>
+
+            <div className={clsx(errors.new_password2 ? 'mb-8' : 'mb-5')}>
+              <Input
+                label={t(
+                  'account.change_password.form.new_password_repeat.placeholder'
+                )}
+                type="password"
+                data-testid="account-repeat-password"
+                {...register('new_password2')}
+                error={errors.new_password2}
+                required
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full font-medium"
+              data-testid="account-password-change"
+            >
+              {t('account.change_password.form.submit_button')}
+            </Button>
+          </form>
+        )}
+
+        <div className="my-6 lg:ml-8">
+          <h2 className="text-3xl mb-4">
+            {t('account.change_password.info.title')}
+          </h2>
+          <p className="text-sm font-medium">
+            <Trans
+              i18nKey="account.change_password.info.content"
+              components={{
+                ContactLink: (
+                  <LinkText
+                    href={ROUTES.ACCOUNT_CONTACT}
+                    title={t('account.change_password.info.contact')}
+                  />
+                ),
+                Faq: (
+                  <LinkText
+                    href={ROUTES.ACCOUNT_FAQ}
+                    title={t('account.change_password.info.faq')}
+                  />
+                )
+              }}
+            />
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/contact/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import ContactForm from '@theme/views/account/contact-form';
+
+export default function ContactPage() {
+  return <ContactForm />;
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/coupons/page.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { CouponItem } from '@theme/views/coupon-item';
+import { LoaderSpinner } from '@theme/components';
+import {
+  useGetBasketOffersQuery,
+  useGetFutureBasketOffersQuery,
+  useGetExpiredBasketOffersQuery,
+  useGetDiscountItemsQuery
+} from '@akinon/next/data/client/account';
+import { useLocalization } from '@akinon/next/hooks';
+
+export default function Page() {
+  const { t } = useLocalization();
+  const {
+    data: basketOffers,
+    isLoading: basketOffersLoading,
+    isSuccess: basketOffersSuccess
+  } = useGetBasketOffersQuery();
+
+  const {
+    data: futureBasketOffers,
+    isLoading: futureBasketOffersLoading,
+    isSuccess: futureBasketOffersSuccess
+  } = useGetFutureBasketOffersQuery();
+
+  const {
+    data: expiredBasketOffers,
+    isLoading: expiredBasketOffersLoading,
+    isSuccess: expiredBasketOffersSuccess
+  } = useGetExpiredBasketOffersQuery();
+
+  const {
+    data: discountItems,
+    isLoading: discountItemsLoading,
+    isSuccess: discountItemsSuccess
+  } = useGetDiscountItemsQuery();
+
+  return (
+    <div>
+      <div className="bg-gray-150 p-4 lg:p-8">
+        <h2 className="text-3xl text-center">
+          {t('account.my_vouchers.header.title')}
+        </h2>
+        <p className="text-center mt-5">
+          {t('account.my_vouchers.header.subtitle')}
+        </p>
+      </div>
+      <div className="flex flex-col lg:flex-row">
+        <div className="border border-gray-500 mt-5 p-6 w-full lg:px-24 lg:py-10 relative h-full">
+          {basketOffersLoading && <LoaderSpinner className="mb-8" />}
+          {basketOffersSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.campaings.active')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={basketOffers.discounts}
+              offerType="coupon"
+              values={['label', 'start_datetime', 'end_datetime', 'amount']}
+              emptyText={t('account.my_vouchers.card.empty_campaign')}
+            />
+          )}
+
+          {futureBasketOffersLoading && <LoaderSpinner className="mb-8" />}
+          {futureBasketOffersSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.campaings.to_be_active')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={futureBasketOffers.results}
+              offerType="coupon"
+              values={['label', 'start_datetime', 'end_datetime', 'amount']}
+              emptyText={t('account.my_vouchers.card.empty_campaign')}
+            />
+          )}
+
+          {expiredBasketOffersLoading && <LoaderSpinner className="mb-8" />}
+          {expiredBasketOffersSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.campaings.expired')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={expiredBasketOffers.results}
+              offerType="coupon"
+              values={['label', 'start_datetime', 'end_datetime', 'amount']}
+              emptyText={t('account.my_vouchers.card.empty_campaign')}
+            />
+          )}
+
+          {discountItemsLoading && <LoaderSpinner className="mb-8" />}
+          {discountItemsSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.campaings.used')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={discountItems.discounts}
+              offerType="coupon"
+              values={['label', 'created_date', 'order_number', 'amount']}
+              emptyText={t('account.my_vouchers.card.empty_campaign')}
+            />
+          )}
+
+          {basketOffersLoading && <LoaderSpinner className="mb-8" />}
+          {basketOffersSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.coupons.active')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={basketOffers.discounts}
+              offerType="coupon_code"
+              values={[
+                'voucher_code',
+                'start_datetime',
+                'end_datetime',
+                'amount'
+              ]}
+              emptyText={t('account.my_vouchers.card.empty_coupon')}
+            />
+          )}
+
+          {futureBasketOffersLoading && <LoaderSpinner className="mb-8" />}
+          {futureBasketOffersSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.coupons.to_be_active')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={futureBasketOffers.discounts}
+              offerType="coupon_code"
+              values={[
+                'voucher_code',
+                'start_datetime',
+                'end_datetime',
+                'amount'
+              ]}
+              emptyText={t('account.my_vouchers.card.empty_coupon')}
+            />
+          )}
+
+          {expiredBasketOffersLoading && <LoaderSpinner className="mb-8" />}
+          {expiredBasketOffersSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.coupons.expired')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={expiredBasketOffers.results}
+              offerType="coupon_code"
+              values={[
+                'voucher_code',
+                'start_datetime',
+                'end_datetime',
+                'amount'
+              ]}
+              emptyText={t('account.my_vouchers.card.empty_coupon')}
+            />
+          )}
+
+          {discountItemsLoading && <LoaderSpinner className="mb-8" />}
+          {discountItemsSuccess && (
+            <CouponItem
+              mainTitle={t('account.my_vouchers.title.coupons.used')}
+              subTitles={[
+                t('account.my_vouchers.card.campaign_name'),
+                t('account.my_vouchers.card.starting_date'),
+                t('account.my_vouchers.card.expiration_date'),
+                t('account.my_vouchers.card.amount')
+              ]}
+              data={discountItems.discounts}
+              offerType="coupon_code"
+              values={[
+                'voucher_code',
+                'created_date',
+                'order_number',
+                'amount'
+              ]}
+              emptyText={t('account.my_vouchers.card.empty_coupon')}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/email-verification/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+export default function Page() {
+  return <div>Email Verification Page</div>;
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/faq/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import React, { useState } from 'react';
+import { FaqFooter, FaqSearch, FaqTabs } from '@theme/views/account/faq';
+
+export default function AccountFaqPage() {
+  const [searchKey, setSearchKey] = useState('');
+
+  const handleChange = (e) => {
+    const { value } = e.target;
+    setSearchKey(value);
+  };
+
+  return (
+    <div className="flex-1">
+      <FaqSearch handleChange={handleChange} searchKey={searchKey} />
+
+      <FaqTabs searchKey={searchKey} />
+
+      <FaqFooter />
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/favourite-products/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { useGetFavoritesQuery } from '@akinon/next/data/client/wishlist';
+import { useSearchParams } from 'next/navigation';
+import FavoriteProductsList from '@theme/views/account/favourite-products/favourite-products-list';
+
+const AccountWishlist = () => {
+  const { t } = useLocalization();
+  const searchParams = useSearchParams();
+  const { data: favorites } = useGetFavoritesQuery({
+    page: Number(searchParams.get('page')),
+    limit: Number(searchParams.get('limit'))
+  });
+
+  return (
+    <div className="flex-1">
+      <div className="bg-gray-150 p-4 lg:p-8">
+        <h2 className="text-3xl text-center mb-5">
+          {t('account.my_wishlist.header.title')}
+        </h2>
+        <p className="text-center">
+          <span>{t('account.my_wishlist.header.subtitle')}</span> (
+          <span data-testid="favorites-count">{favorites?.count || 0}</span>)
+        </p>
+      </div>
+      <FavoriteProductsList />
+    </div>
+  );
+};
+
+export default AccountWishlist;

package/app-template/src/app/[commerce]/[locale]/[currency]/account/layout.tsx

@@ -0,0 +1,28 @@
+import AccountBackButton from '@theme/views/account/back-button';
+import AccountMenu from '@theme/views/account/account-menu';
+import { getServerSession } from 'next-auth/next';
+import { ROUTES } from 'routes';
+import { redirect } from '@akinon/next/utils/redirect';
+
+export default async function AccountLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await getServerSession();
+
+  if (!session?.user) {
+    return redirect(ROUTES.AUTH);
+  }
+
+  return (
+    <div className="container flex py-10 px-4 xl:px-0">
+      <AccountMenu />
+      <div className="w-full flex-1">
+        <AccountBackButton />
+
+        {children}
+      </div>
+    </div>
+  );
+}