npm - @akinon/projectzero - Versions diffs - 2.0.0-beta.10 → 2.0.0-beta.11 - Mend

@akinon/projectzero 2.0.0-beta.10 → 2.0.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/CHANGELOG.md +6 -0
package/app-template/CHANGELOG.md +26 -0
package/app-template/docs/plugins.md +60 -25
package/app-template/jest.config.ts +2 -2
package/app-template/package.json +20 -20
package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/cancellation/page.tsx +7 -4
package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/page.tsx +47 -44
package/app-template/src/components/button.tsx +2 -2
package/app-template/src/components/checkbox.tsx +1 -0
package/app-template/src/settings.js +2 -1
package/app-template/src/views/account/order.tsx +10 -8
package/app-template/src/views/anonymous-tracking/order-detail/index.tsx +44 -37
package/app-template/src/views/checkout/steps/payment/options/redirection.tsx +5 -1
package/app-template/src/views/header/action-menu.tsx +5 -1
package/app-template/src/views/product/price-wrapper.tsx +7 -2
package/app-template/src/views/product/product-info.tsx +33 -3
package/app-template/tailwind.config.js +11 -7
package/codemods/update-tailwind-config/index.js +30 -0
package/codemods/update-tailwind-config/transform.js +102 -0
package/commands/codemod.ts +0 -1
package/commands/plugins.ts +20 -30
package/dist/commands/codemod.js +0 -1
package/dist/commands/plugins.js +19 -20
package/package.json +3 -2

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # @akinon/projectzero
+## 2.0.0-beta.11
+### Minor Changes
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
 ## 2.0.0-beta.10
 ### Minor Changes

package/app-template/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,31 @@
 # projectzeronext
+## 2.0.0-beta.11
+### Minor Changes
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+### Patch Changes
+- Updated dependencies [ac783d6]
+  - @akinon/pz-checkout-gift-pack@2.0.0-beta.11
+  - @akinon/pz-one-click-checkout@2.0.0-beta.11
+  - @akinon/pz-basket-gift-pack@2.0.0-beta.11
+  - @akinon/pz-tamara-extension@2.0.0-beta.11
+  - @akinon/pz-pay-on-delivery@2.0.0-beta.11
+  - @akinon/pz-tabby-extension@2.0.0-beta.11
+  - @akinon/pz-credit-payment@2.0.0-beta.11
+  - @akinon/pz-click-collect@2.0.0-beta.11
+  - @akinon/pz-masterpass@2.0.0-beta.11
+  - @akinon/pz-saved-card@2.0.0-beta.11
+  - @akinon/next@2.0.0-beta.11
+  - @akinon/pz-akifast@2.0.0-beta.11
+  - @akinon/pz-gpay@2.0.0-beta.11
+  - @akinon/pz-b2b@2.0.0-beta.11
+  - @akinon/pz-bkm@2.0.0-beta.11
+  - @akinon/pz-otp@2.0.0-beta.11
 ## 2.0.0-beta.10
 ### Minor Changes

package/app-template/docs/plugins.md CHANGED Viewed

@@ -15,13 +15,18 @@ The plugins selected from this list will be added to the project and ready for u
 ### Plugin List
-1. Masterpass
-2. Basket Gift Pack
+1. Basket Gift Pack
+2. Click & Collect
 3. Checkout Gift Pack
-4. Checkout Providers
-5. OTP
-6. Redirection Payment
-7. Click & Collect
+4. One Click Checkout
+5. Garanti Pay
+6. Pay On Delivery
+7. OTP
+8. BKM Express
+9. Credit Payment
+10. Multi Basket
+11. Tabby Payment Extension
+12. Tamara Payment Extension
 ## Installation
@@ -33,44 +38,74 @@ The plugins selected from this list will be added to the project and ready for u
 2. Select the plugins desire to install from the list provided.
-### Masterpass
+### Basket Gift Pack
-The Masterpass plugin enables users to make payments with their Masterpass-registered cards on the payment page. With this plugin, operations such as listing Masterpass-registered cards, adding new cards, and removing cards can be performed.
+Adds a gift pack and/or a gift note to products in the basket. Enhances the gifting experience for customers.
-[Click here for details](https://bitbucket.org/akinonteam/pz-masterpass/src/main/)
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-basket-gift-pack)
-### Basket Gift Pack
+### Click & Collect
-This plugin allows for the addition of gift pack and gift note or just a gift note for products on the basket page.
+Allows customers to place an order online and pick it up from a selected store. Reduces delivery costs and improves convenience for users.
-[Click here for details](https://bitbucket.org/akinonteam/pz-basket-gift-pack/src/main/)
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-click-collect)
 ### Checkout Gift Pack
-Used to enable the gift pack option for products on the payment page.
+Enables a gift pack option on the payment page. Customers can choose to wrap their purchases as gifts during checkout.
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-checkout-gift-pack)
+### One Click Checkout
-[Click here for details](https://bitbucket.org/akinonteam/pz-checkout-gift-pack/src/main/)
+Simplifies the checkout process by adding one-click payment methods.
-### Checkout Providers
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-one-click-checkout)
-This plugin is used to add payment methods to the checkout process.
+### Garanti Pay
-[Click here for details](https://bitbucket.org/akinonteam/pz_checkout_providers/src/master/)
+Allows Garanti Bank credit card users to make fast and secure payments without entering card details.
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-gpay)
+### Pay On Delivery
+Provides an option for customers to pay with cash or a credit card at the time of delivery.
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-pay-on-delivery)
 ### OTP
