@akinon/projectzero 1.77.0 → 1.78.0-rc.1

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.77.0",
+  "version": "1.78.0-rc.1",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,25 +22,25 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.77.0",
-    "@akinon/pz-akifast": "1.77.0",
-    "@akinon/pz-b2b": "1.77.0",
-    "@akinon/pz-basket-gift-pack": "1.77.0",
-    "@akinon/pz-bkm": "1.77.0",
-    "@akinon/pz-checkout-gift-pack": "1.77.0",
-    "@akinon/pz-click-collect": "1.77.0",
-    "@akinon/pz-credit-payment": "1.77.0",
-    "@akinon/pz-gpay": "1.77.0",
-    "@akinon/pz-masterpass": "1.77.0",
-    "@akinon/pz-one-click-checkout": "1.77.0",
-    "@akinon/pz-otp": "1.77.0",
-    "@akinon/pz-pay-on-delivery": "1.77.0",
-    "@akinon/pz-saved-card": "1.77.0",
-    "@akinon/pz-tabby-extension": "1.77.0",
+    "@akinon/next": "1.78.0-rc.1",
+    "@akinon/pz-akifast": "1.78.0-rc.1",
+    "@akinon/pz-b2b": "1.78.0-rc.1",
+    "@akinon/pz-basket-gift-pack": "1.78.0-rc.1",
+    "@akinon/pz-bkm": "1.78.0-rc.1",
+    "@akinon/pz-checkout-gift-pack": "1.78.0-rc.1",
+    "@akinon/pz-click-collect": "1.78.0-rc.1",
+    "@akinon/pz-credit-payment": "1.78.0-rc.1",
+    "@akinon/pz-gpay": "1.78.0-rc.1",
+    "@akinon/pz-masterpass": "1.78.0-rc.1",
+    "@akinon/pz-one-click-checkout": "1.78.0-rc.1",
+    "@akinon/pz-otp": "1.78.0-rc.1",
+    "@akinon/pz-pay-on-delivery": "1.78.0-rc.1",
+    "@akinon/pz-saved-card": "1.78.0-rc.1",
+    "@akinon/pz-tabby-extension": "1.78.0-rc.1",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
-    "@sentry/nextjs": "7.116.0",
+    "@sentry/nextjs": "8.35.0",
     "dayjs": "1.11.5",
     "lossless-json": "2.0.5",
     "next": "14.2.5",
@@ -61,7 +61,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.77.0",
+    "@akinon/eslint-plugin-projectzero": "1.78.0-rc.1",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/public/locales/en/common.json

@@ -61,5 +61,9 @@
     "description": "The products in your cart will be deleted because the exchange rate has changed.",
     "close": "Close",
     "continue": "Continue"
+  },
+  "file_input": {
+    "select_file": "Select File",
+    "no_file": "No file selected"
   }
 }

package/app-template/public/locales/tr/common.json

@@ -61,5 +61,9 @@
     "description": "Döviz kuru değiştiği için sepetinizdeki ürünler silinecektir.",
     "close": "Kapat",
     "continue": "Devam Et"
+  },
+  "file_input": {
+    "select_file": "Dosya Seç",
+    "no_file": "Dosya seçilmedi"
   }
 }

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/cancellation/page.tsx

@@ -8,14 +8,15 @@ import {
   useGetOrderQuery,
   useGetCancellationReasonsQuery
 } from '@akinon/next/data/client/account';
-import { AccountOrderCancellation } from '@akinon/next/types';
+import type { AccountOrderCancellation } from '@akinon/next/types';
 import {
   Button,
   Checkbox,
   Select,
   Modal,
   LoaderSpinner,
-  Link
+  Link,
+  FileInput
 } from '@theme/components';
 import { useState } from 'react';
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
@@ -39,6 +40,7 @@ const AccountOrderCancellation = ({ params }) => {
   } = useForm<AccountOrderCancellation>({
     resolver: yupResolver(accountOrderCancellationSchema)
   });
+
   const { data: cancellationReasons, isSuccess: cancellationReasonsSuccess } =
     useGetCancellationReasonsQuery();
 
@@ -56,6 +58,9 @@ const AccountOrderCancellation = ({ params }) => {
   const watchAllFields = watch();
   const cancelItemsLength = watchAllFields?.cancel_order_items?.length;
   const [cancelOrder] = useCancelOrderMutation();
+  const [files, setFiles] = useState<
+    { itemId: string; image: string; description: string }[]
+  >([]);
 
   const modalHandleClick = () => {
     setIsModalOpen(false);
@@ -112,8 +117,68 @@ const AccountOrderCancellation = ({ params }) => {
     ]);
   };
 
