@akinon/projectzero 1.78.0-rc.2 → 1.78.0

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.78.0-rc.2",
+  "version": "1.78.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,25 +22,25 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.78.0-rc.2",
-    "@akinon/pz-akifast": "1.78.0-rc.2",
-    "@akinon/pz-b2b": "1.78.0-rc.2",
-    "@akinon/pz-basket-gift-pack": "1.78.0-rc.2",
-    "@akinon/pz-bkm": "1.78.0-rc.2",
-    "@akinon/pz-checkout-gift-pack": "1.78.0-rc.2",
-    "@akinon/pz-click-collect": "1.78.0-rc.2",
-    "@akinon/pz-credit-payment": "1.78.0-rc.2",
-    "@akinon/pz-gpay": "1.78.0-rc.2",
-    "@akinon/pz-masterpass": "1.78.0-rc.2",
-    "@akinon/pz-one-click-checkout": "1.78.0-rc.2",
-    "@akinon/pz-otp": "1.78.0-rc.2",
-    "@akinon/pz-pay-on-delivery": "1.78.0-rc.2",
-    "@akinon/pz-saved-card": "1.78.0-rc.2",
-    "@akinon/pz-tabby-extension": "1.78.0-rc.2",
+    "@akinon/next": "1.78.0",
+    "@akinon/pz-akifast": "1.78.0",
+    "@akinon/pz-b2b": "1.78.0",
+    "@akinon/pz-basket-gift-pack": "1.78.0",
+    "@akinon/pz-bkm": "1.78.0",
+    "@akinon/pz-checkout-gift-pack": "1.78.0",
+    "@akinon/pz-click-collect": "1.78.0",
+    "@akinon/pz-credit-payment": "1.78.0",
+    "@akinon/pz-gpay": "1.78.0",
+    "@akinon/pz-masterpass": "1.78.0",
+    "@akinon/pz-one-click-checkout": "1.78.0",
+    "@akinon/pz-otp": "1.78.0",
+    "@akinon/pz-pay-on-delivery": "1.78.0",
+    "@akinon/pz-saved-card": "1.78.0",
+    "@akinon/pz-tabby-extension": "1.78.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
-    "@sentry/nextjs": "8.35.0",
+    "@sentry/nextjs": "7.116.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.78.0-rc.2",
+    "@akinon/eslint-plugin-projectzero": "1.78.0",
     "@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,9 +61,5 @@
     "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,9 +61,5 @@
     "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/sentry.edge.config.ts

@@ -0,0 +1,3 @@
+import { initSentry } from '@akinon/next/sentry';
+
+initSentry('Edge');

package/app-template/sentry.server.config.ts

@@ -0,0 +1,3 @@
+import { initSentry } from '@akinon/next/sentry';
+
+initSentry('Server');

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

@@ -8,15 +8,14 @@ import {
   useGetOrderQuery,
   useGetCancellationReasonsQuery
 } from '@akinon/next/data/client/account';
-import type { AccountOrderCancellation } from '@akinon/next/types';
+import { AccountOrderCancellation } from '@akinon/next/types';
 import {
   Button,
   Checkbox,
   Select,
   Modal,
   LoaderSpinner,
-  Link,
-  FileInput
+  Link
 } from '@theme/components';
 import { useState } from 'react';
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
@@ -40,7 +39,6 @@ const AccountOrderCancellation = ({ params }) => {
   } = useForm<AccountOrderCancellation>({
     resolver: yupResolver(accountOrderCancellationSchema)
   });
-
   const { data: cancellationReasons, isSuccess: cancellationReasonsSuccess } =
     useGetCancellationReasonsQuery();
 
@@ -58,9 +56,6 @@ 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);
@@ -117,68 +112,8 @@ 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) => {
-    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 })
+    cancelOrder({ id: order.number, ...orderItems })
       .unwrap()
       .then(() => {
         setResponseMessage({
@@ -187,33 +122,10 @@ const AccountOrderCancellation = ({ params }) => {
         });
         setIsModalOpen(true);
       })
-      .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();
-
+      .catch(() => {
         setResponseMessage({
           title: t('account.my_orders.return.error.title').toString(),
-          content: errorContent
+          content: t('account.my_orders.return.error.description').toString()
         });
         setIsModalOpen(true);
       });
@@ -268,7 +180,6 @@ 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,14 +1,87 @@
-import { BasketContent } from '@theme/views/basket/basket-content';
-import { getBasketData } from '@akinon/next/data/server/basket';
+'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 settings from '@theme/settings';
 
-export default async function Page() {
-  const { basket } = await getBasketData();
+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>
 
-  const multiBasket: boolean =
-    typeof settings.plugins?.multiBasket === 'boolean'
-      ? settings.plugins.multiBasket
-      : false;
+            <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>
 
-  return <BasketContent initialBasket={basket} multiBasket={multiBasket} />;
+            <Link href={ROUTES.HOME} passHref>
+              <Button className="px-10 mt-2" appearance="filled">
+                {t('basket.empty.button')}
+              </Button>
+            </Link>
+          </div>
+        ))}
+    </div>
+  );
 }

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

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

@@ -4,7 +4,6 @@ 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<{
@@ -17,13 +16,6 @@ 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,61 +1,46 @@
 '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) => {
-  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}
+  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
+      )}
     >
-      {children}
-    </Link>
-  ) : (
-    <button {...rest} className={buttonClasses}>
-      {children}
+      {props.children}
     </button>
   );
 };

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

@@ -1,50 +1,8 @@
-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({ 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>
-    );
+  function fileInput(props, ref) {
+    return <input type="file" {...props} ref={ref} />;
   }
 );

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

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

package/app-template/src/middleware.ts

@@ -9,7 +9,6 @@ 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,10 +1,6 @@
 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} */
@@ -18,7 +14,6 @@ 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',
@@ -46,7 +41,7 @@ module.exports = {
       }
     ],
     defaultLocaleValue: 'en',
-    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.
+    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale,
     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,8 +255,13 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput name="file" title="file" {...register('file')} />
-            <Button type="submit" className="w-full font-medium mt-4">
+            <FileInput
+              name="file"
+              title="file"
+              className="w-full mb-5"
+              {...register('file')}
+            />
+            <Button type="submit" className="w-full font-medium">
               {t('account.contact.form.submit_button')}
             </Button>
           </form>