@akinon/projectzero 1.105.0 → 1.106.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/projectzero
 
+## 1.106.0
+
+### Minor Changes
+
+- 34578ef: ZERO-3419 :Add new payment plugins and update existing ones in the plugin list
+
 ## 1.105.0
 
 ## 1.104.0

package/app-template/CHANGELOG.md

@@ -1,5 +1,38 @@
 # projectzeronext
 
+## 1.106.0
+
+### Minor Changes
+
+- e9e902b: ZERO-3650: Add Loyalty
+- 9dc7298: ZERO-3416: Refactor Accordion component to enhance props and improve styling flexibility
+- 2d3f178: ZERO-3417: Enhance FileInput component with additional props for customization
+
+### Patch Changes
+
+- Updated dependencies [155cd23]
+- Updated dependencies [ae010f0]
+- Updated dependencies [9dc7298]
+- Updated dependencies [2d3f178]
+- Updated dependencies [8bc82f0]
+  - @akinon/pz-tamara-extension@1.106.0
+  - @akinon/pz-otp@1.106.0
+  - @akinon/next@1.106.0
+  - @akinon/pz-checkout-gift-pack@1.106.0
+  - @akinon/pz-akifast@1.106.0
+  - @akinon/pz-b2b@1.106.0
+  - @akinon/pz-basket-gift-pack@1.106.0
+  - @akinon/pz-bkm@1.106.0
+  - @akinon/pz-click-collect@1.106.0
+  - @akinon/pz-credit-payment@1.106.0
+  - @akinon/pz-gpay@1.106.0
+  - @akinon/pz-hepsipay@1.106.0
+  - @akinon/pz-masterpass@1.106.0
+  - @akinon/pz-one-click-checkout@1.106.0
+  - @akinon/pz-pay-on-delivery@1.106.0
+  - @akinon/pz-saved-card@1.106.0
+  - @akinon/pz-tabby-extension@1.106.0
+
 ## 1.105.0
 
 ### Minor Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.105.0",
+  "version": "1.106.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,22 +24,23 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "1.105.0",
-    "@akinon/pz-akifast": "1.105.0",
-    "@akinon/pz-b2b": "1.105.0",
-    "@akinon/pz-basket-gift-pack": "1.105.0",
-    "@akinon/pz-bkm": "1.105.0",
-    "@akinon/pz-checkout-gift-pack": "1.105.0",
-    "@akinon/pz-click-collect": "1.105.0",
-    "@akinon/pz-credit-payment": "1.105.0",
-    "@akinon/pz-gpay": "1.105.0",
-    "@akinon/pz-masterpass": "1.105.0",
-    "@akinon/pz-one-click-checkout": "1.105.0",
-    "@akinon/pz-otp": "1.105.0",
-    "@akinon/pz-pay-on-delivery": "1.105.0",
-    "@akinon/pz-saved-card": "1.105.0",
-    "@akinon/pz-tabby-extension": "1.105.0",
-    "@akinon/pz-tamara-extension": "1.105.0",
+    "@akinon/next": "1.106.0",
+    "@akinon/pz-akifast": "1.106.0",
+    "@akinon/pz-b2b": "1.106.0",
+    "@akinon/pz-basket-gift-pack": "1.106.0",
+    "@akinon/pz-bkm": "1.106.0",
+    "@akinon/pz-checkout-gift-pack": "1.106.0",
+    "@akinon/pz-click-collect": "1.106.0",
+    "@akinon/pz-credit-payment": "1.106.0",
+    "@akinon/pz-gpay": "1.106.0",
+    "@akinon/pz-hepsipay": "1.106.0",
+    "@akinon/pz-masterpass": "1.106.0",
+    "@akinon/pz-one-click-checkout": "1.106.0",
+    "@akinon/pz-otp": "1.106.0",
+    "@akinon/pz-pay-on-delivery": "1.106.0",
+    "@akinon/pz-saved-card": "1.106.0",
+    "@akinon/pz-tabby-extension": "1.106.0",
+    "@akinon/pz-tamara-extension": "1.106.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
@@ -62,7 +63,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.105.0",
+    "@akinon/eslint-plugin-projectzero": "1.106.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/checkout.json

@@ -37,6 +37,7 @@
     "subtotal": "Subtotal",
     "shipping": "Shipping",
     "discounts_total": "Discounts Total",
+    "loyalty_money_total": "Loyalty Money Total",
     "total": "Total",
     "delivery_info": "Delivery Info",
     "change": "change",
