@akinon/next 1.14.1 → 1.16.0

package/.gitattributes

@@ -0,0 +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
+

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- 96dd05f: ZERO-2373: Add credit payment
+- 96dd05f: ZERO-2385: Add gitattributes file
+- 96dd05f: ZERO-2404: Add gpay middleware
+
 ## 1.14.1
 
 ### Patch 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

@@ -7,6 +7,7 @@ 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';

package/components/modal.tsx

@@ -0,0 +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>
+  );
+};

package/components/plugin-module.tsx

@@ -12,7 +12,7 @@ enum Plugin {
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
   BKMExpress = 'pz-bkm',
-  Masterpass = 'pz-masterpass'
+  CreditPayment= 'pz-credit-payment'
 }
 
 export enum Component {
@@ -24,7 +24,7 @@ export enum Component {
   GPay = 'GPayOption',
   Otp = 'Otp',
   BKMExpress = 'BKMOption',
-  MasterpassCardList = 'MasterpassCardList'
+  CreditPayment= 'CreditPayment'
 }
 
 const PluginComponents = new Map([
@@ -36,7 +36,7 @@ const PluginComponents = new Map([
   [Plugin.GPay, [Component.GPay]],
   [Plugin.Otp, [Component.Otp]],
   [Plugin.BKMExpress, [Component.BKMExpress]],
-  [Plugin.Masterpass, [Component.MasterpassCardList]]
+  [Plugin.CreditPayment, [Component.CreditPayment]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -56,6 +56,10 @@ export default function PluginModule({
 }) {
   const plugin = getPlugin(component);
 
+  if (!(plugins as string[]).includes(plugin)) {
+    return null;
+  }
+
   const Component = useMemo(
     () =>
       dynamic(
@@ -79,6 +83,8 @@ export default function PluginModule({
               promise = import(`${'pz-otp'}`);
             } else if (plugin === Plugin.BKMExpress) {
               promise = import(`${'pz-bkm'}`);
+            } else if (plugin === Plugin.CreditPayment) {
+              promise = import(`${'pz-credit-payment'}`);
             }
           } catch (error) {
             logger.error(error);
@@ -90,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,10 +50,6 @@ 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`);

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;