@akinon/projectzero 1.52.0-rc.0 → 1.53.0

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -5,12 +5,9 @@ import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutPaymentOption } from '@akinon/next/types';
 import { Radio } from '@theme/components';
 import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
-import { useMemo } from 'react';
 
 const PaymentOptionButtons = () => {
-  const { preOrder, attributeBasedShippingOptions } = useAppSelector(
-    (state: RootState) => state.checkout
-  );
+  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
   const [setPaymentOption] = useSetPaymentOptionMutation();
   const { filteredPaymentOptions } = usePaymentOptions();
 
@@ -25,23 +22,10 @@ const PaymentOptionButtons = () => {
     });
   };
 
-  const displayedPaymentOptions = useMemo(() => {
-    if (
-      attributeBasedShippingOptions &&
-      Object.keys(attributeBasedShippingOptions).length > 0
-    ) {
-      return filteredPaymentOptions.filter(
-        (option) => option.slug.toLowerCase() !== 'pay-on-delivery'
-      );
-    }
-
-    return filteredPaymentOptions;
-  }, [filteredPaymentOptions, attributeBasedShippingOptions]);
-
   return (
     <>
       <div className="w-full space-y-4 px-4 flex flex-col mb-8 md:hidden">
-        {displayedPaymentOptions.map((option) => (
+        {filteredPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
             className="border px-4 py-3 mt-3 flex h-12"
@@ -63,7 +47,7 @@ const PaymentOptionButtons = () => {
       </div>
 
       <div className="hidden md:flex">
-        {displayedPaymentOptions.map((option) => (
+        {filteredPaymentOptions.map((option) => (
           <button
             key={`payment-option-${option.pk}`}
             onClick={() => onClickHandler(option)}

package/app-template/src/views/checkout/steps/shipping/address-box.tsx

@@ -85,7 +85,7 @@ const AddressBox = ({
   };
 
   const onSubmit = (data) => {
-    editAddress({ ...data, invalidateTag: 'Addresses' })
+    editAddress(data)
       .unwrap()
       .then((editAddressResponse) => {
         handleAddressClick(addressType, editAddressResponse);
@@ -96,7 +96,7 @@ const AddressBox = ({
   };
 
   const handleRemoveAddress = async (addressPk: number) => {
-    await removeAddress({ id: addressPk, invalidateTag: 'Addresses' });
+    await removeAddress(addressPk);
     setRemoveAddressModalOpen(false);
     dispatch(resetCheckoutState());
 

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -77,7 +77,7 @@ const Addresses = () => {
   }, [billing_and_shipping_same]);
 
   const onSubmit = (data) => {
-    addAddress({ ...data, invalidateTag: 'Addresses' })
+    addAddress(data)
       .unwrap()
       .then((addAddressResponse) => {
         if (addressList.length === 0) {

package/app-template/src/views/checkout/steps/shipping/shipping-options.tsx

@@ -1,174 +1,38 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  setCurrentStep,
-  setSelectedShippingOptions
-} from '@akinon/next/redux/reducers/checkout';
+import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
-import {
-  useSetShippingOptionMutation,
-  useSetAttributeBasedShippingOptionsMutation,
-  useSetDataSourceShippingOptionsMutation
-} from '@akinon/next/data/client/checkout';
+import { useSetShippingOptionMutation } from '@akinon/next/data/client/checkout';
 import { Price, Button, Radio } from '@theme/components';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
 
-const ShippingOptions: React.FC = () => {
+const ShippingOptions = () => {
   const { t } = useLocalization();
-  const dispatch = useAppDispatch();
-  const {
-    steps,
-    shippingOptions,
-    attributeBasedShippingOptions,
-    dataSourceShippingOptions,
-    preOrder,
-    addressList,
-    selectedShippingOptions
-  } = useAppSelector((state: RootState) => state.checkout);
-  const {
-    shipping_option,
-    shipping_address,
-    attribute_based_shipping_options,
-    data_source_shipping_options
-  } = preOrder ?? {};
-
-  const [setShippingOption] = useSetShippingOptionMutation();
-  const [setAttributeBasedShippingOptions] =
-    useSetAttributeBasedShippingOptionsMutation();
-  const [setDataSourceShippingOption] =
-    useSetDataSourceShippingOptionsMutation();
-
-  const prevAttributeBasedOptionsRef = useRef(attributeBasedShippingOptions);
-
-  const [selectedPks, setSelectedPks] = useState<
-    { dataSourcePk: number; optionPk: number }[] | null
-  >(null);
-
-  const initializeSelectedOptions = useCallback(() => {
-    if (attribute_based_shipping_options) {
-      const newSelected = { ...selectedShippingOptions };
-      let hasChanges = false;
-
-      Object.entries(attributeBasedShippingOptions).forEach(
-        ([color, options]) => {
-          if (
-            !newSelected[color] ||
-            !options.some((opt) => opt.pk === newSelected[color])
-          ) {
-            newSelected[color] = options[0].pk;
-            hasChanges = true;
-          }
-        }
-      );
-
-      if (hasChanges) {
-        dispatch(setSelectedShippingOptions(newSelected));
-        setAttributeBasedShippingOptions(newSelected);
-      }
-    } else if (shippingOptions.length > 0 && !shipping_option) {
-      setShippingOption(shippingOptions[0].pk);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    attributeBasedShippingOptions,
-    selectedShippingOptions,
-    setAttributeBasedShippingOptions,
-    attribute_based_shipping_options,
-    shippingOptions,
-    shipping_option,
-    setShippingOption
-  ]);
-
-  useEffect(() => {
-    if (!data_source_shipping_options) return;
-
-    const initialSelectedPks = data_source_shipping_options.map((option) => ({
-      dataSourcePk: option.data_source.pk,
-      optionPk: option.pk
-    }));
-
-    setSelectedPks(initialSelectedPks);
-  }, [data_source_shipping_options]);
-
-  useEffect(() => {
-    if (
-      JSON.stringify(prevAttributeBasedOptionsRef.current) !==
-        JSON.stringify(attributeBasedShippingOptions) ||
-      Object.keys(selectedShippingOptions).length === 0 ||
-      (!shipping_option && shippingOptions.length > 0)
-    ) {
-      initializeSelectedOptions();
-      prevAttributeBasedOptionsRef.current = attributeBasedShippingOptions;
-    }
-  }, [
-    attributeBasedShippingOptions,
-    selectedShippingOptions,
-  initializeSelectedOptions,
-    shipping_option,
-    shippingOptions
-  ]);
-
-  const handleAttributeBasedOptionChange = useCallback(
-    (color: string, newPk: number) => {
-      const updatedOptions = { ...selectedShippingOptions, [color]: newPk };
-      dispatch(setSelectedShippingOptions(updatedOptions));
-      setAttributeBasedShippingOptions(updatedOptions);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedShippingOptions, setAttributeBasedShippingOptions]
+  const { steps, shippingOptions, preOrder, addressList } = useAppSelector(
+    (state: RootState) => state.checkout
   );
-
-  if (addressList.length < 1) {
-    return (
-      <div className="w-full lg:w-2/5">
-        <div className="border-b border-gray-400 px-8 py-4">
-          <h2 className="text-2xl">{t('checkout.address.shipping.title')}</h2>
-        </div>
-        <div className="py-4 px-8">
-          <p className="text-xs">
-            {t('checkout.address.shipping.select_address_to_continue')}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  const updateData = (dataSourcePk: number, newPk: number) => {
-    const updatedSelectedPks = selectedPks?.map((item) =>
-      item.dataSourcePk === dataSourcePk ? { ...item, optionPk: newPk } : item
-    );
-
-    if (!updatedSelectedPks) return;
-
-    setSelectedPks(updatedSelectedPks);
-
-    const pks = updatedSelectedPks.map((item) => item.optionPk);
-    setDataSourceShippingOption(pks);
-  };
-
-  const handleRadioChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    dataSourcePk: number
-  ) => {
-    const newPk = parseInt(e.currentTarget.value);
-    updateData(dataSourcePk, newPk);
-  };
+  const { shipping_option, shipping_address } = preOrder ?? {};
+  const [setShippingOption] = useSetShippingOptionMutation();
+  const dispatch = useAppDispatch();
 
   return (
     <div className="w-full lg:w-2/5">
       <div className="border-b border-gray-400 px-8 py-4">
         <h2 className="text-2xl">{t('checkout.address.shipping.title')}</h2>
       </div>
-      <div className="py-4 px-6">
-        <p className="text-xs border-gray-400 pb-4">
-          {t('checkout.address.shipping.chosen_address')}:{' '}
-          {shipping_address?.city.name}
-        </p>
-
-        {shippingOptions &&
-          shippingOptions.length > 0 &&
-          shippingOptions.map((option) => (
+      {addressList.length < 1 ? (
+        <div className="py-4 px-8">
+          <p className="text-xs">
+            {t('checkout.address.shipping.select_address_to_continue')}
+          </p>
+        </div>
+      ) : (
+        <div className="py-4 px-6">
+          <p className="text-xs border-gray-400 pb-4">
+            {t('checkout.address.shipping.chosen_address')}:{' '}
+            {shipping_address?.city.name}
+          </p>
+          {shippingOptions.map((option) => (
             <div
               key={option.pk}
               className="py-4 border-t border-gray-400 flex justify-between"
@@ -176,7 +40,12 @@ const ShippingOptions: React.FC = () => {
               <Radio
                 name="shipping"
                 checked={option.pk === shipping_option?.pk}
-                onChange={() => setShippingOption(option.pk)}
+                onChange={() => {
+                  setShippingOption(option.pk);
+                }}
+                onClick={() => {
+                  setShippingOption(option?.pk);
+                }}
                 data-testid={`checkout-shipping-option-${option.pk}`}
               >
                 {option.name}
@@ -186,78 +55,16 @@ const ShippingOptions: React.FC = () => {
               </span>
             </div>
           ))}
-
-        {attributeBasedShippingOptions &&
-          Object.keys(attributeBasedShippingOptions).length > 0 &&
-          Object.entries(attributeBasedShippingOptions).map(
-            ([color, options]) => (
-              <div key={color}>
-                <h3 className="text-lg font-bold">{color}</h3>
-                {options.map((option) => (
-                  <div
-                    key={option.pk}
-                    className="py-4 border-t border-gray-400 flex justify-between"
-                  >
-                    <Radio
-                      name={`attribute-based-shipping-${color}`}
-                      checked={selectedShippingOptions[color] === option.pk}
-                      onChange={() =>
-                        handleAttributeBasedOptionChange(color, option.pk)
-                      }
-                      data-testid={`checkout-attribute-based-shipping-${option.pk}`}
-                    >
-                      {`${option.shipping_option_name}`}
-                    </Radio>
-                    <span className="text-xs">
-                      <Price value={option.shipping_amount} />
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )
-          )}
-
-        {dataSourceShippingOptions &&
-          dataSourceShippingOptions.length > 0 &&
-          dataSourceShippingOptions.map((option) => (
-            <div key={option.pk}>
-              <h3 className="text-lg font-bold">{option?.name}</h3>
-              {option.data_source_shipping_options.map((opt) => (
-                <div
-                  key={opt.pk}
-                  className="py-4 border-t border-gray-400 flex justify-between"
-                >
-                  <Radio
-                    name={`data-source-shipping-${option.pk}`}
-                    checked={
-                      selectedPks?.some((item) => item.optionPk === opt.pk) ||
-                      false
-                    }
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleRadioChange(e, option.pk)
-                    }
-                    value={opt.pk}
-                    data-testid={`checkout-data-source-shipping-${opt.pk}`}
-                  >
-                    {opt?.shipping_option_name}
-                  </Radio>
-                  <span className="text-xs">
-                    <Price value={opt?.shipping_amount} />
-                  </span>
-                </div>
-              ))}
-            </div>
-          ))}
-
-        <Button
-          className="mt-2 w-full"
-          disabled={!steps.shipping.completed}
-          onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
-          data-testid="checkout-shipping-save"
-        >
-          {t('checkout.address.shipping.button')}
-        </Button>
-      </div>
+          <Button
+            className="mt-2 w-full"
+            disabled={!steps.shipping.completed}
+            onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
+            data-testid="checkout-shipping-save"
+          >
+            {t('checkout.address.shipping.button')}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

package/app-template/src/views/header/mobile-menu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState } from 'react';
 import { MenuItemType } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { closeMobileMenu } from '@akinon/next/redux/reducers/header';
@@ -32,30 +32,9 @@ export default function MobileMenu(props: MobileMenuProps) {
     (state) => state.header.isMobileMenuOpen
   );
 
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        isMobileMenuOpen &&
-        menuRef.current &&
-        !menuRef.current.contains(event.target as Node)
-      ) {
-        dispatch(closeMobileMenu());
-        setSelectedSubMenu(null);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMobileMenuOpen]);
-
   return (
     <>
+      {/* MENU OVERLAY */}
       <div
         className={clsx(
           'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black bg-opacity-80 transition duration-500',
@@ -63,10 +42,14 @@ export default function MobileMenu(props: MobileMenuProps) {
             '!visible !opacity-100 scroll-lock': isMobileMenuOpen
           }
         )}
+        // TODO: Remove this after we have a better solution for clicking outside of the menu
+        onClick={() => {
+          dispatch(closeMobileMenu());
+          setSelectedSubMenu(null);
+        }}
       />
-
+      {/* TODO: Add a way to close the menu when clicking outside of it */}
       <div
-        ref={menuRef}
         className={clsx(
           'fixed top-0 left-0 z-50 flex flex-col bg-white w-72 pt-4 h-screen invisible opacity-0 transition duration-500 transform -translate-x-72',
           {

package/app-template/tsconfig.json

@@ -3,19 +3,7 @@
   "display": "Default",
   "compilerOptions": {
     "baseUrl": "./src",
-    "paths": {
-      "@theme/*": ["./*"],
-      "@root/*": ["./app/[commerce]/[locale]/[currency]/*"],
-      "@product/*": ["./app/[commerce]/[locale]/[currency]/product/*"],
-      "@group-product/*": [
-        "./app/[commerce]/[locale]/[currency]/group-product/*"
-      ],
-      "@category/*": ["./app/[commerce]/[locale]/[currency]/category/*"],
-      "@special-page/*": [
-        "./app/[commerce]/[locale]/[currency]/special-page/*"
-      ],
-      "@flat-page/*": ["./app/[commerce]/[locale]/[currency]/flat-page/*"]
-    },
+    "paths": { "@theme/*": ["./*"] },
     "allowSyntheticDefaultImports": true,
     "composite": false,
     "declaration": true,
@@ -52,5 +40,7 @@
     ".next/types/**/*.ts",
     "../../packages/**/*"
   ],
-  "exclude": ["node_modules", "../../packages/projectzero/app-template"]
+  "exclude": ["node_modules",
+    "../../packages/projectzero/app-template"
+  ]
 }

package/commands/create.ts

@@ -3,7 +3,6 @@ import * as fs from 'fs';
 import * as readline from 'readline';
 import { slugify } from '../utils';
 
-const { execSync } = require('child_process');
 const loadingSpinner = require('loading-spinner');
 
 interface Question {
@@ -140,8 +139,7 @@ export default async (): Promise<void> => {
   const answers = await getAnswers();
   const brandName =
     answers.brandName === '.' ? path.basename(workingDir) : answers.brandName;
-  const projectDir = answers.brandName === '.' ? workingDir : path.resolve(workingDir, slugify(brandName));
-  const relativeProjectDir = answers.brandName === '.' ? '.' : slugify(brandName);
+  const projectDir = path.resolve(workingDir, slugify(brandName));
 
   if (!fs.existsSync(projectDir)) {
     fs.mkdirSync(projectDir, { recursive: true });
@@ -176,34 +174,12 @@ export default async (): Promise<void> => {
     name: slugify(brandName)
   });
 
-
-  console.log('\x1b[34m%s\x1b[0m', '\n🚀 Installing packages...\n');
-
-  execSync(`cd ${relativeProjectDir} && yarn install`, { stdio: 'ignore' });
-
   loadingSpinner.stop();
 
-  const successMessage = `
-✨ ${brandName} project is ready at \x1b[4m${projectDir}\x1b[0m
-
-Within the directory, the following commands are available:
-
-  \x1b[35m$ yarn dev\x1b[0m
-    \x1b[32mLaunches the development server.\x1b[0m
-
-  \x1b[35m$ yarn build\x1b[0m
-    \x1b[32mCompiles the app into static files for production.\x1b[0m
-
-  \x1b[35m$ yarn start\x1b[0m
-    \x1b[32mRuns the production server.\x1b[0m
-`;
-
-  const getStartedMessage = answers.brandName === '.'
-    ? 'To get started, you can type:\n\n  \x1b[35m$ yarn dev\x1b[0m\n'
-    : `To get started, you can type:\n\n  \x1b[35m$ cd ${relativeProjectDir}\x1b[0m\n  \x1b[35m$ yarn dev\x1b[0m\n`;
+  console.log(
+    '\x1b[32m%s\x1b[0m',
+    `\n ✓ ${answers.brandName} project is ready.\n`
+  );
 
-  console.log('\x1b[32m%s\x1b[0m', successMessage);
-  console.log('\x1b[36m%s\x1b[0m', getStartedMessage);
-  console.log('\x1b[33m%s\x1b[0m', 'Project setup is complete\n');
   console.log('\x1b[33m%s\x1b[0m', 'Project Zero - Akinon\n');
 };

package/dist/commands/create.js

@@ -39,7 +39,6 @@ const path_1 = __importDefault(require("path"));
 const fs = __importStar(require("fs"));
 const readline = __importStar(require("readline"));
 const utils_1 = require("../utils");
-const { execSync } = require('child_process');
 const loadingSpinner = require('loading-spinner');
 const workingDir = path_1.default.resolve(process.cwd());
 const rl = readline.createInterface({
@@ -132,8 +131,7 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
     }
     const answers = yield getAnswers();
     const brandName = answers.brandName === '.' ? path_1.default.basename(workingDir) : answers.brandName;
-    const projectDir = answers.brandName === '.' ? workingDir : path_1.default.resolve(workingDir, (0, utils_1.slugify)(brandName));
-    const relativeProjectDir = answers.brandName === '.' ? '.' : (0, utils_1.slugify)(brandName);
+    const projectDir = path_1.default.resolve(workingDir, (0, utils_1.slugify)(brandName));
     if (!fs.existsSync(projectDir)) {
         fs.mkdirSync(projectDir, { recursive: true });
     }
@@ -156,28 +154,7 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
     updateFileContents(path_1.default.join(projectDir, 'package.json'), {
         name: (0, utils_1.slugify)(brandName)
     });
-    console.log('\x1b[34m%s\x1b[0m', '\n🚀 Installing packages...\n');
-    execSync(`cd ${relativeProjectDir} && yarn install`, { stdio: 'ignore' });
     loadingSpinner.stop();
-    const successMessage = `
-✨ ${brandName} project is ready at \x1b[4m${projectDir}\x1b[0m
-
-Within the directory, the following commands are available:
-
-  \x1b[35m$ yarn dev\x1b[0m
-    \x1b[32mLaunches the development server.\x1b[0m
-
-  \x1b[35m$ yarn build\x1b[0m
-    \x1b[32mCompiles the app into static files for production.\x1b[0m
-
-  \x1b[35m$ yarn start\x1b[0m
-    \x1b[32mRuns the production server.\x1b[0m
-`;
-    const getStartedMessage = answers.brandName === '.'
-        ? 'To get started, you can type:\n\n  \x1b[35m$ yarn dev\x1b[0m\n'
-        : `To get started, you can type:\n\n  \x1b[35m$ cd ${relativeProjectDir}\x1b[0m\n  \x1b[35m$ yarn dev\x1b[0m\n`;
-    console.log('\x1b[32m%s\x1b[0m', successMessage);
-    console.log('\x1b[36m%s\x1b[0m', getStartedMessage);
-    console.log('\x1b[33m%s\x1b[0m', 'Project setup is complete\n');
+    console.log('\x1b[32m%s\x1b[0m', `\n ✓ ${answers.brandName} project is ready.\n`);
     console.log('\x1b[33m%s\x1b[0m', 'Project Zero - Akinon\n');
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "1.52.0-rc.0",
+  "version": "1.53.0",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {
@@ -19,7 +19,7 @@
     "@types/temp": "0.9.4"
   },
   "dependencies": {
-    "loading-spinner": "^1.2.1",
+    "loading-spinner": "1.2.1",
     "prompt-checkbox": "2.2.0",
     "semver": "7.6.2",
     "temp": "0.9.4",

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

@@ -1,8 +0,0 @@
-import Page, {
-  dynamic,
-  revalidate,
-  generateMetadata
-} from '@akinon/next/routes/pretty-url';
-
-export { dynamic, revalidate, generateMetadata };
-export default Page;