@akinon/next 1.15.0 → 1.16.0

package/.gitattributes

@@ -1,15 +1,15 @@
-*.js    text eol=lf
-*.jsx   text eol=lf
-*.ts    text eol=lf
-*.tsx   text eol=lf
-*.json  text eol=lf
-*.md    text eol=lf
-
-.eslintignore text eol=lf
-.eslintrc text eol=lf
-.gitignore text eol=lf
-.prettierrc text eol=lf
-.yarnrc text eol=lf
-
-* text=auto
-
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @akinon/next
 
+## 1.16.0
+
+### Minor Changes
+
+- a2458ad: ZERO-2414: Add OpenTelemetry instrumentation for tracing
+- a2458ad: ZERO-2415: Refactor plugins
+
 ## 1.15.0
 
 ### Minor Changes

package/assets/styles/index.scss

@@ -1,29 +1,29 @@
-.checkout-payment-iframe-wrapper {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	border: none;
-	z-index: 1000;
-	background-color: white;
-
-	iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-		background-color: white;
-	}
-
-	.close-button {
-		position: fixed;
-		top: 16px;
-		right: 16px;
-		width: 32px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1001;
-	}
+.checkout-payment-iframe-wrapper {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border: none;
+	z-index: 1000;
+	background-color: white;
+
+	iframe {
+		width: 100%;
+		height: 100%;
+		border: none;
+		background-color: white;
+	}
+
+	.close-button {
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1001;
+	}
 }

package/bin/pz-install-plugins.js

@@ -10,14 +10,17 @@ let plugins;
 
 try {
   plugins = require(path.resolve(rootDir, './src/plugins.js'));
-} catch (error) {}
+} catch (error) {
+  console.error('No plugins.js file found, skipping plugin installation.');
+  process.exit(0);
+}
 
 let installCmd = [];
 
 availablePlugins
   .filter((p) => plugins?.includes(p))
   .forEach((name) => {
-    installCmd.push(`git+https://bitbucket.org/akinonteam/${name}`);
+    installCmd.push(`@akinon/${name}`);
   });
 
 spawn.sync('yarn', ['cache clean']);

package/components/image.tsx

@@ -46,6 +46,12 @@ interface ImageProps extends NextImageProps {
    */
   sizes?: string;
   imageClassName?: string;
+
+  /**
+   * Swiper removed and we use react-multi-carousel at the moment.
+   * We need to use this prop to make the image draggable or not.
+   */
+  draggable?: boolean;
 }
 
 const DEFAULT_QUALITY = 70;
@@ -87,6 +93,7 @@ export const Image = (props: ImageProps) => {
     aspectRatio,
     quality = DEFAULT_QUALITY,
     crop = 'center',
+    draggable,
     className,
     imageClassName,
     ...restImage
@@ -127,6 +134,7 @@ export const Image = (props: ImageProps) => {
         }}
         className={imageClassName}
         {...(hasGif && { unoptimized: true })}
+        {...(draggable !== undefined && { draggable })}
       />
     </div>
   );

package/components/index.ts

@@ -1,18 +1,18 @@
-export * from './accordion';
-export * from './button';
-export * from './client-root';
-export * from './icon';
-export * from './image';
-export * from './input';
-export * from './lazy-component';
-export * from './loader-spinner';
-export * from './mobile-app-toggler';
-export * from './modal';
-export * from './oauth-login';
-export * from './plugin-module';
-export * from './price';
-export * from './pz-providers';
-export * from './radio';
-export * from './react-portal';
-export * from './selected-payment-option-view';
-export * from './trans';
+export * from './accordion';
+export * from './button';
+export * from './client-root';
+export * from './icon';
+export * from './image';
+export * from './input';
+export * from './lazy-component';
+export * from './loader-spinner';
+export * from './mobile-app-toggler';
+export * from './modal';
+export * from './oauth-login';
+export * from './plugin-module';
+export * from './price';
+export * from './pz-providers';
+export * from './radio';
+export * from './react-portal';
+export * from './selected-payment-option-view';
+export * from './trans';

package/components/modal.tsx

