@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,174 +0,0 @@
-'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

@@ -1,206 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-'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

@@ -1,210 +0,0 @@
-'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

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

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

@@ -1,23 +0,0 @@
-'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

@@ -1,32 +0,0 @@
-'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

@@ -1,28 +0,0 @@
-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>
-  );
-}