@akinon/projectzero 2.0.0-beta.12 → 2.0.0-beta.13

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/not-found.tsx

@@ -4,14 +4,14 @@ import React from 'react';
 import { Button, Link } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 
-const NotFound = () => {
+export default function NotFound() {
   const { t } = useLocalization();
 
   return (
-    <div className="py-10 lg:py-8 flex flex-col items-center justify-center px-4 lg:px-0">
-      <div className="text-8xl font-bold">404</div>
+    <div className="py-10 flex flex-col items-center justify-center">
+      <div className="text-8xl font-bold text-gray-400">404</div>
       <h1 className="text-4xl font-bold mb-4">{t('not_found.title')}</h1>
-      <p className="text-lg mb-6 text-center">{t('not_found.sub_title')}</p>
+      <p className="text-lg mb-6 text-gray-600">{t('not_found.sub_title')}</p>
       <Link href={'/'}>
         <Button className="h-auto mt-4 text-base py-3 px-6">
           {t('not_found.button')}
@@ -19,6 +19,4 @@ const NotFound = () => {
       </Link>
     </div>
   );
-};
-
-export default NotFound;
+}

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/orders/completed/[token]/page.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { useEffect, useRef, use } from 'react';
+import { useEffect, useRef } from 'react';
+import { useParams } from 'next/navigation';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { ROUTES } from '@theme/routes';
 import { useFetchCheckoutResultQuery } from '@akinon/next/data/client/checkout';
-import { CheckoutStep, PageProps } from '@akinon/next/types';
+import { CheckoutStep } from '@akinon/next/types';
 import { CarouselCore } from '@theme/components/carousel-core';
 import { Price, Button, Icon, LoaderSpinner, Link } from '@theme/components';
 import { CheckoutStepList } from '@theme/views/checkout';
@@ -14,10 +15,11 @@ import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
 import { pushPurchaseEvent } from '@theme/utils/gtm';
 
-const CheckoutCompleted = (props) => {
+const CheckoutCompleted = () => {
+  const params = useParams<{ token: string }>();
   const { t } = useLocalization();
   const dispatch = useAppDispatch();
-  const params = use(props.params) as { token: string };
+
   const { data, isLoading } = useFetchCheckoutResultQuery(String(params.token));
 
   const carouselRef = useRef(null);

package/app-template/src/app/[pz]/product/[pk]/page.tsx

@@ -0,0 +1,102 @@
+import { getProductData, getWidgetData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { PageProps, ResolvedPageProps, Metadata } from '@akinon/next/types';
+import { generateJsonLd } from '@theme/utils/generate-jsonld';
+import { AccordionWrapper, ProductInfo } from '@theme/views/product';
+import ProductLayout from '@theme/views/product/layout';
+import { notFound } from 'next/navigation';
+
+export async function generateMetadata(
+  props: PageProps<{ pk: number }>
+) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+  let result: Metadata = {};
+
+  try {
+    const { data } = await getProductData({
+      pk: params.pk,
+      searchParams
+    });
+
+    const product = data?.product;
+
+    if (!product) {
+      return {};
+    }
+
+    result = {
+      title: product.name,
+      description: String(product.attributes?.description),
+      twitter: {
+        title: product.name,
+        description: String(product.attributes?.description)
+      },
+      openGraph: {
+        title: product.name,
+        description: String(product.attributes?.description),
+        images: product.productimage_set?.map((item) => ({
+          url: item.image
+        }))
+      }
+    };
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+
+  return result;
+}
+
+async function Page({ params, searchParams }: ResolvedPageProps<{ pk: number }>) {
+  if (params.pk === undefined || isNaN(Number(params.pk))) {
+    notFound();
+  }
+
+  try {
+    const [{ data, breadcrumbData }, deliveryReturn] = await Promise.all([
+      getProductData({
+        pk: params.pk,
+        searchParams
+      }),
+      getWidgetData({ slug: 'product-delivery-returns' })
+    ]);
+
+    const jsonLd = generateJsonLd(data.product);
+
+    return (
+      <>
+        <ProductLayout data={data} breadcrumbData={breadcrumbData}>
+          <div className="flex flex-col items-center">
+            <h1
+              className="mt-4 text-2xl text-center md:mt-0"
+              data-testid="product-name"
+            >
+              {data.product.name}
+            </h1>
+
+            <ProductInfo data={data} />
+
+            <AccordionWrapper
+              data={data}
+              deliveryReturn={deliveryReturn?.attributes}
+            />
+          </div>
+        </ProductLayout>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </>
+    );
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[pz]/special-page/[pk]/page.tsx

@@ -0,0 +1,35 @@
+import { getSpecialPageData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { ResolvedPageProps } 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';
+import { notFound } from 'next/navigation';
+
+async function Page({ params, searchParams }: ResolvedPageProps<{ pk: number }>) {
+  try {
+    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>
+      </>
+    );
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

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

@@ -2,11 +2,10 @@
 import { Icon, Link, LoaderSpinner } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useChangeEmailVerificationQuery } from '@akinon/next/data/client/user';
-import { use } from 'react';
-
-export default function Page(props) {
-  const { id } = use(props.params) as { id: string[] };
+import { useParams } from 'next/navigation';
 
+export default function Page() {
+  const { id } = useParams<{ id: string[] }>();
   const { t } = useLocalization();
   const { isSuccess, isLoading } = useChangeEmailVerificationQuery(
     id.join('/')

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

@@ -2,10 +2,10 @@
 import { Icon, Link, LoaderSpinner } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useConfirmEmailVerificationQuery } from '@akinon/next/data/client/user';
-import { use } from 'react';
+import { useParams } from 'next/navigation';
 
-export default function Page(props) {
-  const { id } = use(props.params) as { id: string[] };
+export default function Page() {
+  const { id } = useParams<{ id: string[] }>();
   const { t } = useLocalization();
   const { isSuccess, isLoading } = useConfirmEmailVerificationQuery(
     id.join('/')

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

@@ -9,11 +9,11 @@ import {
   PasswordResetType
 } from '@akinon/next/data/client/account';
 import { useLocalization } from '@akinon/next/hooks';
+import { useParams } from 'next/navigation';
 import PasswordRulesFeedback from '@theme/components/password-rules-feedback';
-import { use } from 'react';
 
-export default function NewPassword(props) {
-  const { id } = use(props.params) as { id: string };
+export default function NewPassword() {
+  const { id } = useParams<{ id: string[] }>();
   const { t } = useLocalization();
   const [newPassword, { isSuccess: formSuccess }] = usePasswordResetMutation();
 
@@ -26,10 +26,7 @@ export default function NewPassword(props) {
           /^(?=.*[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')
-        ),
+        .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'))
@@ -46,7 +43,7 @@ export default function NewPassword(props) {
   const passwordValue = watch('password', '');
 
   const onSubmit: SubmitHandler<PasswordResetType> = (data) => {
-    data.slug = id;
+    data.slug = id?.join('/') ?? '';
     newPassword(data);
   };
 
@@ -84,10 +81,7 @@ export default function NewPassword(props) {
                   required
                 />
 
-                <PasswordRulesFeedback
-                  password={passwordValue}
-                  isVisible={errors?.password ? true : false}
-                />
+                <PasswordRulesFeedback password={passwordValue} isVisible={errors?.password ? true : false}/>
               </div>
 
               <div className="mb-2 text-left">

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

@@ -15,8 +15,8 @@ import { urlLocaleMatcherRegex } from '@akinon/next/utils';
 
 export const dynamic = 'force-dynamic';
 
-export async function GET(request: Request, context: { params }) {
-  const node = (await context.params).node;
+export async function GET(request: Request, context: { params: Promise<{ node: string }> }) {
+  const { node } = await context.params;
   const url = new URL(request.url);
   const matchedLocale = url.pathname.match(urlLocaleMatcherRegex);
 

package/app-template/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from 'auth';
+
+export const { GET, POST } = handlers;

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

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

package/app-template/src/app/api/image-proxy/route.ts

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

package/app-template/src/app/api/product-categories/route.ts

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

package/app-template/src/app/api/similar-product-list/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/similar-product-list';

package/app-template/src/app/api/similar-products/route.ts

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

package/app-template/src/app/api/virtual-try-on/limited-categories/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/virtual-try-on';

package/app-template/src/app/api/virtual-try-on/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/virtual-try-on';

package/app-template/src/assets/globals.scss

@@ -2,128 +2,8 @@
 @use './fonts/index.scss' as fonts;
 @use './fonts/pz-icon.css' as icons;
 
-@import 'tailwindcss';
-
-@plugin '@tailwindcss/typography';
-
-@config '../../tailwind.config.js';
-
-@source '../app/**/*.{js,ts,jsx,tsx}';
-@source '../pages/**/*.{js,ts,jsx,tsx}';
-@source '../components/**/*.{js,ts,jsx,tsx}';
-@source '../views/**/*.{js,ts,jsx,tsx}';
-@source '../widgets/**/*.{js,ts,jsx,tsx}';
-@source '../hooks/**/*.{js,ts,jsx,tsx}';
-@source '../utils/**/*.{js,ts,jsx,tsx}';
-
-@theme {
-  --font-sans: 'Jost', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-size-2xs: 0.5rem;
-  --outline-off: none;
-
-  --width-1-10: 10%;
-  --width-2-10: 20%;
-  --width-3-10: 30%;
-  --width-4-10: 40%;
-  --width-5-10: 50%;
-  --width-6-10: 60%;
-  --width-7-10: 70%;
-  --width-8-10: 80%;
-  --width-9-10: 90%;
-
-  --transition-property-max-width: max-width;
-
-  --background-image-skeleton-shimmer: linear-gradient(
-    90deg,
-    #d7d7d7 0%,
-    #ebebeb 40%,
-    #eeeeee 60%,
-    #d7d7d7
-  );
-
-  --animate-skeleton-shimmer: skeleton-shimmer 2s linear infinite;
-
-  @keyframes skeleton-shimmer {
-    to {
-      transform: translateX(100%);
-    }
-  }
-
-  --color-transparent: transparent;
-  --color-white: #ffffff;
-  --color-primary: #000000;
-  --color-primary-hover: #181818;
-  --color-primary-foreground: #ffffff;
-  --color-primary-100: #525252;
-  --color-primary-200: #404040;
-  --color-primary-300: #3d3d3d;
-  --color-primary-400: #333333;
-  --color-primary-500: #2d2d2d;
-  --color-primary-600: #292929;
-  --color-primary-700: #2b2b2b;
-  --color-primary-800: #181818;
-  --color-primary-900: #000000;
-
-  --color-secondary: #e95151;
-  --color-secondary-hover: #d03838;
-  --color-secondary-foreground: #ffffff;
-  --color-secondary-100: #ffb7b7;
-  --color-secondary-200: #ff9e9e;
-  --color-secondary-300: #ff8484;
-  --color-secondary-400: #ff6b6b;
-  --color-secondary-500: #e95151;
-  --color-secondary-600: #d72b01;
-  --color-secondary-700: #b61e1e;
-  --color-secondary-800: #9d0505;
-  --color-secondary-900: #830000;
-
-  --color-black: #000000;
-  --color-black-100: #525252;
-  --color-black-200: #404040;
-  --color-black-300: #3d3d3d;
-  --color-black-400: #333333;
-  --color-black-500: #2d2d2d;
-  --color-black-600: #292929;
-  --color-black-700: #2b2b2b;
-  --color-black-800: #181818;
-  --color-black-900: #000000;
-
-  --color-gray: #ebebeb;
-  --color-gray-25: #fdfdfd;
-  --color-gray-50: #f7f7f7;
-  --color-gray-100: #f5f5f5;
-  --color-gray-150: #f4f4f4;
-  --color-gray-200: #eeeeee;
-  --color-gray-300: #ebebeb;
-  --color-gray-400: #d7d7d7;
-  --color-gray-450: #d4d4d4;
-  --color-gray-500: #c9c9c9;
-  --color-gray-600: #9d9d9d;
-  --color-gray-700: #686868;
-  --color-gray-800: #615f62;
-  --color-gray-850: #58585a;
-  --color-gray-900: #4a4f54;
-  --color-gray-950: #424242;
-
-  --color-error: #d72b01;
-  --color-error-100: #e20008;
-
-  --color-success: #7b9d76;
-  --color-success-100: #7b9d76;
-
-  --container-center: true;
-  --container-padding: 0rem;
-  --container-padding-sm: 2rem;
-  --container-padding-2xl: 0rem;
-
-  --breakpoint-xs: 575px;
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1170px;
-  --breakpoint-2xl: 1370px;
-}
+@import "tailwindcss";
+@config "../../tailwind.config.js";
 
 @utility header-grid-template-areas {
   grid-template-areas:
@@ -164,22 +44,13 @@
   grid-template-columns: auto 1fr 1fr;
 }
 
-@utility container {
-  margin-inline: auto;
-}
-
-@layer base {
-  input::placeholder,
-  textarea::placeholder {
-    color: theme(--color-gray-400);
-  }
-
+@layer utilities {
   input {
     &:focus,
     &:not(:placeholder-shown),
     &:autofill {
       & + label {
-        top: calc(1 / 3 * 100%);
+        @apply top-1/3;
       }
     }
   }

package/app-template/src/auth.ts

@@ -0,0 +1,3 @@
+import { createAuth } from '@akinon/next/api/auth';
+
+export const { handlers, auth, signIn, signOut } = createAuth();

package/app-template/src/components/__tests__/badge.test.tsx

@@ -5,7 +5,7 @@ describe('Badge Component', () => {
   let badge;
 
   beforeEach(() => {
-    render(<Badge className="text-md rounded-xs">%90 off</Badge>);
+    render(<Badge className="text-md rounded-sm">%90 off</Badge>);
 
     badge = screen.getByText('%90 off');
   });
@@ -15,6 +15,6 @@ describe('Badge Component', () => {
   });
 
   it('should be classname checked', () => {
-    expect(badge).toHaveClass('text-md rounded-xs');
+    expect(badge).toHaveClass('text-md rounded-sm');
   });
 });

package/app-template/src/components/__tests__/link.test.tsx

@@ -30,6 +30,8 @@ describe('Link Component', () => {
     wrapper = container;
   });
 
+  wrapper;
+
   it('should render without error', () => {
     const link = screen.getByRole('link');
 

package/app-template/src/components/accordion.tsx

@@ -1,53 +1,52 @@
 'use client';
 
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
-
-type AccordionProps = {
-  isCollapse?: boolean;
-  title?: string;
-  subTitle?: string;
-  icons?: string[];
-  iconSize?: number;
-  iconColor?: string;
-  children?: ReactNode;
-  className?: string;
-  titleClassName?: string;
-  dataTestId?: string;
-};
+import { AccordionProps } from './types';
 
 export const Accordion = ({
   isCollapse = false,
+  collapseClassName,
   title,
   subTitle,
   icons = ['chevron-up', 'chevron-down'],
   iconSize = 16,
   iconColor = 'fill-[#000000]',
   children,
+  headerClassName,
   className,
   titleClassName,
-  dataTestId
+  subTitleClassName,
+  dataTestId,
+  contentClassName
 }: AccordionProps) => {
   const [collapse, setCollapse] = useState(isCollapse);
 
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
         className
       )}
     >
       <div
-        className="flex items-center justify-between cursor-pointer"
+        className={twMerge(
+          'flex items-center justify-between cursor-pointer',
+          headerClassName
+        )}
         onClick={() => setCollapse(!collapse)}
         data-testid={dataTestId}
       >
-        <div className="flex flex-col">
+        <div className={twMerge('flex flex-col', contentClassName)}>
           {title && (
             <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
           )}
-          {subTitle && <h4 className="text-xs text-gray-700">{subTitle}</h4>}
+          {subTitle && (
+            <h4 className={twMerge('text-xs text-gray-700', subTitleClassName)}>
+              {subTitle}
+            </h4>
+          )}
         </div>
 
         {icons && (
@@ -58,7 +57,11 @@ export const Accordion = ({
           />
         )}
       </div>
-      {collapse && <div className="mt-3 text-sm">{children}</div>}
+      {collapse && (
+        <div className={twMerge('mt-3 text-sm', collapseClassName)}>
+          {children}
+        </div>
+      )}
     </div>
   );
 };

package/app-template/src/components/button.tsx

@@ -35,7 +35,7 @@ export const Button = (props: ButtonProps) => {
 
   const buttonClasses = twMerge(
     clsx(
-      'px-4 text-xs transition-all duration-200 cursor-pointer',
+      'px-4 text-xs transition-all duration-200',
       'inline-flex gap-2 justify-center items-center',
       variants[appearance],
       sizes[size],

package/app-template/src/components/carousel-core.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { forwardRef } from 'react';
 import 'react-multi-carousel/lib/styles.css';
 import Carousel, {
   CarouselProps as BaseCarouselProps
 } from 'react-multi-carousel';
-import { forwardRef } from 'react';
 import { useMediaQuery } from '@akinon/next/hooks';
 
 type ContainerAspectRatioType = {
@@ -20,15 +19,9 @@ interface CarouselProps extends BaseCarouselProps {
 const CarouselCore = forwardRef<Carousel, CarouselProps>((props, ref) => {
   const { containerAspectRatio } = props;
   const matches = useMediaQuery('(min-width: 768px)');
-  const [aspectRatio, setAspectRatio] = useState(containerAspectRatio.mobile);
-
-  useEffect(() => {
-    if (matches) {
-      setAspectRatio(containerAspectRatio.desktop);
-    } else {
-      setAspectRatio(containerAspectRatio.mobile);
-    }
-  }, [matches, containerAspectRatio]);
+  const aspectRatio = matches
+    ? containerAspectRatio.desktop
+    : containerAspectRatio.mobile;
 
   return (
     <div className="w-full" style={{ aspectRatio }}>

package/app-template/src/components/checkbox.tsx

@@ -19,7 +19,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         {children && <span className="ml-2">{children}</span>}
       </div>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </label>
   );

package/app-template/src/components/currency-select.tsx

@@ -70,6 +70,7 @@ export const CurrencySelect = (props: CurrencySelectProps) => {
               onClick={confirmModalHandleClick}
               appearance="filled"
               className="font-medium px-10 py-4 h-12"
+              data-testid="currency-modal-confirm"
             >
               {t('common.currency_modal.continue')}
             </Button>