+  const handleFileChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+    itemId: string,
+    description: string
+  ) => {
+    const selectedFiles = Array.from(e.target.files || []);
+
+    const base64Files = await Promise.all(
+      selectedFiles.map((file) => {
+        return new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+      })
+    );
+
+    const validFiles = base64Files.filter((file) =>
+      /^data:image\/(jpeg|png|jpg);base64,.+/.test(file)
+    );
+
+    const formattedFiles = validFiles.map((file) => ({
+      itemId,
+      image: file,
+      description
+    }));
+
+    setFiles((prevFiles) => [
+      ...prevFiles.filter((f) => f.itemId !== itemId),
+      ...formattedFiles
+    ]);
+  };
+
+  const fileInputCondition = (item, description: string) => {
+    if (item.is_refundable && !item.active_cancellation_request) {
+      return (
+        <FileInput
+          name="files"
+          title="files"
+          multiple
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            handleFileChange(e, item.id, description)
+          }
+        />
+      );
+    }
+  };
+
   const onSubmit: SubmitHandler<AccountOrderCancellation> = (orderItems) => {
-    cancelOrder({ id: order.number, ...orderItems })
+    const mergedData = {
+      ...orderItems,
+      cancel_order_items: orderItems.cancel_order_items.map((orderItem) => ({
+        ...orderItem,
+        ...(files.length > 0 && {
+          cancellation_request_image_set: files.filter(
+            (file) => file.itemId === orderItem.order_item
+          )
+        })
+      }))
+    };
+    cancelOrder({ id: order.number, ...mergedData })
       .unwrap()
       .then(() => {
         setResponseMessage({
@@ -122,10 +187,33 @@ const AccountOrderCancellation = ({ params }) => {
         });
         setIsModalOpen(true);
       })
-      .catch(() => {
+      .catch((err) => {
+        console.error('Err', err);
+
+        const errorMessages = new Set();
+
+        if (err?.data?.cancel_order_items) {
+          err.data.cancel_order_items.forEach((item) => {
+            if (item.cancellation_request_image_set) {
+              item.cancellation_request_image_set.forEach((error) => {
+                if (typeof error === 'string') {
+                  errorMessages.add(error);
+                } else if (typeof error === 'object' && error?.image) {
+                  error.image.forEach((msg) => errorMessages.add(msg));
+                }
+              });
+            }
+          });
+        }
+
+        const errorContent =
+          errorMessages.size > 0
+            ? Array.from(errorMessages).join('\n')
+            : t('account.my_orders.return.error.description').toString();
+
         setResponseMessage({
           title: t('account.my_orders.return.error.title').toString(),
-          content: t('account.my_orders.return.error.description').toString()
+          content: errorContent
         });
         setIsModalOpen(true);
       });
@@ -180,6 +268,7 @@ const AccountOrderCancellation = ({ params }) => {
                         onChange={onChange}
                         value={value}
                         selectOption={selectOption}
+                        fileInput={fileInputCondition(item, item.product.name)}
                       />
                     );
                   }}

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

@@ -1,87 +1,14 @@
-'use client';
-
-import { useEffect } from 'react';
-import { ROUTES } from '@theme/routes';
-import { useGetBasketQuery } from '@akinon/next/data/client/basket';
-import { pushCartView } from '@theme/utils/gtm';
-import { Button, LoaderSpinner, Link } from '@theme/components';
-import { BasketItem, Summary } from '@theme/views/basket';
-import { useLocalization } from '@akinon/next/hooks';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { BasketContent } from '@theme/views/basket/basket-content';
+import { getBasketData } from '@akinon/next/data/server/basket';
 import settings from '@theme/settings';
 
-export default function Page() {
-  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
-  const { t } = useLocalization();
-  const multiBasket = settings.plugins?.multiBasket ?? false;
-
-  useEffect(() => {
-    if (isSuccess) {
-      const products = basket.basketitem_set.map((basketItem) => ({
-        ...basketItem.product
-      }));
-      pushCartView(products);
-    }
-  }, [basket, isSuccess]);
-
-  return (
-    <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
-      {isLoading && (
-        <div className="flex justify-center w-full">
-          <LoaderSpinner />
-        </div>
-      )}
-      {isSuccess &&
-        (basket && basket.basketitem_set && basket.basketitem_set.length > 0 ? (
-          <>
-            <div className="flex-1 xl:mr-16">
-              <div className="flex items-center justify-between py-2 border-b border-gray-200 lg:py-3">
-                <h2 className="text-xl lg:text-2xl font-light">
-                  {t('basket.my_cart')}
-                </h2>
-                <Link
-                  href={ROUTES.HOME}
-                  className="text-xs hover:text-secondary-500"
-                >
-                  {t('basket.back_to_shopping')}
-                </Link>
-              </div>
-              <ul>
-                {multiBasket ? (
-                  <PluginModule
-                    component={Component.MultiBasket}
-                    props={{ BasketItem }}
-                  />
-                ) : (
-                  basket.basketitem_set.map((basketItem, index) => (
-                    <BasketItem basketItem={basketItem} key={index} />
-                  ))
-                )}
-              </ul>
-            </div>
-            <Summary basket={basket} />
-          </>
-        ) : (
-          <div className="flex flex-col items-center container max-w-screen-sm py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-screen-xl">
-            <h1
-              className="w-full text-xl font-light text-secondary text-center sm:text-2xl"
-              data-testid="basket-empty"
-            >
-              {t('basket.empty.title')}
-            </h1>
+export default async function Page() {
+  const { basket } = await getBasketData();
 
-            <div className="w-full text-sm text-black-800 text-center my-4 mb-2 sm:text-base">
-              <p>{t('basket.empty.content_first')}</p>
-              <p>{t('basket.empty.content_second')}.</p>
-            </div>
+  const multiBasket: boolean =
+    typeof settings.plugins?.multiBasket === 'boolean'
+      ? settings.plugins.multiBasket
+      : false;
 
-            <Link href={ROUTES.HOME} passHref>
-              <Button className="px-10 mt-2" appearance="filled">
-                {t('basket.empty.button')}
-              </Button>
-            </Link>
-          </div>
-        ))}
-    </div>
-  );
+  return <BasketContent initialBasket={basket} multiBasket={multiBasket} />;
 }

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

@@ -11,7 +11,7 @@ import {
 } from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
 import { ROUTES } from '@theme/routes';
-import { useFetchCheckoutQuery } from '@akinon/next/data/client/checkout';
+import { useFetchCheckoutQuery, useResetCheckoutStateQuery } from '@akinon/next/data/client/checkout';
 import { Button, LoaderSpinner } from '@theme/components';
 import { pushAddPaymentInfo, pushAddShippingInfo } from '@theme/utils/gtm';
 import { CheckoutStep } from '@akinon/next/types';
@@ -25,6 +25,8 @@ const Checkout = () => {
     (state: RootState) => state.checkout
   );
 
+  const { data: indexData, isLoading: isResetStateLoading } = useResetCheckoutStateQuery(null);
+
   const {
     data: checkoutData,
     isFetching,
@@ -32,7 +34,8 @@ const Checkout = () => {
     isSuccess,
     refetch: refetchCheckout
   } = useFetchCheckoutQuery(null, {
-    refetchOnMountOrArgChange: true
+    refetchOnMountOrArgChange: true,
+    skip: isResetStateLoading || !indexData
   });
   const initialStepChanged = useRef<boolean>(false);
   const router = useRouter();
@@ -94,10 +97,10 @@ const Checkout = () => {
     );
   }
 
-  if (isFetching || isError) {
+  if (isResetStateLoading || isFetching || isError) {
     return (
       <div className="flex flex-col items-center justify-center h-80">
-        {isFetching ? (
+        {isResetStateLoading || isFetching ? (
           <LoaderSpinner />
         ) : (
           <>

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

@@ -4,6 +4,7 @@ import { HOME_WIDGETS } from '@theme/widgets';
 import { getWidgetData } from '@akinon/next/data/server';
 import { withSegmentDefaults } from '@akinon/next/hocs/server';
 import LazyComponent from '@akinon/next/components/lazy-component';
+import WidgetPlaceholder from '@theme/components/widget/widget-placeholder';
 
 type HomeWidgetOrderType = {
   widget_order: Array<{
@@ -16,6 +17,13 @@ export const dynamic = 'force-static';
 export const revalidate = 600;
 
 async function Page() {
+  return (
+    <>
+      <WidgetPlaceholder slug="home-widget-order" />
+      <WidgetPlaceholder slug="home-widget-order-2" />
+    </>
+  );
+
   const data = await getWidgetData<HomeWidgetOrderType>({
     slug: 'home-widget-order'
   });

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

@@ -1,46 +1,61 @@
 'use client';
 
+import { Link } from '@theme/components';
 import { ButtonProps } from '@theme/components/types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/app-template/src/components/file-input.tsx

@@ -1,8 +1,50 @@
+import { useState } from 'react';
 import { forwardRef } from 'react';
 import { FileInputProps } from '@theme/components/types';
+import clsx from 'clsx';
+import { useLocalization } from '@akinon/next/hooks';
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function fileInput(props, ref) {
-    return <input type="file" {...props} ref={ref} />;
+  function FileInput({ className, onChange, ...props }, ref) {
+    const { t } = useLocalization();
+    const [fileNames, setFileNames] = useState<string[]>([]);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      setFileNames(files.map((file) => file.name));
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return (
+      <div className="relative">
+        <input
+          type="file"
+          {...props}
+          ref={ref}
+          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          onChange={handleFileChange}
+        />
+        <button
+          type="button"
+          className={clsx('bg-primary text-white py-2 px-4 text-sm', className)}
+        >
+          {t('common.file_input.select_file')}
+        </button>
+        <div className="mt-1 text-gray-500">
+          {fileNames.length > 0 ? (
+            <ul className="list-disc pl-4 text-xs">
+              {fileNames.map((name, index) => (
+                <li key={index}>{name}</li>
+              ))}
+            </ul>
+          ) : (
+            <span className="text-xs">{t('common.file_input.no_file')}</span>
+          )}
+        </div>
+      </div>
+    );
   }
 );

package/app-template/src/components/types/index.ts

@@ -4,7 +4,10 @@ import { UsePaginationType } from '@akinon/next/hooks/use-pagination';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  appearance?: 'filled' | 'outlined' | 'ghost';
+  appearance?: 'filled' | 'outlined' | 'ghost' | 'link' | string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 export interface PaginationProps {

package/app-template/src/components/widget/widget-placeholder.tsx

@@ -0,0 +1,12 @@
+import 'server-only';
+import { DynamicWidgetContainer } from '../dynamic-widget-renderer';
+
+export default async function WidgetPlaceholder({ slug }: { slug: string }) {
+  return (
+    <>
+      <DynamicWidgetContainer />
+    </>
+  );
+
+  return <div>WidgetPlaceholder</div>;
+}

package/app-template/src/middleware.ts

@@ -9,6 +9,7 @@ import { NextMiddleware, NextResponse } from 'next/server';
  */
 
 export const config = {
+  // For .xml.gz type sitemap urls, update '/(.*sitemap\\.xml)' with this regex '/(.*sitemap\\.xml|sitemap/.*.xml(?:.gz)?)/',
   matcher: [
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',

package/app-template/src/settings.js

@@ -1,6 +1,10 @@
 const { LocaleUrlStrategy } = require('@akinon/next/localization');
 const { ROUTES } = require('@theme/routes');
 
+/* IMPORTANT *
+ * In order to use one locale in the locales array and hide the default locale in the URL, you need to set the localeUrlStrategy to LocaleUrlStrategy.ShowAllLocales.
+ */
+
 const commerceUrl = encodeURI(process.env.SERVICE_BACKEND_URL ?? 'default');
 
 /** @type {import('@akinon/next/types').Settings} */
@@ -14,6 +18,7 @@ module.exports = {
     { translationKey: 'size', key: 'size' }
   ],
   localization: {
+    // If there is one locale in the locales array, the default locale will be hidden in the URL.
     locales: [
       {
         label: 'EN',
@@ -41,7 +46,7 @@ module.exports = {
       }
     ],
     defaultLocaleValue: 'en',
-    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale,
+    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale, // If there is one locale in the locales array, the default locale will be hidden in the URL and localeUrlStrategy should be set to LocaleUrlStrategy.ShowAllLocales.
     redirectToDefaultLocale: true,
     defaultCurrencyCode: 'usd'
   },

package/app-template/src/views/account/address-form.tsx

@@ -247,7 +247,7 @@ export const AddressForm = (props: Props) => {
       />
       <Input
         label={t('account.address_book.form.phone.placeholder')}
-        format={config.user_phone_format.replaceAll(/\9/g, '#')}
+        format={config.user_phone_format.replaceAll(/9/g, '#')}
         mask="_"
         allowEmptyFormatting={true}
         control={control}
@@ -339,7 +339,7 @@ export const AddressForm = (props: Props) => {
         error={errors.postcode}
         data-testid="address-form-post-code"
         required
-        format={config.user_post_code_format.replaceAll(/\9/g, '#')}
+        format={config.user_post_code_format.replaceAll(/9/g, '#')}
         control={control}
         mask="_"
         allowEmptyFormatting

package/app-template/src/views/account/contact-form.tsx

@@ -192,7 +192,7 @@ const ContactForm = () => {
                 label={t('account.contact.form.phone.placeholder')}
                 type="tel"
                 className="mb-1"
-                format={user_phone_format.replace(/\9/g, '#')}
+                format={user_phone_format.replace(/9/g, '#')}
                 mask="_"
                 allowEmptyFormatting={true}
                 control={control}
@@ -255,13 +255,8 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput
-              name="file"
-              title="file"
-              className="w-full mb-5"
-              {...register('file')}
-            />
-            <Button type="submit" className="w-full font-medium">
+            <FileInput name="file" title="file" {...register('file')} />
+            <Button type="submit" className="w-full font-medium mt-4">
               {t('account.contact.form.submit_button')}
             </Button>
           </form>