@@ -138,6 +139,11 @@
       "payments": "Payments",
       "per_month": "Per Month",
       "total": "Total"
+    },
+    "store_credit": {
+      "use_my_store_credits": "Use my pz-zero credits",
+      "available_balance": "Available Balance",
+      "insufficient_balance": "Your pz-zero credits are not sufficient to pay for the order, please select an additional payment method to cover the balance of <Amount/>"
     }
   },
   "agreement": {

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

@@ -37,6 +37,7 @@
     "subtotal": "Ara toplam",
     "shipping": "Kargo",
     "discounts_total": "İndirimler Toplamı",
+    "loyalty_money_total": "Sadakat Parası Toplamı",
     "total": "Toplam",
     "delivery_info": "Teslimat Bilgileri",
     "change": "değiştir",
@@ -138,6 +139,11 @@
       "payments": "Ödemeler",
       "per_month": "Her ay",
       "total": "Toplam"
+    },
+    "store_credit": {
+      "use_my_store_credits": "pz-zero kredilerimi kullan",
+      "available_balance": "Mevcut Bakiyem",
+      "insufficient_balance": "pz-zero kredileriniz siparişi ödemek için yeterli değil, lütfen <Amount/> tutarını karşılamak için ek bir ödeme yöntemi seçin."
     }
   },
   "agreement": {

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

@@ -1,33 +1,25 @@
 '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);
 
@@ -39,15 +31,22 @@ export const Accordion = ({
       )}
     >
       <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/file-input.tsx

@@ -1,11 +1,21 @@
 import { useState } from 'react';
 import { forwardRef } from 'react';
 import { FileInputProps } from '@theme/components/types';
-import clsx from 'clsx';
 import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function FileInput({ className, onChange, ...props }, ref) {
+  function FileInput(
+    {
+      buttonClassName,
+      onChange,
+      fileClassName,
+      fileNameWrapperClassName,
+      fileInputClassName,
+      ...props
+    },
+    ref
+  ) {
     const { t } = useLocalization();
     const [fileNames, setFileNames] = useState<string[]>([]);
 
@@ -24,24 +34,34 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
           type="file"
           {...props}
           ref={ref}
-          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          className={twMerge(
+            'absolute inset-0 w-full h-full opacity-0 cursor-pointer',
+            fileInputClassName
+          )}
           onChange={handleFileChange}
         />
         <button
           type="button"
-          className={clsx('bg-primary text-white py-2 px-4 text-sm', className)}
+          className={twMerge(
+            'bg-primary text-white py-2 px-4 text-sm',
+            buttonClassName
+          )}
         >
           {t('common.file_input.select_file')}
         </button>
-        <div className="mt-1 text-gray-500">
+        <div
+          className={twMerge('mt-1 text-gray-500', fileNameWrapperClassName)}
+        >
           {fileNames.length > 0 ? (
-            <ul className="list-disc pl-4 text-xs">
+            <ul className={twMerge('list-disc pl-4 text-xs', fileClassName)}>
               {fileNames.map((name, index) => (
                 <li key={index}>{name}</li>
               ))}
             </ul>
           ) : (
-            <span className="text-xs">{t('common.file_input.no_file')}</span>
+            <span className={twMerge('text-xs', fileClassName)}>
+              {t('common.file_input.no_file')}
+            </span>
           )}
         </div>
       </div>

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

@@ -56,7 +56,7 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
 
   const currentCurrencyDecimalScale = Settings.localization.currencies.find(
     (currency) => currency.code === currencyCode_
-  ).decimalScale;
+  )?.decimalScale;
 
   return (
     <NumericFormat

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

@@ -29,7 +29,13 @@ export interface PaginationProps {
   isLoading?: boolean;
 }
 
-export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+export interface FileInputProps extends React.HTMLProps<HTMLInputElement> {
+  fileClassName?: string;
+  fileNameWrapperClassName?: string;
+  fileInputClassName?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  buttonClassName?: string;
+}
 
 export type RadioProps = React.HTMLProps<HTMLInputElement>;
 
@@ -92,3 +98,20 @@ export interface BadgeProps {
   children: ReactNode;
   className?: string;
 }
+
+export type AccordionProps = {
+  isCollapse?: boolean;
+  collapseClassName?: string;
+  title?: string;
+  subTitle?: string;
+  icons?: string[];
+  iconSize?: number;
+  iconColor?: string;
+  children?: ReactNode;
+  headerClassName?: string;
+  className?: string;
+  titleClassName?: string;
+  subTitleClassName?: string;
+  dataTestId?: string;
+  contentClassName?: string;
+};

package/app-template/src/views/checkout/steps/payment/options/store-credit.tsx

@@ -0,0 +1,121 @@
+import clsx from 'clsx';
+import {
+  useGetCheckoutLoyaltyBalanceQuery,
+  usePayWithLoyaltyBalanceMutation
+} from '@akinon/next/data/client/checkout';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useMemo, useState } from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
+import { Icon, Price } from '@theme/components';
+import { Trans } from '@akinon/next/components';
+import { LoaderSpinner } from '@theme/components';
+
+export const StoreCredits = () => {
+  const { t } = useLocalization();
+
+  const [payWithLoyaltyBalance, { isLoading: isPayWithLoyaltyBalanceLoading }] =
+    usePayWithLoyaltyBalanceMutation();
+
+  const { loyaltyBalance, preOrder } = useAppSelector(
+    (state) => state.checkout
+  );
+
+  const { isLoading: isLoyaltyBalanceLoading } =
+    useGetCheckoutLoyaltyBalanceQuery(undefined, {
+      refetchOnMountOrArgChange: true,
+      skip: !preOrder?.payment_option
+    });
+
+  const isLoyaltyBalanceUsed = useMemo(() => {
+    return parseFloat(preOrder?.loyalty_money ?? '0') > 0;
+  }, [preOrder?.loyalty_money]);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      await payWithLoyaltyBalance(isLoyaltyBalanceUsed ? '0' : loyaltyBalance);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (preOrder?.is_guest) {
+    return null;
+  }
+
+  if (isLoyaltyBalanceLoading) {
+    return (
+      <div className="mb-3 px-4 py-3 xs:px-0">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (parseFloat(loyaltyBalance) <= 0) {
+    return null;
+  }
+  return (
+    <div
+      className={twMerge(
+        'hidden  flex-col w-full mb-4 border border-solid border-gray-400 px-0 md:p-4',
+        isPayWithLoyaltyBalanceLoading && 'pointer-events-none opacity-30',
+        parseFloat(loyaltyBalance) > 0 && 'block'
+      )}
+    >
+      <div className="flex w-full items-center">
+        <button onClick={handleClick}>
+          <span
+            className={clsx(
+              'flex h-5 w-5 items-center justify-center rounded border border-solid border-primary',
+              isLoyaltyBalanceUsed ? 'bg-primary' : 'bg-white'
+            )}
+          >
+            <Icon
+              name={isLoyaltyBalanceUsed ? 'check' : ''}
+              size={10}
+              className={clsx({ 'text-white': isLoyaltyBalanceUsed })}
+            />
+          </span>
+        </button>
+
+        <div className="w-full pl-4">
+          <p className="cursor-pointer text-sm" onClick={handleClick}>
+            {t('checkout.payment.store_credit.use_my_store_credits')}
+          </p>
+          <p className="flex text-sm text-[#606060]">
+            {t('checkout.payment.store_credit.available_balance')}:
+            <Price
+              value={loyaltyBalance}
+              currencyCode={preOrder?.currency_type_label}
+              className="pe-1 font-bold"
+            />
+          </p>
+        </div>
+      </div>
+
+      {isLoyaltyBalanceUsed && parseFloat(preOrder?.unpaid_amount) > 0 && (
+        <p className="my-4 text-[15px] font-light italic text-[#707070] max-xs:text-xs">
+          <Trans
+            i18nKey="checkout.payment.store_credit.insufficient_balance"
+            components={{
+              Amount: (
+                <div className="inline-flex">
+                  <Price
+                    value={preOrder?.unpaid_amount}
+                    currencyCode={preOrder?.currency_type_label}
+                    className="text-primary"
+                  />
+                </div>
+              )
+            }}
+          />
+        </p>
+      )}
+    </div>
+  );
+};

package/app-template/src/views/checkout/summary.tsx

@@ -8,6 +8,7 @@ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { twMerge } from 'tailwind-merge';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
+import { StoreCredits } from './steps/payment/options/store-credit';
 
 export const Summary = () => {
   const { t } = useLocalization();
@@ -38,6 +39,7 @@ export const Summary = () => {
             'flex flex-col w-full mb-4 border border-solid border-gray-400'
         }}
       />
+      <StoreCredits />
       <div className="flex flex-col w-full border border-solid border-gray-400">
         <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
           <span className="text-black-800 text-xl font-light sm:text-2xl">
@@ -118,6 +120,14 @@ export const Summary = () => {
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
+          {parseFloat(preOrder?.loyalty_money) > 0 && (
+            <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+              <span>{t('checkout.summary.loyalty_money_total')}</span>
+              <span>
+                <Price value={preOrder?.loyalty_money} />
+              </span>
+            </div>
+          )}
           <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
             <span>{t('checkout.summary.discounts_total')}</span>
             <span>

package/commands/plugins.ts

@@ -69,45 +69,65 @@ export default async () => {
   }
 
   const definedPlugins = [
+    {
+      name: 'Akifast',
+      value: 'pz-akifast'
+    },
+    {
+      name: 'Apple Pay',
+      value: 'pz-apple-pay'
+    },
+    {
+      name: 'B2B',
+      value: 'pz-b2b'
+    },
     {
       name: 'Basket Gift Pack',
       value: 'pz-basket-gift-pack'
     },
     {
-      name: 'Click & Collect',
-      value: 'pz-click-collect'
+      name: 'BKM Express',
+      value: 'pz-bkm'
     },
     {
       name: 'Checkout Gift Pack',
       value: 'pz-checkout-gift-pack'
     },
     {
-      name: 'One Click Checkout',
-      value: 'pz-one-click-checkout'
+      name: 'Click & Collect',
+      value: 'pz-click-collect'
+    },
+    {
+      name: 'Credit Payment',
+      value: 'pz-credit-payment'
     },
     {
       name: 'Garanti Pay',
       value: 'pz-gpay'
     },
     {
-      name: 'Pay On Delivery',
-      value: 'pz-pay-on-delivery'
+      name: 'Masterpass',
+      value: 'pz-masterpass'
     },
     {
-      name: 'Otp',
-      value: 'pz-otp'
+      name: 'Multi Basket',
+      value: 'pz-multi-basket'
     },
     {
-      name: 'BKM Express',
-      value: 'pz-bkm'
+      name: 'One Click Checkout',
+      value: 'pz-one-click-checkout'
     },
     {
-      name: 'Credit Payment',
-      value: 'pz-credit-payment'
+      name: 'Otp',
+      value: 'pz-otp'
     },
     {
-      name: 'Multi Basket',
-      value: 'pz-multi-basket'
+      name: 'Pay On Delivery',
+      value: 'pz-pay-on-delivery'
+    },
+    {
+      name: 'Saved Card',
+      value: 'pz-saved-card'
     },
     {
       name: 'Tabby Payment Extension',

package/dist/commands/plugins.js

@@ -84,45 +84,65 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
         process.exit(1);
     }
     const definedPlugins = [
+        {
+            name: 'Akifast',
+            value: 'pz-akifast'
+        },
+        {
+            name: 'Apple Pay',
+            value: 'pz-apple-pay'
+        },
+        {
+            name: 'B2B',
+            value: 'pz-b2b'
+        },
         {
             name: 'Basket Gift Pack',
             value: 'pz-basket-gift-pack'
         },
         {
-            name: 'Click & Collect',
-            value: 'pz-click-collect'
+            name: 'BKM Express',
+            value: 'pz-bkm'
         },
         {
             name: 'Checkout Gift Pack',
             value: 'pz-checkout-gift-pack'
         },
         {
-            name: 'One Click Checkout',
-            value: 'pz-one-click-checkout'
+            name: 'Click & Collect',
+            value: 'pz-click-collect'
+        },
+        {
+            name: 'Credit Payment',
+            value: 'pz-credit-payment'
         },
         {
             name: 'Garanti Pay',
             value: 'pz-gpay'
         },
         {
-            name: 'Pay On Delivery',
-            value: 'pz-pay-on-delivery'
+            name: 'Masterpass',
+            value: 'pz-masterpass'
         },
         {
-            name: 'Otp',
-            value: 'pz-otp'
+            name: 'Multi Basket',
+            value: 'pz-multi-basket'
         },
         {
-            name: 'BKM Express',
-            value: 'pz-bkm'
+            name: 'One Click Checkout',
+            value: 'pz-one-click-checkout'
         },
         {
-            name: 'Credit Payment',
-            value: 'pz-credit-payment'
+            name: 'Otp',
+            value: 'pz-otp'
         },
         {
-            name: 'Multi Basket',
-            value: 'pz-multi-basket'
+            name: 'Pay On Delivery',
+            value: 'pz-pay-on-delivery'
+        },
+        {
+            name: 'Saved Card',
+            value: 'pz-saved-card'
         },
         {
             name: 'Tabby Payment Extension',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "1.105.0",
+  "version": "1.106.0",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {