@akinon/next 1.74.0 → 1.75.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @akinon/next
 
+## 1.75.0
+
+### Minor Changes
+
+- 81248a1: ZERO-3024: Refactor urlLocaleMatcherRegex to include lookahead assertion
+- cc538c6: ZERO-3048: Update hepsiPayMiddleware to use Success flag for availability check
+- 663bda9: ZERO-2990: Refactor account API to include shipping option slug in getOrders query
+- 94eb825: ZERO-3069: Add selectNameSpaceMainBasket mutation
+- 3010514: ZERO-3011:add shipping_option_operator and custom filter to getOrders
+- 37547c0: ZERO-2957: Refactor checkout middleware to include payment options in iframe and deprecate exclusion option
+- 5a333a5: ZERO-3061: Add success parameter for completeWalletPage
+- ca774b3: ZERO-3002:add register with loyalty url
+- 3344bca: ZERO-3013: Enable web vitals tracking in settings.js
+
 ## 1.74.0
 
 ### Minor Changes

package/components/pagination.tsx

@@ -1,13 +1,12 @@
-'use client';
-
 import { MouseEvent, useCallback, useEffect, useState } from 'react';
 import { PaginationProps } from '../types';
 import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
+import { Link, Button, LoaderSpinner } from '.';
 import usePagination from '@akinon/next/hooks/use-pagination';
 import { useLocalization } from '@akinon/next/hooks';
 import { useRouter } from '@akinon/next/hooks';