@@ -1,66 +1,66 @@
-'use client';
-
-import { ReactPortal } from './react-portal';
-
-import { Icon } from './icon';
-import { twMerge } from 'tailwind-merge';
-import { useEffect } from 'react';
-export interface ModalProps {
-  portalId: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
-  title?: React.ReactNode;
-  showCloseButton?: React.ReactNode;
-  className?: string;
-}
-
-export const Modal = (props: ModalProps) => {
-  const {
-    children,
-    portalId,
-    open,
-    setOpen,
-    title = '',
-    showCloseButton = true,
-    className
-  } = props;
-
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
-    }
-  }, [open]);
-
-  if (!open) return null;
-
-  return (
-    <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
-      <section
-        className={twMerge(
-          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
-          className
-        )}
-      >
-        {(showCloseButton || title) && (
-          <div className="flex px-6 py-4 border-b border-gray-400">
-            {title && <h3 className="text-lg font-light">{title}</h3>}
-            {showCloseButton && (
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                className="ml-auto"
-              >
-                <Icon name="close" size={16} />
-              </button>
-            )}
-          </div>
-        )}
-        {children}
-      </section>
-    </ReactPortal>
-  );
-};
+'use client';
+
+import { ReactPortal } from './react-portal';
+
+import { Icon } from './icon';
+import { twMerge } from 'tailwind-merge';
+import { useEffect } from 'react';
+export interface ModalProps {
+  portalId: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  title?: React.ReactNode;
+  showCloseButton?: React.ReactNode;
+  className?: string;
+}
+
+export const Modal = (props: ModalProps) => {
+  const {
+    children,
+    portalId,
+    open,
+    setOpen,
+    title = '',
+    showCloseButton = true,
+    className
+  } = props;
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <ReactPortal wrapperId={portalId}>
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <section
+        className={twMerge(
+          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
+          className
+        )}
+      >
+        {(showCloseButton || title) && (
+          <div className="flex px-6 py-4 border-b border-gray-400">
+            {title && <h3 className="text-lg font-light">{title}</h3>}
+            {showCloseButton && (
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="ml-auto"
+              >
+                <Icon name="close" size={16} />
+              </button>
+            )}
+          </div>
+        )}
+        {children}
+      </section>
+    </ReactPortal>
+  );
+};

package/components/plugin-module.tsx

