@akinon/next 1.11.0 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @akinon/next
 
+## 1.12.0
+
+### Minor Changes
+
+- ZERO-2314: Add endpoints for B2B Basket
+- ZERO-2340: Add LazyComponent
+- ZERO-2366: Add email parameter to addStockAlert query
+- ZERO-2361: Add BKM Express to plugin module system
+- ZERO-2365: Add dependency control script
+- ZERO-2341: Add ReactPortal component
+
 ## 1.11.0
 
 ### Minor Changes

package/bin/pz-check-dependencies.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const semver = require('semver');
+
+function checkDir() {
+  let currentDir = __dirname;
+
+  while (currentDir !== path.resolve(currentDir, '..')) {
+    if (
+      fs.existsSync(
+        path.join(currentDir, 'node_modules/@akinon/next/package.json')
+      )
+    ) {
+      return currentDir;
+    }
+    currentDir = path.resolve(currentDir, '..');
+  }
+
+  return path.resolve(__dirname, '../../../../');
+}
+
+const BASE_DIR = checkDir();
+
+try {
+  const akinonNextPackagePath = fs.existsSync(
+    path.join(BASE_DIR, 'packages/akinon-next/package.json')
+  )
+    ? path.join(BASE_DIR, 'packages/akinon-next/package.json')
+    : path.join(BASE_DIR, 'node_modules/@akinon/next/package.json');
+
+  let akinonNextPackage = JSON.parse(
+    fs.readFileSync(akinonNextPackagePath, 'utf8')
+  );
+
+  const projectZeroPwaPackagePath = path.join(BASE_DIR, 'package.json');
+
+  const projectZeroPwaPackage = JSON.parse(
+    fs.readFileSync(projectZeroPwaPackagePath, 'utf8')
+  );
+
+  const { peerDependencies } = akinonNextPackage;
+
+  let hasErrors = false;
+
+  let errorMessages = [];
+
+  for (const dependency in peerDependencies) {
+    const requiredVersion = peerDependencies[dependency];
+
+    const installedVersion =
+      projectZeroPwaPackage.dependencies[dependency] ||
+      projectZeroPwaPackage.devDependencies[dependency];
+
+    if (!installedVersion) {
+      errorMessages.push(
+        `Dependency ${dependency} is missing in projectzeropwa.`
+      );
+      hasErrors = true;
+    } else {
+      const requiredSemver = semver.coerce(requiredVersion);
+
+      const installedSemver = semver.coerce(installedVersion);
+
+      if (!requiredSemver || !installedSemver) {
+        errorMessages.push(
+          `Invalid semver for ${dependency}: required ${requiredVersion}, found ${installedVersion}`
+        );
+        hasErrors = true;
+      } else if (
+        requiredSemver.major !== installedSemver.major ||
+        requiredSemver.minor !== installedSemver.minor
+      ) {
+        errorMessages.push(
+          `Version mismatch for ${dependency}: expected ${requiredVersion} or higher but found ${installedVersion}`
+        );
+        hasErrors = true;
+      }
+    }
+  }
+
+  if (hasErrors) {
+    console.error(
+      '\x1b[31mDependency errors found:\n' +
+        errorMessages.join('\n') +
+        '\x1b[0m'
+    );
+    process.exit(1);
+  }
+
+  console.log(
+    'All dependencies are installed and compatible in projectzeropwa.'
+  );
+} catch (error) {
+  console.error('\x1b[31mError:', error.message + '\x1b[0m');
+  process.exit(1);
+}

package/bin/pz-install-plugins.js