-import { Link } from './link';
+import { useInView } from 'react-intersection-observer';
 
 export const Pagination = (props: PaginationProps) => {
   const { t } = useLocalization();
@@ -21,8 +20,13 @@ export const Pagination = (props: PaginationProps) => {
     prevClassName,
     pageClassName,
     nextClassName,
+    moreButtonClassName,
     threshold = 1,
-    render
+    type = 'list',
+    onPageChange,
+    direction,
+    render,
+    isLoading
   } = props;
 
   const pagination = usePagination(total, limit, currentPage, numberOfPages);
@@ -33,12 +37,16 @@ export const Pagination = (props: PaginationProps) => {
     pageList,
     prev,
     next,
+    last,
     setTotal,
     setLimit
   } = pagination;
 
   const [paginationItems, setPaginationItems] = useState([]);
-  const showNext = currentPage * paginationLimit < total;
+  const showNext = currentPage * paginationLimit < paginationTotal;
+  const { ref, inView } = useInView({ threshold: 0.75 });
+  const [prevPage, setPrevPage] = useState(page);
+  const [nextPage, setNextPage] = useState(page);
 
   const createListItems = useCallback(() => {
     setPaginationItems([]);
@@ -98,9 +106,38 @@ export const Pagination = (props: PaginationProps) => {
     router.push(newUrl.pathname + newUrl.search, undefined);
   };
 
+  const handlePageChange = () => {
+    let changingPage;
+
+    if (direction === 'prev') {
+      changingPage = Number(type !== 'list' ? prevPage : page) - 1;
+      setPrevPage(changingPage);
+    } else {
+      changingPage = Number(type !== 'list' ? nextPage : page) + 1;
+      setNextPage(changingPage);
+    }
+
+    onPageChange(changingPage);
+  };
+
+  useEffect(() => {
+    if (type === 'infinite' && page === 1) {
+      setPrevPage(1);
+      setNextPage(1);
+    }
+  }, [page]);
+
+  useEffect(() => {
+    if (inView) {
+      handlePageChange();
+    }
+  }, [inView]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
-    createListItems();
-  }, [createListItems, page]);
+    if (type === 'list') {
+      createListItems();
+    }
+  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (total && total !== paginationTotal) {
@@ -118,76 +155,128 @@ export const Pagination = (props: PaginationProps) => {
     return <>{render(pagination)}</>;
   }
 
-  return (
-    <ul
-      className={twMerge(
-        'flex mt-8 mb-4 justify-center items-center',
-        containerClassName
-      )}
-    >
-      {prev && (
-        <li>
-          <Link
-            onClick={(e) => handleClick(e, prev)}
-            href={prev}
+  return direction === 'prev' && type !== 'list' ? (
+    <>
+      <div className="flex items-center justify-center">
+        <Button
+          className={twMerge('px-5', moreButtonClassName)}
+          onClick={() => handlePageChange()}
+        >
+          {isLoading ? (
+            <LoaderSpinner className="h-4 w-4" />
+          ) : (
+            t('category.pagination.load_previous_page')
+          )}
+        </Button>
+      </div>
+    </>
+  ) : (
+    <>
+      {type === 'more' && (
+        <div className="flex items-center justify-center">
+          <Button
             className={twMerge(
-              'flex cursor-pointer text-sm px-2',
-              prevClassName
+              'px-5',
+              Number(nextPage) === Number(last)
+                ? 'bg-gray-600 border-gray-600 pointer-events-none'
+                : 'bg-black',
+              moreButtonClassName
             )}
+            onClick={() => handlePageChange()}
+            disabled={Number(nextPage) === Number(last)}
           >
-            <span>&lt;</span>
-            <span className="hidden lg:inline-block ms-4">
-              {t('category.pagination.previous')}
-            </span>
-          </Link>
-        </li>
+            {isLoading ? (
+              <LoaderSpinner className="h-4 w-4" />
+            ) : (
+              t('category.pagination.more')
+            )}
+          </Button>
+        </div>
       )}
 
-      {paginationItems &&
-        paginationItems?.map((item, i) => (
-          <li key={i}>
-            {item?.url != '#' ? (
+      {type === 'infinite' && Number(nextPage) !== last && (
+        <div ref={ref}></div>
+      )}
+
+      {(type === 'infinite' || type === 'more') &&
+        Number(nextPage) === last &&
+        !isLoading && (
+          <p className="mt-8 text-center">
+            {t('category.pagination.shown_items')}
+          </p>
+        )}
+
+      {type === 'list' && (
+        <ul
+          className={twMerge(
+            'mb-4 mt-8 flex items-center justify-center',
+            containerClassName
+          )}
+        >
+          {prev && currentPage !== 1 && (
+            <li>
               <Link
-                onClick={(e) => handleClick(e, item.url)}
-                href={item.url}
+                onClick={(e) => handleClick(e, prev)}
+                href={prev}
                 className={twMerge(
-                  clsx(
-                    'text-xs px-2 cursor-pointer',
-                    { 'pointer-events-none': item.url === null },
-                    Number(page) === Number(item?.page)
-                      ? 'font-semibold text-black-800'
-                      : 'text-gray-400'
-                  ),
-                  pageClassName
+                  'flex cursor-pointer px-2 text-sm items-center',
+                  prevClassName
                 )}
               >
-                {item?.page}
+                <span>&lt;</span>
+                <span className="ms-4 hidden lg:inline-block">
+                  {t('category.pagination.previous')}
+                </span>
               </Link>
-            ) : (
-              <span className="cursor-default text-xs flex items-center justify-center">
-                {item?.page}
-              </span>
-            )}
-          </li>
-        ))}
-
-      {showNext && (
-        <li>
-          <Link
-            onClick={(e) => handleClick(e, next)}
-            href={next}
-            className={twMerge(
-              'flex cursor-pointer text-xs px-2',
-              nextClassName
-            )}
-          >
-            <span className="hidden lg:inline-block me-4">
-              {t('category.pagination.next')}
-            </span>
-            <span>&gt;</span>
-          </Link>
-        </li>
+            </li>
+          )}
+
+          {paginationItems.map((item, i) => (
+            <li key={i}>
+              {item?.url != '#' ? (
+                <Link
+                  onClick={(e) => handleClick(e, item.url)}
+                  href={item.url}
+                  className={twMerge(
+                    clsx(
+                      'cursor-pointer px-2 text-xs items-center',
+                      { 'pointer-events-none': item.url === null },
+                      Number(page) === Number(item?.page)
+                        ? 'font-semibold text-black-800'
+                        : 'text-gray-400'
+                    ),
+                    pageClassName
+                  )}
+                >
+                  {item?.page}
+                </Link>
+              ) : (
+                <span className="flex cursor-default items-center justify-center text-xs">
+                  {item?.page}
+                </span>
+              )}
+            </li>
+          ))}
+
+          {showNext && (
+            <li>
+              <Link
+                onClick={(e) => handleClick(e, next)}
+                href={next}
+                className={twMerge(
+                  'flex cursor-pointer px-2 text-xs items-center',
+                  nextClassName
+                )}
+              >
+                <span className="me-4 hidden lg:inline-block">
+                  {t('category.pagination.next')}
+                </span>
+                <span>&gt;</span>
+              </Link>
+            </li>
+          )}
+        </ul>
       )}
-    </ul>
+    </>
   );
 };

package/components/web-vitals.tsx

@@ -3,24 +3,26 @@
 import { useReportWebVitals } from 'next/web-vitals';
 import { useSelectedLayoutSegment } from 'next/navigation';
 import { usePathname } from 'next/navigation';
+import settings from 'settings';
 
 export function WebVitals() {
   let layoutSegment = useSelectedLayoutSegment();
   const pathname = usePathname();
+  const { enabled } = settings.webVitals || { enabled: false };
 
   if (pathname === '/' && layoutSegment === null) {
     layoutSegment = 'home';
   }
 
   useReportWebVitals((metric) => {
-    if (process.env.NODE_ENV !== 'development') {
+    if (process.env.NODE_ENV !== 'development' || !enabled) {
       return;
     }
 
     const { name, value, rating } = metric;
     const page = layoutSegment || 'unknown';
 
-    fetch(`${process.env.NEXT_PUBLIC_URL}/api/web-vitals`, {
+    fetch(`/api/web-vitals`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'

package/data/client/account.ts

@@ -21,6 +21,10 @@ interface GetOrdersParams {
   page?: number;
   createdDate?: string;
   endDate?: string;
+  shipping_option_slug?: string;
+  shipping_option_operator?: string;
+  filterType?: string;
+  filterValue?: string;
   currency?: string;
 }
 
@@ -115,9 +119,29 @@ const accountApi = api.injectEndpoints({
       query: (id) => buildClientRequestUrl(account.orderId(id))
     }),
     getOrders: builder.query<GetOrdersResponse, GetOrdersParams>({
-      query: ({ page, limit, createdDate, endDate, currency } = {}) =>
+      query: ({
+        page,
+        limit,
+        createdDate,
+        endDate,
+        shipping_option_operator,
+        shipping_option_slug,
+        filterType,
+        filterValue,
+        currency
+      } = {}) =>
         buildClientRequestUrl(
-          account.getOrders({ page, limit, createdDate, endDate, currency })
+          account.getOrders({
+            page,
+            limit,
+            createdDate,
+            endDate,
+            shipping_option_operator,
+            shipping_option_slug,
+            filterType,
+            filterValue,
+            currency
+          })
         )
     }),
     getOldOrders: builder.query<GetOrdersResponse, GetOrdersParams>({

package/data/client/basket.ts

@@ -59,6 +59,20 @@ export const basketApi = api.injectEndpoints({
       transformResponse: (response: { baskets: Basket }) => response.baskets,
       invalidatesTags: ['MultiBasket', 'Basket']
     }),
+    selectNameSpaceMainBasket: build.mutation<Basket, { namespace: string }>({
+      query: ({ namespace }) => ({
+        url: buildClientRequestUrl(
+          basket.selectNameSpaceMainBasket(namespace),
+          {
+            contentType: 'application/json'
+          }
+        ),
+        method: 'POST',
+        body: { namespace }
+      }),
+      transformResponse: (response: { baskets: Basket }) => response.baskets,
+      invalidatesTags: ['MultiBasket', 'Basket']
+    }),
     updateQuantity: build.mutation<
       UpdateQuantityResponse,
       UpdateQuantityRequest
@@ -115,6 +129,7 @@ export const {
   useGetAllBasketsQuery,
   useRemoveBasketMutation,
   useSelectMainBasketMutation,
+  useSelectNameSpaceMainBasketMutation,
   useUpdateQuantityMutation,
   useClearBasketMutation,
   useApplyVoucherCodeMutation,

package/data/client/checkout.ts

@@ -484,10 +484,13 @@ export const checkoutApi = api.injectEndpoints({
         dispatch(setPaymentStepBusy(false));
       }
     }),
-    setWalletCompletePage: build.mutation<CheckoutResponse, void>({
-      query: () => ({
+    setWalletCompletePage: build.mutation<CheckoutResponse, boolean>({
+      query: (success: boolean) => ({
         url: buildClientRequestUrl(checkout.setWalletCompletePage),
-        method: 'POST'
+        method: 'POST',
+        body: {
+          success
+        }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));

package/data/urls.ts

@@ -19,6 +19,9 @@ export const account = {
     createdDate,
     endDate,
     shipping_option_slug,
+    shipping_option_operator = '=',
+    filterType,
+    filterValue,
     currency
   }: {
     page?: number;
@@ -26,15 +29,19 @@ export const account = {
     createdDate?: string;
     endDate?: string;
     shipping_option_slug?: string;
+    shipping_option_operator?: string;
+    filterType?: string;
+    filterValue?: string;
     currency?: string;
   }) =>
     `/users/orders/?page=${page || 1}&limit=${limit || 12}${
       createdDate ? `&created_date__gte=${createdDate}` : ''
     }${endDate ? `&created_date__lte=${endDate}` : ''}${
       shipping_option_slug
-        ? `&shipping_option_slug=${shipping_option_slug}`
+        ? `&shipping_option_slug${shipping_option_operator}${shipping_option_slug}`
         : ''
-    }${currency ? `&currency=${currency}` : ''}`,
+    }${currency ? `&currency=${currency}` : ''}
+    ${filterType && filterValue ? `&${filterType}=${filterValue}` : ''}`,
   getOldOrders: ({ page, limit }: { page?: number; limit?: number }) =>
     `/users/old-orders/?page=${page || 1}&limit=${limit || 12}}`,
   getQuotations: (page?: number, status?: string, limit?: number) =>
@@ -70,7 +77,9 @@ export const basket = {
   getBasketDetail: (namespace: string) => `/baskets/basket/${namespace}/`,
   getAllBaskets: '/baskets/basket-list/',
   removeBasket: (pk: number) => `/baskets/basket-list/${pk}/`,
-  selectMainBasket: (pk: number) => `/baskets/basket-list/id/${pk}/main/`
+  selectMainBasket: (pk: number) => `/baskets/basket-list/id/${pk}/main/`,
+  selectNameSpaceMainBasket: (namespace: string) =>
+    `/baskets/basket-list/ns/${namespace}/main/`
 };
 
 export const category = {
@@ -208,7 +217,8 @@ export const user = {
   confirmEmailVerification: (token: string) =>
     `/users/registration/account-confirm-email/${token}/`,
   csrfToken: '/csrf_token/',
-  anonymousOrderTracking: '/users/orders/anonymous'
+  anonymousOrderTracking: '/users/orders/anonymous',
+  loyaltyRegister: '/users/register-with-loyalty/'
 };
 
 export const b2b = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.74.0",
+  "version": "1.75.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,7 +30,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.74.0",
+    "@akinon/eslint-plugin-projectzero": "1.75.0",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",

package/redux/middlewares/checkout.ts

@@ -231,15 +231,15 @@ export const contextListMiddleware: Middleware = ({
           const isMobileDevice =
             isMobileApp ||
             /iPad|iPhone|iPod|Android/i.test(navigator.userAgent);
-          const isIframePaymentOptionExcluded =
-            settings.checkout?.iframeExcludedPaymentOptions?.includes(
+          const isIframePaymentOptionIncluded =
+            settings.checkout?.iframeIncludedPaymentOptions?.includes(
               result.payload?.pre_order?.payment_option?.slug
             );
           urlObj.searchParams.set('t', new Date().getTime().toString());
 
-          if (isMobileDevice && !isIframePaymentOptionExcluded) {
+          if (isMobileDevice && isIframePaymentOptionIncluded) {
             showMobile3dIframe(urlObj.toString());
-          } else if (isIframe && !isIframePaymentOptionExcluded) {
+          } else if (isIframe) {
             showRedirectionIframe(urlObj.toString());
           } else {
             window.location.href = urlObj.toString();
@@ -368,8 +368,7 @@ export const hepsiPayMiddleware: Middleware = ({
           ) {
             dispatch(
               setHepsipayAvailability(
-                walletSelectionPage.page_context.paymentData.data
-                  .IsAccountAlreadyLinked
+                walletSelectionPage.page_context.paymentData.data.Success
               )
             );
           }

package/types/index.ts

@@ -78,6 +78,9 @@ export interface Currency {
 }
 
 export interface Settings {
+  webVitals?: {
+    enabled: boolean;
+  };
   usePrettyUrlRoute?: boolean;
   commerceUrl: string;
   redis: {
@@ -184,9 +187,15 @@ export interface Settings {
   }>;
   checkout?: {
     /**
+     * @deprecated All payment options will be excluded from the iframe by default. This option is deprecated and will be removed in future releases.
+     *
      * If there is a need to exclude certain payment options from the iframe, for instance, due to CORS issues, this option can be utilized by passing the slugs associated with the desired payment options.
      */
     iframeExcludedPaymentOptions?: string[];
+    /**
+     * If there is a need to include certain payment options in the iframe, this option can be utilized by passing the slugs associated with the desired payment options.
+     */
+    iframeIncludedPaymentOptions?: string[];
     extraPaymentTypes?: string[];
     masterpassJsUrl?: string;
   };
@@ -321,4 +330,5 @@ export interface PaginationProps {
   type?: 'infinite' | 'list' | 'more';
   onPageChange?: (page: number) => void;
   direction?: 'next' | 'prev';
+  isLoading?: boolean;
 }

package/utils/index.ts

@@ -161,7 +161,7 @@ export const urlLocaleMatcherRegex = new RegExp(
         : l
     )
     .map((l) => l.value)
-    .join('|')})`
+    .join('|')})(?=/|$)`
 );
 
 export const getPosError = () => {