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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.12",
   "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"