@@ -12,8 +12,7 @@ enum Plugin {
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
   BKMExpress = 'pz-bkm',
-  CreditPayment = 'pz-credit-payment',
-  Masterpass = 'pz-masterpass'
+  CreditPayment= 'pz-credit-payment'
 }
 
 export enum Component {
@@ -25,8 +24,7 @@ export enum Component {
   GPay = 'GPayOption',
   Otp = 'Otp',
   BKMExpress = 'BKMOption',
-  CreditPayment = 'CreditPayment',
-  MasterpassCardList = 'MasterpassCardList'
+  CreditPayment= 'CreditPayment'
 }
 
 const PluginComponents = new Map([
@@ -38,8 +36,7 @@ const PluginComponents = new Map([
   [Plugin.GPay, [Component.GPay]],
   [Plugin.Otp, [Component.Otp]],
   [Plugin.BKMExpress, [Component.BKMExpress]],
-  [Plugin.CreditPayment, [Component.CreditPayment]],
-  [Plugin.Masterpass, [Component.MasterpassCardList]]
+  [Plugin.CreditPayment, [Component.CreditPayment]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -59,6 +56,10 @@ export default function PluginModule({
 }) {
   const plugin = getPlugin(component);
 
+  if (!(plugins as string[]).includes(plugin)) {
+    return null;
+  }
+
   const Component = useMemo(
     () =>
       dynamic(
@@ -95,12 +96,8 @@ export default function PluginModule({
         },
         { ssr: false }
       ),
-    [plugin, component]
+    [plugin]
   );
 
-  if (!(plugins as string[]).includes(plugin)) {
-    return null;
-  }
-
   return <Component {...props} />;
 }

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

@@ -50,16 +50,12 @@ export default function SelectedPaymentOptionView() {
               );
             } else if (payment_option.payment_type === 'loyalty_money') {
               promise = import(`views/checkout/steps/payment/options/loyalty`);
-            } else if (payment_option.payment_type === 'masterpass') {
-              promise = import(
-                `views/checkout/steps/payment/options/credit-card`
-              );
             }
             // else if (payment_option.payment_type === 'credit_payment') {
             //   promise = import(`views/checkout/steps/payment/options/credit-payment`);
             // }
             // else if (payment_option.payment_type === 'gpay') {
-              //   promise = import(`views/checkout/steps/payment/options/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`);

package/data/client/address.ts

@@ -1,107 +1,107 @@
-import { buildClientRequestUrl } from '../../utils';
-import { api } from './api';
-import { address, misc } from '../urls';
-import { Address, City, Country, District, Township } from '../../types';
-
-interface GetResponse<T> {
-  count: number;
-  next: null;
-  previous: null;
-  results: T[];
-}
-
-const addressApi = api.injectEndpoints({
-  endpoints: (builder) => ({
-    getAddresses: builder.query<GetResponse<Address>, void>({
-      query: () => buildClientRequestUrl(address.getAddresses),
-      providesTags: ['Addresses']
-    }),
-    getCountries: builder.query<GetResponse<Country>, void>({
-      query: () => buildClientRequestUrl(address.countries)
-    }),
-    getCities: builder.query<GetResponse<City>, string>({
-      query: (country) => buildClientRequestUrl(address.getCities(country))
-    }),
-    getTownships: builder.query<GetResponse<Township>, string>({
-      query: (city) => buildClientRequestUrl(address.getTownships(city))
-    }),
-    getDistricts: builder.query<GetResponse<District>, string>({
-      query: (township) => buildClientRequestUrl(address.getDistricts(township))
-    }),
-    getRetailStore: builder.query<GetResponse<any>, void>({
-      query: () => buildClientRequestUrl(address.getRetailStore)
-    }),
-    getRetailStoreCities: builder.query<GetResponse<any>, string>({
-      query: (country) => buildClientRequestUrl(address.getRetailStoreCities(country))
-    }),
-    getRetailStoreTownships: builder.query<GetResponse<any>, string>({
-      query: (city) => buildClientRequestUrl(address.getRetailStoreTownships(city))
-    }),
-    addAddress: builder.mutation<Address, Partial<Address>>({
-      query: (body) => ({
-        url: buildClientRequestUrl(address.base, {
-          contentType: 'application/json'
-        }),
-        method: 'POST',
-        body: {
-          ...body,
-          type: body.is_corporate === 'true' ? 'corporate' : 'personal'
-        }
-      }),
-      invalidatesTags: ['Addresses', 'Checkout'] // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
-    }),
-    editAddress: builder.mutation<Address, Partial<Address>>({
-      query: ({ pk, ...body }) => ({
-        url: buildClientRequestUrl(address.editAddress(pk), {
-          contentType: 'application/json'
-        }),
-        method: 'PATCH',
-        body: {
-          ...body,
-          user: body.user?.pk,
-          type: body.is_corporate === 'true' ? 'corporate' : 'personal'
-        }
-      }),
-      invalidatesTags: ['Addresses', 'Checkout'] // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
-    }),
-    removeAddress: builder.mutation<void, number>({
-      query: (id) => ({
-        url: buildClientRequestUrl(address.removeAddress(id)),
-        method: 'DELETE'
-      }),
-      invalidatesTags: ['Addresses', 'Checkout'] // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
-    }),
-    setDefaultAddress: builder.mutation<Address, Partial<Address>>({
-      query: ({ pk, primary }) => ({
-        url: buildClientRequestUrl(address.setDefaultAddress(pk), {
-          contentType: 'application/json'
-        }),
-        method: 'PATCH',
-        body: { primary }
-      }),
-      invalidatesTags: ['Addresses']
-    }),
-    getStores: builder.query<GetResponse<Address>, void>({
-      query: () => ({
-        url: buildClientRequestUrl(misc.stores)
-      })
-    })
-  }),
-  overrideExisting: true
-});
-
-export const {
-  useGetAddressesQuery,
-  useGetCountriesQuery,
-  useGetCitiesQuery,
-  useGetTownshipsQuery,
-  useGetDistrictsQuery,
-  useGetRetailStoreQuery,
-  useGetRetailStoreCitiesQuery,
-  useGetRetailStoreTownshipsQuery,
-  useAddAddressMutation,
-  useEditAddressMutation,
-  useRemoveAddressMutation,
-  useSetDefaultAddressMutation,
-  useGetStoresQuery
-} = addressApi;
+import { buildClientRequestUrl } from '../../utils';
+import { api } from './api';
+import { address, misc } from '../urls';
+import { Address, City, Country, District, Township } from '../../types';
+
+interface GetResponse<T> {
+  count: number;
+  next: null;
+  previous: null;
+  results: T[];
+}
+
+const addressApi = api.injectEndpoints({
+  endpoints: (builder) => ({
+    getAddresses: builder.query<GetResponse<Address>, void>({
+      query: () => buildClientRequestUrl(address.getAddresses),
+      providesTags: ['Addresses']
+    }),
+    getCountries: builder.query<GetResponse<Country>, void>({
+      query: () => buildClientRequestUrl(address.countries)
+    }),
+    getCities: builder.query<GetResponse<City>, string>({
+      query: (country) => buildClientRequestUrl(address.getCities(country))
+    }),
+    getTownships: builder.query<GetResponse<Township>, string>({
+      query: (city) => buildClientRequestUrl(address.getTownships(city))
+    }),
+    getDistricts: builder.query<GetResponse<District>, string>({
+      query: (township) => buildClientRequestUrl(address.getDistricts(township))
+    }),
+    getRetailStore: builder.query<GetResponse<any>, void>({
+      query: () => buildClientRequestUrl(address.getRetailStore)
+    }),
+    getRetailStoreCities: builder.query<GetResponse<any>, string>({
+      query: (country) => buildClientRequestUrl(address.getRetailStoreCities(country))
+    }),
+    getRetailStoreTownships: builder.query<GetResponse<any>, string>({
+      query: (city) => buildClientRequestUrl(address.getRetailStoreTownships(city))
+    }),
+    addAddress: builder.mutation<Address, Partial<Address>>({
+      query: (body) => ({
+        url: buildClientRequestUrl(address.base, {
+          contentType: 'application/json'
+        }),
+        method: 'POST',
+        body: {
+          ...body,
+          type: body.is_corporate === 'true' ? 'corporate' : 'personal'
+        }
+      }),
+      invalidatesTags: ['Addresses', 'Checkout'] // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
+    }),
+    editAddress: builder.mutation<Address, Partial<Address>>({
+      query: ({ pk, ...body }) => ({
+        url: buildClientRequestUrl(address.editAddress(pk), {
+          contentType: 'application/json'
+        }),
+        method: 'PATCH',
+        body: {
+          ...body,
+          user: body.user?.pk,
+          type: body.is_corporate === 'true' ? 'corporate' : 'personal'
+        }
+      }),
+      invalidatesTags: ['Addresses', 'Checkout'] // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
+    }),
+    removeAddress: builder.mutation<void, number>({
+      query: (id) => ({
+        url: buildClientRequestUrl(address.removeAddress(id)),
+        method: 'DELETE'
+      }),
+      invalidatesTags: ['Addresses', 'Checkout'] // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
+    }),
+    setDefaultAddress: builder.mutation<Address, Partial<Address>>({
+      query: ({ pk, primary }) => ({
+        url: buildClientRequestUrl(address.setDefaultAddress(pk), {
+          contentType: 'application/json'
+        }),
+        method: 'PATCH',
+        body: { primary }
+      }),
+      invalidatesTags: ['Addresses']
+    }),
+    getStores: builder.query<GetResponse<Address>, void>({
+      query: () => ({
+        url: buildClientRequestUrl(misc.stores)
+      })
+    })
+  }),
+  overrideExisting: true
+});
+
+export const {
+  useGetAddressesQuery,
+  useGetCountriesQuery,
+  useGetCitiesQuery,
+  useGetTownshipsQuery,
+  useGetDistrictsQuery,
+  useGetRetailStoreQuery,
+  useGetRetailStoreCitiesQuery,
+  useGetRetailStoreTownshipsQuery,
+  useAddAddressMutation,
+  useEditAddressMutation,
+  useRemoveAddressMutation,
+  useSetDefaultAddressMutation,
+  useGetStoresQuery
+} = addressApi;