@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/app/[commerce]/[locale]/[currency]/special-page/[pk]/page.tsx

@@ -0,0 +1,25 @@
+import { getSpecialPageData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { PageProps } from '@akinon/next/types';
+import CategoryLayout from '@theme/views/category/layout';
+import SpecialPageBanner from '@theme/widgets/special-page-banner';
+import SpecialPageCarousel from '@theme/widgets/special-page-carousel';
+
+async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
+  const data = await getSpecialPageData({ pk: params.pk, searchParams });
+
+  return (
+    <>
+      <CategoryLayout data={data}>
+        {data.special_page && (
+          <>
+            <SpecialPageBanner data={data.special_page} />
+            <SpecialPageCarousel slug={data.special_page.video_embedded_code} />
+          </>
+        )}
+      </CategoryLayout>
+    </>
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

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

@@ -0,0 +1,75 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { resetHeaderState } from '@akinon/next/redux/reducers/header';
+import { closeMiniBasket } from '@akinon/next/redux/reducers/root';
+import { ROUTES } from '@theme/routes';
+import { GoogleTagManager } from '@next/third-parties/google';
+import { pushPageView } from '@theme/utils/gtm';
+
+export default function RootTemplate({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const dispatch = useAppDispatch();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const URL = process.env.NEXT_PUBLIC_URL;
+  const currentUrl = URL + pathname + searchParams;
+
+  useEffect(() => {
+    dispatch(closeMiniBasket());
+    dispatch(resetHeaderState());
+  }, [dispatch, pathname, searchParams]);
+
+  useEffect(() => {
+    if (pathname === ROUTES.HOME) {
+      window.scrollTo(0, 0);
+    }
+    pushPageView(pathname);
+  }, [pathname]);
+
+  const jsonLdWebSite = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    url: currentUrl,
+    name: 'Project Zero',
+    potentialAction: [
+      {
+        '@type': 'SearchAction',
+        target: `${URL}/list/?search_text={search_term_string}`,
+        'query-input': 'required name=search_term_string'
+      }
+    ]
+  };
+
+  const jsonLdOrganization = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    url: currentUrl,
+    name: 'Project Zero',
+    logo: `${URL}/logo.svg`
+  };
+
+  return (
+    <>
+      {/* Google Tag Manager */}
+      <GoogleTagManager
+        gtmId={process.env.NEXT_PUBLIC_GTM_KEY || 'GTM-W8JJWXD'}
+      />
+      {/* End Google Tag Manager */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdWebSite) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdOrganization) }}
+      />
+      {children}
+    </>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/users/email-set-primary/[[...id]]/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { Icon, Link, LoaderSpinner } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { useChangeEmailVerificationQuery } from '@akinon/next/data/client/user';
+
+export default function Page({ params: { id } }) {
+  const { t } = useLocalization();
+  const { isSuccess, isLoading } = useChangeEmailVerificationQuery(
+    id.join('/')
+  );
+
+  return (
+    <div className="flex flex-col items-center text-center max-w-lg py-8 lg:py-16 mx-auto">
+      {isLoading ? (
+        <LoaderSpinner />
+      ) : (
+        <>
+          {isSuccess ? (
+            <>
+              <Icon className="text-7xl text-success block mb-6" name="check" />
+
+              <p className="text-xl mb-6 lg:text-3xl">
+                {t('account.change_email.email_set_primary.success')}
+              </p>
+            </>
+          ) : (
+            <>
+              <Icon className="text-7xl text-error block mb-6" name="close" />
+
+              <p className="text-xl mb-6 lg:text-3xl">
+                {t('account.change_email.email_set_primary.error')}
+              </p>
+            </>
+          )}
+
+          <Link href={'/'} className="underline">
+            {t('account.change_email.email_set_primary.button')}
+          </Link>
+        </>
+      )}
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/users/password/reset/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { Button, Input, Link } from '@theme/components';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { ForgotPasswordFormType } from '@akinon/next/types';
+import { useForgotPasswordMutation } from '@akinon/next/data/client/user';
+import { useLocalization } from '@akinon/next/hooks';
+
+const forgotPasswordFormSchema = (t) =>
+  yup.object().shape({
+    email: yup
+      .string()
+      .email(t('forgot_password.form.error.email_valid'))
+      .required(t('forgot_password.form.error.required'))
+  });
+
+export default function ForgotPassword() {
+  const { t } = useLocalization();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<ForgotPasswordFormType>({
+    resolver: yupResolver(forgotPasswordFormSchema(t))
+  });
+
+  const [forgotPassword, { isSuccess: formSuccess }] =
+    useForgotPasswordMutation();
+
+  const onSubmit: SubmitHandler<ForgotPasswordFormType> = (data) => {
+    forgotPassword(data);
+  };
+
+  return (
+    <div className="container my-12 flex flex-col items-center px-4">
+      <div className="w-full xl:w-5/12 text-center">
+        {formSuccess ? (
+          <div>
+            <h3 className="text-3xl mb-5">
+              {t('forgot_password.form.success.title')}
+            </h3>
+            <p className="text-sm mb-4">
+              {t('forgot_password.form.success.subtitle')}
+            </p>
+            <Link href={'/'} className="underline">
+              {t('forgot_password.form.success.button')}
+            </Link>
+          </div>
+        ) : (
+          <div>
+            <div className="text-2xl mb-4">{t('forgot_password.title')}</div>
+            <div>{t('forgot_password.description_first')}</div>
+            <div>{t('forgot_password.description_second')}</div>
+            <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+              <div className="mt-8 mb-2 text-left">
+                <Input
+                  label={t('forgot_password.form.email.placeholder')}
+                  className="mb-1 h-12"
+                  {...register('email')}
+                  error={errors.email}
+                  required
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full h-12 font-medium uppercase"
+              >
+                {t('forgot_password.form.button')}
+              </Button>
+            </form>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/users/registration/account-confirm-email/[[...id]]/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { Icon, Link, LoaderSpinner } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { useConfirmEmailVerificationQuery } from '@akinon/next/data/client/user';
+
+export default function Page({ params: { id } }) {
+  const { t } = useLocalization();
+  const { isSuccess, isLoading } = useConfirmEmailVerificationQuery(
+    id.join('/')
+  );
+
+  return (
+    <div className="flex flex-col items-center text-center max-w-lg py-8 lg:py-16 mx-auto">
+      {isLoading ? (
+        <LoaderSpinner />
+      ) : (
+        <>
+          {isSuccess ? (
+            <>
+              <Icon className="text-7xl text-success block mb-6" name="check" />
+
+              <p className="text-xl mb-6 lg:text-3xl">
+                {t('account.change_email.confirm_email.success')}
+              </p>
+            </>
+          ) : (
+            <>
+              <Icon className="text-7xl text-error block mb-6" name="close" />
+
+              <p className="text-xl mb-6 lg:text-3xl">
+                {t('account.change_email.confirm_email.error')}
+              </p>
+            </>
+          )}
+
+          <Link href={'/'} className="underline">
+            {t('account.change_email.confirm_email.button')}
+          </Link>
+        </>
+      )}
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/users/reset/[[...id]]/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { Button, Input, Link } from '@theme/components';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import {
+  usePasswordResetMutation,
+  PasswordResetType
+} from '@akinon/next/data/client/account';
+import { useLocalization } from '@akinon/next/hooks';
+import PasswordRulesFeedback from '@theme/components/password-rules-feedback';
+
+export default function NewPassword({ params: { id } }) {
+  const { t } = useLocalization();
+  const [newPassword, { isSuccess: formSuccess }] = usePasswordResetMutation();
+
+  const newPasswordFormSchema = (t) =>
+    yup.object().shape({
+      password: yup
+        .string()
+        .required(t('forgot_password.create_new_password.form.error.required'))
+        .matches(
+          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{6,}$/,
+          t('forgot_password.create_new_password.form.error.password_rule')
+        )
+        .max(50, t('forgot_password.create_new_password.form.error.password_max')),
+      repeatPassword: yup
+        .string()
+        .required(t('forgot_password.create_new_password.form.error.required'))
+    });
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors }
+  } = useForm<PasswordResetType>({
+    resolver: yupResolver(newPasswordFormSchema(t))
+  });
+  const passwordValue = watch('password', '');
+
+  const onSubmit: SubmitHandler<PasswordResetType> = (data) => {
+    data.slug = id;
+    newPassword(data);
+  };
+
+  return (
+    <div className="container my-12 flex flex-col items-center px-4">
+      <div className="w-full xl:w-5/12 text-center">
+        {formSuccess ? (
+          <div>
+            <h3 className="text-3xl mb-5">
+              {t('forgot_password.create_new_password.form.success.title')}
+            </h3>
+
+            <Link href={'/'} className="underline">
+              {t('forgot_password.create_new_password.form.success.button')}
+            </Link>
+          </div>
+        ) : (
+          <div>
+            <div className="text-2xl mb-4">
+              {t('forgot_password.create_new_password.title')}
+            </div>
+
+            <div>{t('forgot_password.create_new_password.description')}</div>
+
+            <form className="w-full" onSubmit={handleSubmit(onSubmit)}>
+              <div className="relative mt-8 mb-2 text-left">
+                <Input
+                  label={t(
+                    'forgot_password.create_new_password.form.password.placeholder_first'
+                  )}
+                  {...register('password')}
+                  type="password"
+                  className="mb-1 h-12"
+                  error={errors.password}
+                  required
+                />
+
+                <PasswordRulesFeedback password={passwordValue} isVisible={errors?.password ? true : false}/>
+              </div>
+
+              <div className="mb-2 text-left">
+                <Input
+                  label={t(
+                    'forgot_password.create_new_password.form.password.placeholder_second'
+                  )}
+                  {...register('repeatPassword')}
+                  type="password"
+                  className="mb-1 h-12"
+                  error={errors.password}
+                  required
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full h-12 font-medium uppercase"
+              >
+                {t('forgot_password.create_new_password.form.button')}
+              </Button>
+            </form>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/xml-sitemap/[node]/route.ts

@@ -0,0 +1,25 @@
+import { urlLocaleMatcherRegex } from '@akinon/next/utils';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: Request, context: { params }) {
+  const node = context.params.node;
+  const url = new URL(request.url);
+  const matchedLocale = url.pathname.match(urlLocaleMatcherRegex);
+
+  const sitemap = await fetch(
+    `https://s3.eu-central-1.amazonaws.com/0fb534/sitemaps/sitemaps/sitemap-${node}.xml.gz`
+  );
+  let sitemapContent = await sitemap.text();
+
+  sitemapContent = sitemapContent.replace(
+    /\.com/g,
+    `.com${matchedLocale?.[0] ?? ''}`
+  );
+
+  return new Response(sitemapContent, {
+    headers: {
+      'Content-Type': 'application/xml'
+    }
+  });
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/xml-sitemap/route.ts

@@ -0,0 +1,37 @@
+import { urlLocaleMatcherRegex } from '@akinon/next/utils';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const matchedLocale = url.pathname.match(urlLocaleMatcherRegex);
+
+  const sitemap = await fetch(`${process.env.SERVICE_BACKEND_URL}/sitemap.xml`);
+  const sitemapNodes = [
+    'specialpages',
+    'products',
+    'categories',
+    'flatpages',
+    'landingpages'
+  ];
+
+  let sitemapContent = await sitemap.text();
+
+  sitemapNodes.forEach((sitemapNode) => {
+    sitemapContent = sitemapContent.replace(
+      new RegExp(
+        `<loc>[\\.\\w:\\/-]+(${sitemapNode}-\\d+)[\\.\\w\\/-]+</loc>`,
+        'g'
+      ),
+      `<loc>${process.env.NEXT_PUBLIC_URL}${
+        matchedLocale?.[0] ?? ''
+      }/sitemap/$1</loc>`
+    );
+  });
+
+  return new Response(sitemapContent, {
+    headers: {
+      'Content-Type': 'application/xml'
+    }
+  });
+}

package/app-template/src/app/api/cache/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/cache';

package/app-template/src/app/api/client/[...slug]/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/client';

package/app-template/src/app/api/form/[...id]/route.ts

@@ -0,0 +1,7 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  // TODO: Handle Form Data
+
+  return NextResponse.json({message: 'ok'});
+}

package/app-template/src/app/api/logout/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/logout';

package/app-template/src/app/api/sentry/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server';
+
+export const revalidate = 0;
+
+export async function GET() {
+  return NextResponse.json({
+    dsn: process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+  });
+}

package/app-template/src/app/api/web-vitals/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/web-vitals';