@@ -15,7 +15,7 @@ try {
 let installCmd = [];
 
 availablePlugins
-  .filter((p) => plugins.includes(p))
+  .filter((p) => plugins?.includes(p))
   .forEach((name) => {
     installCmd.push(`git+https://bitbucket.org/akinonteam/${name}`);
   });

package/bin/pz-install-theme.js

@@ -2,15 +2,31 @@
 
 const fs = require('fs');
 const path = require('path');
+const spawn = require('cross-spawn');
+
+function findBaseDir() {
+  const insideNodeModules = __dirname.includes('node_modules');
+
+  if (insideNodeModules) {
+    return path.resolve(__dirname, '../../../../');
+  } else {
+    return path.resolve(__dirname, '../../../apps/projectzeropwa');
+  }
+}
+
+const BASE_DIR = findBaseDir();
 
-const BASE_DIR =
-  path.resolve(__dirname, '../../../apps/projectzeropwa') || process.cwd();
 const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
 
-const theme = require(getFullPath('src/theme.js'));
+let theme;
+try {
+  theme = require(getFullPath('src/theme.js'));
+} catch (error) {
+  console.error('Error loading theme.js:', error.message);
+  process.exit(1);
+}
 
 try {
-  const spawn = require('cross-spawn');
   const tsConfigPath = getFullPath('tsconfig.json');
 
   if (!fs.existsSync(tsConfigPath)) {
@@ -31,11 +47,12 @@ try {
 
   fs.writeFileSync(tsConfigPath, newContent);
 
-  if (fs.existsSync(getFullPath('../../turbo.json'))) {
+  if (fs.existsSync(getFullPath('turbo.json'))) {
     spawn.sync('turbo', ['clean'], {
       stdio: 'inherit'
     });
   }
 } catch (error) {
-  console.error('Error:', error.message);
+  console.error('Error modifying tsconfig.json:', error.message);
+  process.exit(1);
 }

package/bin/pz-postinstall.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 
-const spawn = require('cross-spawn');
+const runScript = require('./run-script');
 
-spawn.sync('pz-install-plugins', [], { stdio: 'inherit' });
+runScript('pz-check-dependencies.js');
+runScript('pz-install-plugins.js');

package/bin/pz-prebuild.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
 
-const spawn = require('cross-spawn');
-
-spawn.sync('pz-install-theme', [], { stdio: 'inherit' });
+const runScript = require('./run-script');
+runScript('pz-install-theme.js');

package/bin/pz-predev.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
 
-const spawn = require('cross-spawn');
-
-spawn.sync('pz-install-theme', [], { stdio: 'inherit' });
+const runScript = require('./run-script');
+runScript('pz-install-theme.js');

package/bin/run-script.js

@@ -0,0 +1,44 @@
+const spawn = require('cross-spawn');
+const path = require('path');
+const fs = require('fs');
+
+function runScript(scriptName) {
+  let currentPath;
+
+  const monorepoPath = path.join(
+    process.cwd(),
+    '../../packages/akinon-next/bin',
+    scriptName
+  );
+
+  const standardRepoPath = path.join(
+    process.cwd(),
+    'node_modules/@akinon/next/bin',
+    scriptName
+  );
+
+  if (fs.existsSync(monorepoPath)) {
+    currentPath = monorepoPath;
+  } else if (fs.existsSync(standardRepoPath)) {
+    currentPath = standardRepoPath;
+  } else {
+    console.error(`Unable to find the ${scriptName} file`);
+    return;
+  }
+
+  const result = spawn.sync('node', [currentPath], { stdio: 'inherit' });
+
+  if (result.error) {
+    console.error(`Error executing ${scriptName}:`, result.error);
+    process.exit(1);
+  }
+
+  if (result.status !== 0) {
+    console.error(
+      `Script ${scriptName} failed with exit code ${result.status}`
+    );
+    process.exit(result.status);
+  }
+}
+
+module.exports = runScript;

package/components/index.ts

@@ -0,0 +1 @@
+export * from './react-portal';

package/components/lazy-component.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+interface LazyComponentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function LazyComponent({
+  children,
+  className
+}: LazyComponentProps) {
+  const [isInView, setIsInView] = useState(false);
+
+  const { ref, inView } = useInView({
+    threshold: 0
+  });
+
+  useEffect(() => {
+    if (inView) {
+      setIsInView(true);
+    }
+  }, [inView]);
+
+  return (
+    <div ref={ref} className={clsx(className)}>
+      {isInView ? <>{children}</> : null}
+    </div>
+  );
+}

package/components/plugin-module.tsx

@@ -10,7 +10,8 @@ enum Plugin {
   PayOnDelivery = 'pz-pay-on-delivery',
   CheckoutGiftPack = 'pz-checkout-gift-pack',
   GPay = 'pz-gpay',
-  Otp = 'pz-otp'
+  Otp = 'pz-otp',
+  BKMExpress = 'pz-bkm'
 }
 
 export enum Component {
@@ -20,7 +21,8 @@ export enum Component {
   PayOnDelivery = 'PayOnDelivery',
   CheckoutGiftPack = 'CheckoutGiftPack',
   GPay = 'GPayOption',
-  Otp = 'Otp'
+  Otp = 'Otp',
+  BKMExpress = 'BKMOption'
 }
 
 const PluginComponents = new Map([
@@ -30,7 +32,8 @@ const PluginComponents = new Map([
   [Plugin.PayOnDelivery, [Component.PayOnDelivery]],
   [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]],
   [Plugin.GPay, [Component.GPay]],
-  [Plugin.Otp, [Component.Otp]]
+  [Plugin.Otp, [Component.Otp]],
+  [Plugin.BKMExpress, [Component.BKMExpress]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -75,6 +78,8 @@ export default function PluginModule({
               promise = import(`${'pz-gpay'}`);
             } else if (plugin === Plugin.Otp) {
               promise = import(`${'pz-otp'}`);
+            } else if (plugin === Plugin.BKMExpress) {
+              promise = import(`${'pz-bkm'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/react-portal.tsx

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+  const wrapperElement = document.createElement('div');
+  wrapperElement.setAttribute('id', wrapperId);
+  document.body.appendChild(wrapperElement);
+  return wrapperElement;
+}
+
+type Props = {
+  children: React.ReactNode;
+  wrapperId: string;
+};
+
+export const ReactPortal: React.FC<Props> = ({
+  children,
+  wrapperId = 'react-portal-wrapper'
+}) => {
+  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  useEffect(() => {
+    let element = document.getElementById(wrapperId) as HTMLElement;
+    let modalCreated = false;
+
+    if (!element) {
+      modalCreated = true;
+      element = createWrapperAndAppendToBody(wrapperId);
+    }
+    setWrapperElement(element);
+
+    return () => {
+      // delete the programatically created element if it was created
+      if (modalCreated && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [wrapperId]);
+
+  if (wrapperElement === null) return null;
+
+  return createPortal(children, wrapperElement);
+};

package/components/selected-payment-option-view.tsx

@@ -54,6 +54,9 @@ export default function SelectedPaymentOptionView() {
             // else if (payment_option.payment_type === 'gpay') {
             //   promise = import(`views/checkout/steps/payment/options/gpay`);
             // }
+            // else if (payment_option.payment_type === 'bkm_express') {
+            //   promise = import(`views/checkout/steps/payment/options/bkm`);
+            // }
           } catch (error) {}
 
           return promise

package/data/client/b2b.ts

@@ -10,8 +10,9 @@ import {
   GetResponse,
   LoadBasketParams,
   SaveBasketParams,
-  updateProduct,
-  CreateQuotation
+  UpdateProductParams,
+  DeleteProductParams,
+  CreateQuotationParams
 } from '../../types';
 
 const b2bApi = api.injectEndpoints({
@@ -58,7 +59,7 @@ const b2bApi = api.injectEndpoints({
       }),
       invalidatesTags: ['BasketB2b']
     }),
-    updateProduct: build.mutation<Basket, updateProduct>({
+    updateProduct: build.mutation<Basket, UpdateProductParams>({
       query: (body) => ({
         url: buildClientRequestUrl(b2b.basket, {
           contentType: 'application/json'
@@ -68,7 +69,17 @@ const b2bApi = api.injectEndpoints({
       }),
       invalidatesTags: ['BasketB2b']
     }),
-    createQuotation: build.mutation<BasketResponse, CreateQuotation>({
+    deleteProduct: build.mutation<Basket, DeleteProductParams>({
+      query: (body) => ({
+        url: buildClientRequestUrl(b2b.basket, {
+          contentType: 'application/json'
+        }),
+        method: 'DELETE',
+        body
+      }),
+      invalidatesTags: ['BasketB2b']
+    }),
+    createQuotation: build.mutation<BasketResponse, CreateQuotationParams>({
       query: (body) => ({
         url: buildClientRequestUrl(b2b.myQuotations, {
           contentType: 'application/json'
@@ -90,5 +101,6 @@ export const {
   useGetDraftsQuery,
   useLoadBasketMutation,
   useUpdateProductMutation,
+  useDeleteProductMutation,
   useCreateQuotationMutation
 } = b2bApi;

package/data/client/wishlist.ts

@@ -1,7 +1,7 @@
 import { FavoriteItem } from '../../types';
 import { buildClientRequestUrl } from '../../utils';
 import { api } from './api';
-import { URLS, wishlist } from '../urls';
+import { wishlist } from '../urls';
 
 export type AddProductRequest = {
   product: number;
@@ -28,6 +28,16 @@ interface RemoteFavoriteResponse {
   success: boolean;
 }
 
+interface AddStockAlertRequest {
+  productPk: number;
+  email?: string;
+}
+
+interface AddStockAlertResponse {
+  pk: number;
+  product: number;
+}
+
 export const wishlistApi = api.injectEndpoints({
   endpoints: (build) => ({
     getFavorites: build.query<GetFavoritesResponse, GetFavoritesParams>({
@@ -54,16 +64,15 @@ export const wishlistApi = api.injectEndpoints({
       }),
       invalidatesTags: ['Favorite']
     }),
-    // TODO: Add stock alert response type
-    addStockAlert: build.mutation<any, number>({
-      query: (productPk: number) => ({
+    addStockAlert: build.mutation<AddStockAlertResponse, AddStockAlertRequest>({
+      query: ({ productPk, email }) => ({
         url: buildClientRequestUrl(wishlist.addStockAlert, {
-          useFormData: true,
-          contentType: 'application/json'
+          useFormData: true
         }),
         method: 'POST',
         body: {
-          product: productPk
+          product: productPk,
+          ...(email ? { email } : {})
         }
       })
     })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -18,7 +18,8 @@
     "cross-spawn": "7.0.3",
     "react-redux": "8.1.3",
     "react-string-replace": "1.1.1",
-    "redis": "4.5.1"
+    "redis": "4.5.1",
+    "semver": "7.5.4"
   },
   "devDependencies": {
     "@types/react-redux": "7.1.30"

package/types/commerce/b2b.ts

@@ -22,7 +22,7 @@ export type Division = {
   extra_data: object;
 };
 
-interface ProductB2b extends Product {
+export interface ProductB2b extends Product {
   sku: string;
   name: string;
   price: string;
@@ -84,16 +84,20 @@ export type SaveBasketParams = {
   name: string;
 };
 
-export type CreateQuotation = {
+export type CreateQuotationParams = {
   name: string;
 };
 
-export type updateProduct = {
+export type UpdateProductParams = {
   product_remote_id: number;
   division: number;
   quantity: number
 };
 
+export type DeleteProductParams = {
+  product_remote_id: number;
+};
+
 export type LoadBasketParams = {
   id: number;
 };