-This application provides SMS verification (OTP) support for desired actions such as registration and updating profile information.
+Adds SMS-based OTP (One-Time Password) verification for secure actions such as registration and updating profile information.
-[Click here for details](https://bitbucket.org/akinonteam/pz_otp/src/master/)
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-otp)
-### Redirection Payment
+### BKM Express
-Used to enable any payment option with a redirection type on the payment page.
+Integrates the BKM Express payment method for users to make fast and secure payments without entering card details.
-[Click here for details](https://bitbucket.org/akinonteam/pz-redirection-payment/src/main/)
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-bkm)
-### Click & Collect
+### Credit Payment
+Supports credit card payments with installment and non-installment options.
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-credit-payment)
+### Multi Basket
+Enables customers to create and manage multiple virtual baskets at the same time. Facilitates better basket organization.
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-multi-basket)
+### Tabby Payment Extension
+Integrates Tabby’s installment and deferred payment solutions into the checkout.
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-tabby-extension)
+### Tamara Payment Extension
-This plugin enables the "Click & Collect" in-store pickup option.
+Adds Tamara’s "Buy Now, Pay Later" feature to the payment options. Customers can defer payments while ensuring a seamless checkout experience.
-[Click here for details](https://bitbucket.org/akinonteam/pz-click-collect/src/main/)
+[Click here for details](https://www.npmjs.com/package/@akinon/pz-tamara-extension)

package/app-template/jest.config.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 const nextJest = require('next/jest');
-import type { InitialOptionsTsJest } from 'ts-jest/dist/types';
+import type { JestConfigWithTsJest } from 'ts-jest';
 const createJestConfig = nextJest({
   dir: './'
 });
-const config: InitialOptionsTsJest = {
+const config: JestConfigWithTsJest = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
   transform: {

package/app-template/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,29 +24,29 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.0-beta.10",
-    "@akinon/pz-akifast": "2.0.0-beta.10",
-    "@akinon/pz-b2b": "2.0.0-beta.10",
-    "@akinon/pz-basket-gift-pack": "2.0.0-beta.10",
-    "@akinon/pz-bkm": "2.0.0-beta.10",
-    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.10",
-    "@akinon/pz-click-collect": "2.0.0-beta.10",
-    "@akinon/pz-credit-payment": "2.0.0-beta.10",
-    "@akinon/pz-gpay": "2.0.0-beta.10",
-    "@akinon/pz-masterpass": "2.0.0-beta.10",
-    "@akinon/pz-one-click-checkout": "2.0.0-beta.10",
-    "@akinon/pz-otp": "2.0.0-beta.10",
-    "@akinon/pz-pay-on-delivery": "2.0.0-beta.10",
-    "@akinon/pz-saved-card": "2.0.0-beta.10",
-    "@akinon/pz-tabby-extension": "2.0.0-beta.10",
-    "@akinon/pz-tamara-extension": "2.0.0-beta.10",
+    "@akinon/next": "2.0.0-beta.11",
+    "@akinon/pz-akifast": "2.0.0-beta.11",
+    "@akinon/pz-b2b": "2.0.0-beta.11",
+    "@akinon/pz-basket-gift-pack": "2.0.0-beta.11",
+    "@akinon/pz-bkm": "2.0.0-beta.11",
+    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.11",
+    "@akinon/pz-click-collect": "2.0.0-beta.11",
+    "@akinon/pz-credit-payment": "2.0.0-beta.11",
+    "@akinon/pz-gpay": "2.0.0-beta.11",
+    "@akinon/pz-masterpass": "2.0.0-beta.11",
+    "@akinon/pz-one-click-checkout": "2.0.0-beta.11",
+    "@akinon/pz-otp": "2.0.0-beta.11",
+    "@akinon/pz-pay-on-delivery": "2.0.0-beta.11",
+    "@akinon/pz-saved-card": "2.0.0-beta.11",
+    "@akinon/pz-tabby-extension": "2.0.0-beta.11",
+    "@akinon/pz-tamara-extension": "2.0.0-beta.11",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
     "@tailwindcss/postcss": "4.0.0",
     "dayjs": "1.11.5",
     "lossless-json": "2.0.5",
-    "next": "15.3.2",
+    "next": "15.3.4",
     "next-auth": "4.24.11",
     "next-pwa": "5.6.0",
     "pino": "8.11.0",
@@ -63,7 +63,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.10",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.11",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -100,7 +100,7 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-scss": "4.2.0",
     "stylelint-selector-bem-pattern": "2.1.1",
-    "tailwindcss": "4.1.6",
+    "tailwindcss": "4.1.11",
     "ts-jest": "29.1.1",
     "ts-node": "10.7.0",
     "typescript": "5.7.2"

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

@@ -237,13 +237,13 @@ const AccountOrderCancellation = ({ params }) => {
           <div>
             <div className="pb-2 mb-3 text-lg border-gray border-b">
               <span data-testid="account-orders-return-order-count">
-                {order.orderitem_set.length}
+                {order?.orderitem_set?.length}
               </span>{' '}
               <span>{t('account.my_orders.detail.products')}</span>
             </div>
             <form onSubmit={handleSubmit(onSubmit)}>
-              {order.orderitem_set.map((item, index: number) => (
+              {order?.orderitem_set?.map((item, index: number) => (
                 <Controller
                   defaultValue={[]}
                   control={control}
@@ -254,7 +254,7 @@ const AccountOrderCancellation = ({ params }) => {
                       return cancelItem.order_item === item.id;
                     });
-                    const cancellationType = item.is_refundable
+                    const cancellationType = item?.is_refundable
                       ? 'refund'
                       : 'cancel';
@@ -270,7 +270,10 @@ const AccountOrderCancellation = ({ params }) => {
                         onChange={onChange}
                         value={value}
                         selectOption={selectOption}
-                        fileInput={fileInputCondition(item, item.product.name)}
+                        fileInput={fileInputCondition(
+                          item,
+                          item?.product?.name
+                        )}
                       />
                     );
                   }}

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

@@ -33,14 +33,15 @@ const AccountOrderDetail = ({ params }) => {
   const groupedOrder = [];
   if (order) {
-    const groupedData = order.orderitem_set.reduce((groups, item) => {
-      const { tracking_number } = item;
-      if (!groups[tracking_number]) {
-        groups[tracking_number] = [];
-      }
-      groups[tracking_number].push(item);
-      return groups;
-    }, {});
+    const groupedData =
+      order?.orderitem_set?.reduce((groups, item) => {
+        const { tracking_number } = item;
+        if (!groups[tracking_number]) {
+          groups[tracking_number] = [];
+        }
+        groups[tracking_number].push(item);
+        return groups;
+      }, {}) || {};
     const result = Object.values(groupedData);
@@ -77,8 +78,8 @@ const AccountOrderDetail = ({ params }) => {
         <div>
           <span className="text-base font-bold">
-            {order?.orderitem_set.length}{' '}
-            {t('account.my_orders.detail.products')} {groupedOrder.length}{' '}
+            {order?.orderitem_set?.length}{' '}
+            {t('account.my_orders.detail.products')} {groupedOrder?.length}{' '}
             {t('account.my_orders.detail.packages')}
           </span>
         </div>
@@ -88,16 +89,17 @@ const AccountOrderDetail = ({ params }) => {
           className="break-words"
         >
           <span>{t('account.my_orders.detail.delivery_address')}</span>:{' '}
-          {order.shipping_address.line} {order.shipping_address.district.name}{' '}
-          {order.shipping_address.township.name}{' '}
-          {order.shipping_address.city.name}
+          {order?.shipping_address?.line}{' '}
+          {order?.shipping_address?.district?.name}{' '}
+          {order?.shipping_address?.township?.name}{' '}
+          {order?.shipping_address?.city?.name}
         </div>
       </OrderDetailHeader>
       <div>
         {groupedOrder.map((group, i) => {
           const orderStatus = getOrderStatus(
-            group[0].status.value.toString(),
+            group[0]?.status?.value?.toString(),
             t
           );
@@ -121,8 +123,8 @@ const AccountOrderDetail = ({ params }) => {
                 <div className="flex justify-between items-center lg:gap-x-12">
                   <div className="text-base">{orderStatus.label}</div>
-                  {group[0].tracking_number && group[0].tracking_url && (
-                    <Link href={group[0].tracking_url}>
+                  {group[0]?.tracking_number && group[0]?.tracking_url && (
+                    <Link href={group[0]?.tracking_url}>
                       <Button className="px-7" appearance="filled">
                         {t('account.my_orders.detail.track_shipment')}
                       </Button>
@@ -134,7 +136,7 @@ const AccountOrderDetail = ({ params }) => {
               <div className="px-4 lg:px-7">
                 {group.map((item, index) => {
                   const itemStatus = getOrderStatus(
-                    item.status.value.toString(),
+                    item?.status?.value?.toString(),
                     t
                   );
@@ -147,15 +149,15 @@ const AccountOrderDetail = ({ params }) => {
                         <div className="shrink-0">
                           <Link
                             className="block"
-                            href={item.product.absolute_url}
+                            href={item?.product?.absolute_url}
                           >
                             <Image
                               src={
-                                item.product.image
+                                item?.product?.image
                                   ? item.product.image
                                   : '/noimage.jpg'
                               }
-                              alt={item.product.name}
+                              alt={item?.product?.name}
                               width={112}
                               height={150}
                             />
@@ -164,33 +166,33 @@ const AccountOrderDetail = ({ params }) => {
                         <div className="flex flex-col justify-between lg:max-w-48">
                           <div className="text-sm">
-                            <Link href={item.product.absolute_url}>
-                              {item.product.name}
+                            <Link href={item?.product?.absolute_url}>
+                              {item?.product?.name}
                             </Link>
                           </div>
                           <div className="text-gray-900 text-xs">
-                            {item.product.attributes.filterable_color && (
+                            {item?.product?.attributes?.filterable_color && (
                               <div>
                                 <span>
                                   {t('account.my_orders.detail.color')}
                                 </span>
-                                : {item.product.attributes.filterable_color}
+                                : {item?.product?.attributes?.filterable_color}
                               </div>
                             )}
-                            {item.product.attributes.size && (
+                            {item?.product?.attributes?.size && (
                               <div>
                                 <span>
                                   {t('account.my_orders.detail.size')}
                                 </span>
-                                :{item.product.attributes.size}
+                                :{item?.product?.attributes?.size}
                               </div>
                             )}
                             <div>
                               <span>{t('account.my_orders.detail.code')}</span>:{' '}
-                              {item.product.base_code}
+                              {item?.product?.base_code}
                             </div>
                           </div>
                         </div>
@@ -207,11 +209,11 @@ const AccountOrderDetail = ({ params }) => {
                             {itemStatus.label}
                           </div>
-                          {(item.is_cancellable || item.is_refundable) &&
-                            order.is_cancellable && (
+                          {(item?.is_cancellable || item?.is_refundable) &&
+                            order?.is_cancellable && (
                               <div className="lg:ml-24">
                                 <Link
-                                  href={`${ROUTES.ACCOUNT_ORDERS}/${order.id}/cancellation`}
+                                  href={`${ROUTES.ACCOUNT_ORDERS}/${order?.id}/cancellation`}
                                 >
                                   <Button
                                     className="px-4 uppercase font-bold h-7"
@@ -227,21 +229,21 @@ const AccountOrderDetail = ({ params }) => {
                             )}
                         </div>
                         <div className="flex flex-col justify-center items-end lg:ml-6 lg:min-w-[7rem]">
-                          {parseFloat(item.retail_price) >
-                            parseFloat(item.price) && (
+                          {parseFloat(item?.retail_price || '0') >
+                            parseFloat(item?.price || '0') && (
                             <Price
                               className="font-normal line-through"
-                              value={item.retail_price}
+                              value={item?.retail_price}
                             />
                           )}
                           <Price
                             className={clsx('font-normal', {
                               'text-secondary-600':
-                                parseFloat(item.retail_price) >
-                                parseFloat(item.price)
+                                parseFloat(item?.retail_price || '0') >
+                                parseFloat(item?.price || '0')
                             })}
-                            value={item.price}
+                            value={item?.price}
                           />
                         </div>
                       </div>
@@ -325,29 +327,29 @@ const AccountOrderDetail = ({ params }) => {
           <div className="flex justify-between text-sm text-black-700 mb-2">
             <p>
               <span>{t('account.my_orders.detail.subtotal')}</span> (
-              {order.orderitem_set.length}{' '}
+              {order?.orderitem_set?.length}{' '}
               <span>{t('account.my_orders.detail.items')}</span>)
             </p>
             <Price
               className="font-normal min-w-max"
               value={
-                parseFloat(order.amount_without_discount) -
-                parseFloat(order.shipping_amount)
+                parseFloat(order?.amount_without_discount || '0') -
+                parseFloat(order?.shipping_amount || '0')
               }
             />
           </div>
-          {order.discountitem_set &&
-            order.discountitem_set.map((item, index) => (
+          {order?.discountitem_set &&
+            order?.discountitem_set?.map((item, index) => (
               <div
                 className="flex justify-between text-sm text-black-700 mb-2"
                 key={index}
               >
-                <p>{item.name}</p>
+                <p>{item?.name}</p>
                 <Price
                   className="font-normal min-w-max"
-                  value={item.amount}
+                  value={item?.amount}
                   useNegative
                 />
               </div>
@@ -360,7 +362,8 @@ const AccountOrderDetail = ({ params }) => {
               className="font-normal min-w-max"
               data-testid="account-orders-detail-total"
               value={
-                parseFloat(order.amount) - parseFloat(order.shipping_amount)
+                parseFloat(order?.amount || '0') -
+                parseFloat(order?.shipping_amount || '0')
               }
             />
           </div>

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

@@ -35,7 +35,7 @@ export const Button = (props: ButtonProps) => {
   const buttonClasses = twMerge(
     clsx(
-      'px-4 text-xs transition-all duration-200',
+      'px-4 text-xs transition-all duration-200 cursor-pointer',
       'inline-flex gap-2 justify-center items-center',
       variants[appearance],
       sizes[size],
@@ -54,7 +54,7 @@ export const Button = (props: ButtonProps) => {
       {children}
     </Link>
   ) : (
-    <button {...rest} className={buttonClasses}>
+    <button data-testid="button" {...rest} className={buttonClasses}>
       {children}
     </button>
   );

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

@@ -9,6 +9,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     <label className={twMerge('flex flex-col text-xs', props.className)}>
       <div className="flex items-center">
         <input
+          data-testid="checkbox"
           type="checkbox"
           {...rest}
           ref={ref}

package/app-template/src/settings.js CHANGED Viewed

@@ -61,5 +61,6 @@ module.exports = {
   ],
   redis: {
     defaultExpirationTime: 900 // 15 min
-  }
+  },
+  customNotFoundEnabled: false
 };

package/app-template/src/views/account/order.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ export const Order = (props) => {
     .reverse()
     .join(' ');
-  const orderStatus = getOrderStatus(props.status.value.toString(), t);
+  const orderStatus = getOrderStatus(props?.status?.value?.toString(), t);
   return (
     <div className="border border-gray px-5 py-4 text-sm mb-4 last:mb-0">
@@ -58,30 +58,32 @@ export const Order = (props) => {
         <div className="w-full flex flex-col justify-between mt-6 mb-2 order-3 md:items-center md:flex-row md:order-none md:gap-20 lg:gap-40">
           <ul className="flex flex-wrap gap-3.5 mb-6 items-center md:mb-0">
-            {props.orderitem_set.slice(0, 3).map((item, index) => (
+            {props?.orderitem_set?.slice(0, 3).map((item, index) => (
               // TODO: Static image will change (TR)
               <li className="shrink-0" key={index}>
                 <Image
-                  src={item.product.image ? item.product.image : '/noimage.jpg'}
-                  alt={item.product.name}
+                  src={
+                    item?.product?.image ? item.product.image : '/noimage.jpg'
+                  }
+                  alt={item?.product?.name}
                   width={64}
                   height={96}
                 />
               </li>
             ))}
-            {props.orderitem_set.length > 3 && (
-              <div>+ {props.orderitem_set.length - 3}</div>
+            {props?.orderitem_set?.length > 3 && (
+              <div>+ {props?.orderitem_set?.length - 3}</div>
             )}
           </ul>
-          <span className={orderStatus.className}>{orderStatus.label}</span>
+          <span className={orderStatus?.className}>{orderStatus?.label}</span>
         </div>
         <div
           className="order-2 flex items-end md:order-none"
           data-testid="account-orders-count"
         >
-          {props.orderitem_set.length} {t('account.my_orders.order.items')}
+          {props?.orderitem_set?.length} {t('account.my_orders.order.items')}
         </div>
       </div>
     </div>

package/app-template/src/views/anonymous-tracking/order-detail/index.tsx CHANGED Viewed

@@ -22,14 +22,15 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
   const groupedOrder = [];
   if (order) {
-    const groupedData = order.orderitem_set.reduce((groups, item) => {
-      const { tracking_number } = item;
-      if (!groups[tracking_number]) {
-        groups[tracking_number] = [];
-      }
-      groups[tracking_number].push(item);
-      return groups;
-    }, {});
+    const groupedData =
+      order?.orderitem_set?.reduce((groups, item) => {
+        const { tracking_number } = item;
+        if (!groups[tracking_number]) {
+          groups[tracking_number] = [];
+        }
+        groups[tracking_number].push(item);
+        return groups;
+      }, {}) || {};
     const result = Object.values(groupedData);
@@ -67,8 +68,8 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
             <div>
               <span className="text-base font-bold">
-                {order.orderitem_set.length}{' '}
-                {t('account.my_orders.detail.products')} {groupedOrder.length}{' '}
+                {order?.orderitem_set?.length}{' '}
+                {t('account.my_orders.detail.products')} {groupedOrder?.length}{' '}
                 {t('account.my_orders.detail.packages')}
               </span>
             </div>
@@ -78,17 +79,17 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
               className="break-words"
             >
               <span>{t('account.my_orders.detail.delivery_address')}</span>:{' '}
-              {order?.shipping_address.line}{' '}
-              {order?.shipping_address.district.name}{' '}
-              {order?.shipping_address.township.name}{' '}
-              {order?.shipping_address.city.name}
+              {order?.shipping_address?.line}{' '}
+              {order?.shipping_address?.district?.name}{' '}
+              {order?.shipping_address?.township?.name}{' '}
+              {order?.shipping_address?.city?.name}
             </div>
           </OrderDetailHeader>
           <div>
             {groupedOrder.map((group, i) => {
               const orderStatus = getOrderStatus(
-                group[0].status.value.toString(),
+                group[0]?.status?.value?.toString(),
                 t
               );
@@ -112,8 +113,8 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                     <div className="flex justify-between items-center lg:gap-x-12">
                       <div className="text-base">{orderStatus.label}</div>
-                      {group[0].tracking_number && group[0].tracking_url && (
-                        <Link href={group[0].tracking_url}>
+                      {group[0]?.tracking_number && group[0]?.tracking_url && (
+                        <Link href={group[0]?.tracking_url}>
                           <Button className="px-7" appearance="filled">
                             {t('account.my_orders.detail.track_shipment')}
                           </Button>
@@ -125,7 +126,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                   <div className="px-4 lg:px-7">
                     {group.map((item, index) => {
                       const itemStatus = getOrderStatus(
-                        item.status.value.toString(),
+                        item?.status?.value?.toString(),
                         t
                       );
@@ -138,15 +139,15 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                             <div className="shrink-0">
                               <Link
                                 className="block"
-                                href={item.product.absolute_url}
+                                href={item?.product?.absolute_url}
                               >
                                 <Image
                                   src={
-                                    item.product.image
+                                    item?.product?.image
                                       ? item.product.image
                                       : '/noimage.jpg'
                                   }
-                                  alt={item.product.name}
+                                  alt={item?.product?.name}
                                   width={112}
                                   height={150}
                                 />
@@ -155,27 +156,32 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                             <div className="flex flex-col justify-between lg:max-w-48">
                               <div className="text-sm">
-                                <Link href={item.product.absolute_url}>
-                                  {item.product.name}
+                                <Link href={item?.product?.absolute_url}>
+                                  {item?.product?.name}
                                 </Link>
                               </div>
                               <div className="text-gray-900 text-xs">
-                                {item.product.attributes.filterable_color && (
+                                {item?.product?.attributes
+                                  ?.filterable_color && (
                                   <div>
                                     <span>
                                       {t('account.my_orders.detail.color')}
                                     </span>
-                                    : {item.product.attributes.filterable_color}
+                                    :{' '}
+                                    {
+                                      item?.product?.attributes
+                                        ?.filterable_color
+                                    }
                                   </div>
                                 )}
-                                {item.product.attributes.size && (
+                                {item?.product?.attributes?.size && (
                                   <div>
                                     <span>
                                       {t('account.my_orders.detail.size')}
                                     </span>
-                                    :{item.product.attributes.size}
+                                    :{item?.product?.attributes?.size}
                                   </div>
                                 )}
@@ -183,7 +189,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                                   <span>
                                     {t('account.my_orders.detail.code')}
                                   </span>
-                                  : {item.product.base_code}
+                                  : {item?.product?.base_code}
                                 </div>
                               </div>
                             </div>
@@ -202,7 +208,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                               {(item.is_cancellable || item.is_refundable) &&
                                 order.is_cancellable &&
-                                item.status.value == '400' && (
+                                item?.status?.value == '400' && (
                                   <div className="lg:ml-24">
                                     <Link
                                       href={`${ROUTES.ACCOUNT_ORDERS}/${order.id}/cancellation`}
@@ -256,29 +262,29 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
               <div className="flex justify-between text-sm text-black-700 mb-2">
                 <p>
                   <span>{t('account.my_orders.detail.subtotal')}</span> (
-                  {order?.orderitem_set.length}{' '}
+                  {order?.orderitem_set?.length}{' '}
                   <span>{t('account.my_orders.detail.items')}</span>)
                 </p>
                 <Price
                   className="font-normal min-w-max"
                   value={
-                    parseFloat(order.amount_without_discount) -
-                    parseFloat(order.shipping_amount)
+                    parseFloat(order?.amount_without_discount || '0') -
+                    parseFloat(order?.shipping_amount || '0')
                   }
                 />
               </div>
-              {order.discountitem_set &&
-                order.discountitem_set.map((item, index) => (
+              {order?.discountitem_set &&
+                order?.discountitem_set?.map((item, index) => (
                   <div
                     className="flex justify-between text-sm text-black-700 mb-2"
                     key={index}
                   >
-                    <p>{item.name}</p>
+                    <p>{item?.name}</p>
                     <Price
                       className="font-normal min-w-max"
-                      value={item.amount}
+                      value={item?.amount}
                       useNegative
                     />
                   </div>
@@ -291,7 +297,8 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                   className="font-normal min-w-max"
                   data-testid="account-orders-detail-total"
                   value={
-                    parseFloat(order.amount) - parseFloat(order.shipping_amount)
+                    parseFloat(order?.amount || '0') -
+                    parseFloat(order?.shipping_amount || '0')
                   }
                 />
               </div>

package/app-template/src/views/checkout/steps/payment/options/redirection.tsx CHANGED Viewed

@@ -65,6 +65,7 @@ export default function RedirectionPayment() {
         <Checkbox
           className="px-4 md:px-0"
+          data-testid="checkout-agreement"
           {...register('agreement')}
           error={errors.agreement}
         >
@@ -88,7 +89,10 @@ export default function RedirectionPayment() {
           </div>
         )}
-        <Button className={twMerge('w-full md:w-36 px-4 md:px-0')}>
+        <Button
+          data-testid="checkout-submit-button"
+          className={twMerge('w-full md:w-36 px-4 md:px-0')}
+        >
           {payment_option.name}
         </Button>
       </form>

package/app-template/src/views/header/action-menu.tsx CHANGED Viewed

@@ -92,7 +92,11 @@ export default function ActionMenu() {
           ref={menu.miniBasket ? miniBasketRef : null}
         >
           {menu.action ? (
-            <button onClick={menu.action} data-testid={menu.dataTestId}>
+            <button
+              onClick={menu.action}
+              data-testid={menu.dataTestId}
+              className="cursor-pointer"
+            >
               <Icon name={menu.icon} size={24} />
               {menu.badge}
             </button>

package/app-template/src/views/product/price-wrapper.tsx CHANGED Viewed

@@ -13,7 +13,8 @@ export interface PriceProps {
 export default function PriceWrapper(props: PriceProps) {
   const { t } = useLocalization();
   const { price, retailPrice } = props;
-  const hasRetailPrice = parseFloat(retailPrice) > parseFloat(price);
+  const hasRetailPrice =
+    parseFloat(retailPrice || '0') > parseFloat(price || '0');
   return (
     <div className="flex items-center gap-3 justify-center h-full">
@@ -31,7 +32,11 @@ export default function PriceWrapper(props: PriceProps) {
       {hasRetailPrice && (
         <div className="flex flex-col items-center w-9 py-0.5 text-xs text-white bg-secondary">
           <span className="font-bold">
-            {Math.round(100 - (parseInt(price) / parseInt(retailPrice)) * 100)}%
+            {Math.round(
+              100 -
+                (parseInt(price || '0') / parseInt(retailPrice || '1')) * 100
+            )}
+            %
           </span>
           <span>{t('product.off')}</span>
         </div>

package/app-template/src/views/product/product-info.tsx CHANGED Viewed

@@ -23,6 +23,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [stockAlertResponseMessage, setStockAlertResponseMessage] =
     useState(null);
+  const [isVariantLoading, setIsVariantLoading] = useState(false);
   const [addProduct, { isLoading: isAddToCartLoading }] =
     useAddProductToBasket();
@@ -30,6 +31,18 @@ export default function ProductInfo({ data }: ProductPageProps) {
     useAddStockAlertMutation();
   const inStock = data.selected_variant !== null || data.product.in_stock;
+  useEffect(() => {
+    isVariantSelectionComplete() && setIsVariantLoading(false);
+    !inStock && setIsVariantLoading(false);
+  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (isVariantLoading) {
+      setProductError(null);
+    }
+  }, [isVariantLoading]);
   useEffect(() => {
     setCurrentUrl(window.location.href);
   }, [currentUrl]);
@@ -82,6 +95,12 @@ export default function ProductInfo({ data }: ProductPageProps) {
     return true;
   };
+  const isVariantSelectionComplete = () => {
+    return data?.variants.every((variant) =>
+      variant?.options.some((opt) => opt.is_selected)
+    );
+  };
   const addProductToStockAlertList = async () => {
     try {
       await addStockAlert({
@@ -174,7 +193,10 @@ export default function ProductInfo({ data }: ProductPageProps) {
             key={variant.attribute_key}
             {...variant}
             className="items-center mt-8"
-            onChange={() => setProductError(null)}
+            onChange={() => {
+              setProductError(null);
+              setIsVariantLoading(true);
+            }}
           />
         ))}
       </div>
@@ -186,7 +208,9 @@ export default function ProductInfo({ data }: ProductPageProps) {
       )}
       <Button
-        disabled={isAddToCartLoading || isAddToStockAlertLoading}
+        disabled={
+          isAddToCartLoading || isAddToStockAlertLoading || isVariantLoading
+        }
         className={clsx(
           'fixed bottom-0 right-0 w-1/2 h-14 z-20 flex items-center justify-center fill-primary-foreground',
           'hover:fill-primary sm:relative sm:w-full sm:mt-3 sm:font-semibold sm:h-12'
@@ -202,7 +226,13 @@ export default function ProductInfo({ data }: ProductPageProps) {
         }}
         data-testid="product-add-to-cart"
       >
-        {inStock ? (
+        {isVariantLoading ? (
+          <Icon
+            name="spinner"
+            size={20}
+            className="animate-spin mr-4 fill-primary"
+          />
+        ) : inStock ? (
           <span>{t('product.add_to_cart')}</span>
         ) : (
           <>

package/app-template/tailwind.config.js CHANGED Viewed

@@ -1,3 +1,4 @@
+const getAkinonNextContent = require('@akinon/next/tailwind/content');
 const deepMerge = require('@akinon/next/utils/deep-merge');
 const plugins = require('./src/plugins');
 const fs = require('fs');
@@ -18,13 +19,16 @@ if (themeName !== 'default' && fs.existsSync(themeConfigPath)) {
 const defaultConfig = {
   content: [
-    ...plugins
-      .map((plugin) => [
-        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
-        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
-      ])
-      .flat()
-  ]
+    './src/app/**/*.{js,ts,jsx,tsx}',
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
+    './src/views/**/*.{js,ts,jsx,tsx}',
+    './src/widgets/**/*.{js,ts,jsx,tsx}',
+    './src/hooks/**/*.{js,ts,jsx,tsx}',
+    './src/utils/**/*.{js,ts,jsx,tsx}',
+    ...getAkinonNextContent(plugins)
+  ],
+  plugins: [require('@tailwindcss/typography')]
 };
 if (Object.keys(themeOverrides).length === 0) {

package/codemods/update-tailwind-config/index.js ADDED Viewed

@@ -0,0 +1,30 @@
+const path = require('path');
+const jscodeshift = require('jscodeshift/src/Runner');
+const codemodScript = path.resolve(__dirname, 'transform.js');
+const transform = () => {
+  const workingDir = path.resolve(process.cwd());
+  jscodeshift
+    .run(codemodScript, [workingDir], {
+      verbose: 0,
+      dry: false,
+      print: false,
+      extensions: 'js',
+      ignorePattern: '**/node_modules/**',
+      filter: '**/tailwind.config.js'
+    })
+    .then(
+      (stats) => {
+        console.log(`Codemod completed. Stats:`, stats);
+      },
+      (error) => {
+        console.error(`Error executing codemod: ${error.message}`);
+      }
+    );
+};
+module.exports = {
+  transform
+};

package/codemods/update-tailwind-config/transform.js ADDED Viewed

@@ -0,0 +1,102 @@
+function transform(fileInfo, api) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+  if (!fileInfo.path.includes('tailwind.config.js')) {
+    return fileInfo.source;
+  }
+  console.log(`Processing file: ${fileInfo.path}`);
+  const hasAkinonNextImport = root.find(j.VariableDeclarator, {
+    id: { name: 'getAkinonNextContent' }
+  });
+  if (hasAkinonNextImport.size() === 0) {
+    const requireStatement = j.variableDeclaration('const', [
+      j.variableDeclarator(
+        j.identifier('getAkinonNextContent'),
+        j.callExpression(j.identifier('require'), [
+          j.literal('@akinon/next/tailwind/content')
+        ])
+      )
+    ]);
+    root.get().node.program.body.unshift(requireStatement);
+    console.log(`Added getAkinonNextContent import to ${fileInfo.path}`);
+  }
+  const defaultConfig = root
+    .find(j.VariableDeclarator, {
+      id: { name: 'defaultConfig' },
+      init: { type: 'ObjectExpression' }
+    })
+    .paths()[0];
+  if (!defaultConfig) {
+    console.log(`No defaultConfig found in ${fileInfo.path}`);
+    return fileInfo.source;
+  }
+  const contentArray = defaultConfig.value.init.properties.find(
+    (prop) =>
+      prop.key.name === 'content' && prop.value.type === 'ArrayExpression'
+  );
+  if (!contentArray) {
+    console.log(`No content array found in defaultConfig`);
+    return fileInfo.source;
+  }
+  const pluginsVarName = root
+    .find(j.VariableDeclarator, {
+      id: { name: 'plugins' },
+      init: {
+        type: 'CallExpression',
+        callee: { name: 'require' }
+      }
+    })
+    .paths()[0]?.value.id.name;
+  if (!pluginsVarName) {
+    console.log(`No plugins variable found in ${fileInfo.path}`);
+    return fileInfo.source;
+  }
+  const contentElements = contentArray.value.elements;
+  const filteredElements = contentElements.filter((element) => {
+    if (element.type === 'SpreadElement') {
+      if (
+        element.argument.type === 'CallExpression' &&
+        element.argument.callee.object?.callee.object.name === 'plugins'
+      ) {
+        return false;
+      }
+      if (
+        element.argument.type === 'CallExpression' &&
+        element.argument.callee.name === 'getAkinonNextContent'
+      ) {
+        return false;
+      }
+    }
+    return true;
+  });
+  filteredElements.push(
+    j.spreadElement(
+      j.callExpression(j.identifier('getAkinonNextContent'), [
+        j.identifier(pluginsVarName)
+      ])
+    )
+  );
+  contentArray.value.elements = filteredElements;
+  console.log(`Successfully updated ${fileInfo.path}`);
+  return root.toSource();
+}
+module.exports = transform;

package/commands/codemod.ts CHANGED Viewed

@@ -5,7 +5,6 @@ const { hideBin } = require('yargs/helpers');
 const args = yargs(hideBin(process.argv)).argv;
 export default () => {
-  const workingDir = path.resolve(process.cwd());
   const codemodName = args.codemod;
   const codemodPath = path.resolve(
     __dirname,

package/commands/plugins.ts CHANGED Viewed

@@ -2,8 +2,7 @@ import * as fs from 'fs';
 import path from 'path';
 import { execSync } from 'child_process';
 import semver from 'semver';
-const Prompt = require('prompt-checkbox');
+import { checkbox } from '@inquirer/prompts';
 const rootDir = path.resolve(process.cwd());
@@ -120,36 +119,25 @@ export default async () => {
     }
   ];
-  const prompt = new Prompt({
-    name: 'plugins',
-    message: 'Please check/uncheck plugins to install/uninstall.',
-    type: 'checkbox',
-    default: installedPlugins.map((p) =>
-      definedPlugins.findIndex((dp) => dp.value === p)
-    ),
-    choices: definedPlugins.map((p, index) => `${index + 1}) ${p.name}`)
-  });
-  prompt.ask(async (answers: Array<string>) => {
-    const formattedAnswers = answers.map((answer) =>
-      answer.replace(/\d\)\s/, '')
-    );
-    const values = formattedAnswers.map(
-      (answer) => definedPlugins.find((p) => p.name === answer)?.value
-    );
-    if (formattedAnswers.length) {
-      console.log(`\nInstalling ${formattedAnswers.join(', ')}.`);
-    } else {
-      console.log(`\nUninstalling all plugins.`);
+  try {
+    const answers = await checkbox({
+      message: 'Please check/uncheck plugins to install/uninstall.',
+      choices: definedPlugins.map((plugin) => ({
+        name: plugin.name,
+        value: plugin.value,
+        checked: installedPlugins.includes(plugin.value)
+      }))
+    });
+    if (!answers.length) {
+      console.log('\x1b[33m%s\x1b[0m', `\nUninstalling all plugins.`);
     }
-    console.log(`\nPlease wait...`);
+    console.log('\x1b[36m%s\x1b[0m', `\nPlease wait...`);
     fs.writeFileSync(
       pluginsFilePath,
-      `module.exports = ${JSON.stringify(values)};\n`,
+      `module.exports = ${JSON.stringify(answers)};\n`,
       {
         encoding: 'utf-8'
       }
@@ -159,11 +147,13 @@ export default async () => {
     console.log(
       '\x1b[32m%s\x1b[0m',
-      `\n ✓ ${
-        formattedAnswers.length
+      `\n✓ ${
+        answers.length
           ? 'Installed selected plugins'
           : 'Uninstalled all plugins'
       }.\n`
     );
-  });
+  } catch (error) {
+    process.exit(1);
+  }
 };

package/dist/commands/codemod.js CHANGED Viewed

@@ -8,7 +8,6 @@ const yargs = require('yargs/yargs');
 const { hideBin } = require('yargs/helpers');
 const args = yargs(hideBin(process.argv)).argv;
 exports.default = () => {
-    const workingDir = path_1.default.resolve(process.cwd());
     const codemodName = args.codemod;
     const codemodPath = path_1.default.resolve(__dirname, `../../codemods/${codemodName}/index.js`);
     const codemod = require(codemodPath);

package/dist/commands/plugins.js CHANGED Viewed

@@ -49,7 +49,7 @@ const fs = __importStar(require("fs"));
 const path_1 = __importDefault(require("path"));
 const child_process_1 = require("child_process");
 const semver_1 = __importDefault(require("semver"));
-const Prompt = require('prompt-checkbox');
+const prompts_1 = require("@inquirer/prompts");
 const rootDir = path_1.default.resolve(process.cwd());
 function checkVersion(pkg) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -143,29 +143,28 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             value: 'pz-tamara-extension'
         }
     ];
-    const prompt = new Prompt({
-        name: 'plugins',
-        message: 'Please check/uncheck plugins to install/uninstall.',
-        type: 'checkbox',
-        default: installedPlugins.map((p) => definedPlugins.findIndex((dp) => dp.value === p)),
-        choices: definedPlugins.map((p, index) => `${index + 1}) ${p.name}`)
-    });
-    prompt.ask((answers) => __awaiter(void 0, void 0, void 0, function* () {
-        const formattedAnswers = answers.map((answer) => answer.replace(/\d\)\s/, ''));
-        const values = formattedAnswers.map((answer) => { var _a; return (_a = definedPlugins.find((p) => p.name === answer)) === null || _a === void 0 ? void 0 : _a.value; });
-        if (formattedAnswers.length) {
-            console.log(`\nInstalling ${formattedAnswers.join(', ')}.`);
-        }
-        else {
-            console.log(`\nUninstalling all plugins.`);
+    try {
+        const answers = yield (0, prompts_1.checkbox)({
+            message: 'Please check/uncheck plugins to install/uninstall.',
+            choices: definedPlugins.map((plugin) => ({
+                name: plugin.name,
+                value: plugin.value,
+                checked: installedPlugins.includes(plugin.value)
+            }))
+        });
+        if (!answers.length) {
+            console.log('\x1b[33m%s\x1b[0m', `\nUninstalling all plugins.`);
         }
-        console.log(`\nPlease wait...`);
-        fs.writeFileSync(pluginsFilePath, `module.exports = ${JSON.stringify(values)};\n`, {
+        console.log('\x1b[36m%s\x1b[0m', `\nPlease wait...`);
+        fs.writeFileSync(pluginsFilePath, `module.exports = ${JSON.stringify(answers)};\n`, {
             encoding: 'utf-8'
         });
         (0, child_process_1.execSync)('yarn install', { stdio: 'pipe' });
-        console.log('\x1b[32m%s\x1b[0m', `\n ✓ ${formattedAnswers.length
+        console.log('\x1b[32m%s\x1b[0m', `\n✓ ${answers.length
             ? 'Installed selected plugins'
             : 'Uninstalled all plugins'}.\n`);
-    }));
+    }
+    catch (error) {
+        process.exit(1);
+    }
 });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {
@@ -19,8 +19,9 @@
     "@types/temp": "0.9.4"
   },
   "dependencies": {
+    "jscodeshift": "^0.15.1",
+    "@inquirer/prompts": "7.5.0",
     "loading-spinner": "1.2.1",
-    "prompt-checkbox": "2.2.0",
     "semver": "7.6.2",
     "temp": "0.9.4",
     "yargs": "^17.6.0"