Merge pull request 'FIX #105 Extend Plan One Month For Retail' (#128) from ExtendPlanRetail into main

Reviewed-on: Pozomind/pozo-retail-app#128

src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import { Tooltip, Badge, Popconfirm, DatePicker } from 'antd';
 import moment from 'moment';
 import { isMobile } from 'react-device-detect';
@@ -81,13 +80,11 @@ import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.js
 import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
-
-const subDirectory = import.meta.env.BASE_URL;
-const commonDirectory = import.meta.env.COMMON_BASE_URL;
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
 
 const BSLayout1 = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+ 
   const { selectedDate, setSelectedDate } = useDateStore();
   const SessionData = useSelector(StoredSessionData);
   const AppId = SessionData?.AppId;
@@ -112,6 +109,7 @@ const BSLayout1 = () => {
   const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
   const SAdminuserPin = useSelector(GLobalSadminUserPin);
   const AppExpDate = useSelector(GlobalAppExpDateData);
+  console.log('AppExpDate:', AppExpDate);
   const { action, selectedProducts } = useSelector(
     GlobalBtoBQuickProductTransfer
   );
@@ -238,14 +236,7 @@ const BSLayout1 = () => {
     }
   }, [count == 2]);
 
-  const navigateFun = () => {
-    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
-  };
-
-  const navigatePublicFun = () => {
-    navigate(`${commonDirectory}`);
-  };
-
+  
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
@@ -327,61 +318,7 @@ const BSLayout1 = () => {
       {UserType != 'Super Admin' &&
         UserType != 'Super Admin User' &&
         (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
-          <div className={`${ss}`}>
-            <p>
-              {(AppExpDate?.RemainingDays < 1 &&
-                AppExpDate?.RemainingHours < 1 &&
-                AppExpDate?.RemainingMinutes < 1 &&
-                AppExpDate?.RemainingSeconds < 1) ||
-              AppExpDate === 'undefined' ? (
-                <span className="ExpiredMessage">
-                  Subscription expired &nbsp;
-                  <a
-                    onClick={() => {
-                      navigatePublicFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </span>
-              ) : AppExpDate?.RemainingDays < 1 ? (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="Expired">
-                    {AppExpDate?.RemainingHours >= 1
-                      ? AppExpDate?.RemainingHours
-                      : AppExpDate?.RemainingMinutes}
-                  </span>{' '}
-                  {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              ) : (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="NosDays">
-                    {AppExpDate?.RemainingDays}
-                  </span>{' '}
-                  days. &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              )}
-            </p>
-          </div>
+          <PlanExpireNotification  ss={ss}/>
         )}
       <div
         className="BSLayout1-Master"

src/Pages/BookingScreen/Template/BSLayout2/BSLayout2.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
@@ -77,13 +76,13 @@ import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
 
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 const BSLayout2 = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const elementRef = useRef(null);
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
 
@@ -213,14 +212,7 @@ const BSLayout2 = () => {
     await dispatch(getKioskDatas(data));
   };
 
-  const navigateFun = () => {
-    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
-  };
-
-  const navigatePublicFun = () => {
-    navigate(`${commonDirectory}`);
-  };
-
+  
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -306,61 +298,7 @@ const BSLayout2 = () => {
         {UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
           (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
-            <div className={`${ss}`}>
-              <p>
-                {(AppExpDate?.RemainingDays < 1 &&
-                  AppExpDate?.RemainingHours < 1 &&
-                  AppExpDate?.RemainingMinutes < 1 &&
-                  AppExpDate?.RemainingSeconds < 1) ||
-                AppExpDate === 'undefined' ? (
-                  <span className="ExpiredMessage">
-                    Subscription expired &nbsp;
-                    <a
-                      onClick={() => {
-                        navigatePublicFun();
-                      }}
-                      className="upgrdbtn"
-                    >
-                      RENEWAL NOW <ArrowUpOutlined />
-                    </a>
-                  </span>
-                ) : AppExpDate?.RemainingDays < 1 ? (
-                  <p>
-                    Your application subscription will expire within &nbsp;
-                    <span className="Expired">
-                      {AppExpDate?.RemainingHours >= 1
-                        ? AppExpDate?.RemainingHours
-                        : AppExpDate?.RemainingMinutes}
-                    </span>{' '}
-                    {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
-                    <a
-                      onClick={() => {
-                        navigateFun();
-                      }}
-                      className="upgrdbtn"
-                    >
-                      RENEWAL NOW <ArrowUpOutlined />
-                    </a>
-                  </p>
-                ) : (
-                  <p>
-                    Your application subscription will expire within &nbsp;
-                    <span className="NosDays">
-                      {AppExpDate?.RemainingDays}
-                    </span>{' '}
-                    days. &nbsp;
-                    <a
-                      onClick={() => {
-                        navigateFun();
-                      }}
-                      className="upgrdbtn"
-                    >
-                      RENEWAL NOW <ArrowUpOutlined />
-                    </a>
-                  </p>
-                )}
-              </p>
-            </div>
+             <PlanExpireNotification  ss={ss}/>
           )}
         <div
           className="BSLayout2-Master"

src/Pages/BookingScreen/Template/BSLayout3/BSLayout3.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
 import { isMobile } from 'react-device-detect';
@@ -80,9 +79,9 @@ import StandardTable from '../../Components/BSBillingTables/StandardTable/Standa
 import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const BSLayout3 = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const { action, selectedProducts } = useSelector(
     GlobalBtoBQuickProductTransfer
   );
@@ -205,14 +204,6 @@ const BSLayout3 = () => {
     await dispatch(getBookingStatus(data));
   };
 
-  const navigateFun = () => {
-    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
-  };
-
-  const navigatePublicFun = () => {
-    navigate(`${commonDirectory}`);
-  };
-
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -288,61 +279,7 @@ const BSLayout3 = () => {
       {UserType != 'Super Admin' &&
         UserType != 'Super Admin User' &&
         (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
-          <div className={`${ss}`}>
-            <p>
-              {(AppExpDate?.RemainingDays < 1 &&
-                AppExpDate?.RemainingHours < 1 &&
-                AppExpDate?.RemainingMinutes < 1 &&
-                AppExpDate?.RemainingSeconds < 1) ||
-                AppExpDate === 'undefined' ? (
-                <span className="ExpiredMessage">
-                  Subscription expired &nbsp;
-                  <a
-                    onClick={() => {
-                      navigatePublicFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </span>
-              ) : AppExpDate?.RemainingDays < 1 ? (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="Expired">
-                    {AppExpDate?.RemainingHours >= 1
-                      ? AppExpDate?.RemainingHours
-                      : AppExpDate?.RemainingMinutes}
-                  </span>{' '}
-                  {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              ) : (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="NosDays">
-                    {AppExpDate?.RemainingDays}
-                  </span>{' '}
-                  days. &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              )}
-            </p>
-          </div>
+         <PlanExpireNotification  ss={ss}/>
         )}
       <div
         className="BSLayout3-Master"

src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
 import { isMobile } from 'react-device-detect';
@@ -75,12 +74,12 @@ import StandardTable from '../../Components/BSBillingTables/StandardTable/Standa
 import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 const BSLayout4 = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const BSLayout4Data = useSelector(getTemplateData);
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
@@ -217,13 +216,7 @@ const BSLayout4 = () => {
     setKioskopen(false);
   };
 
-  const navigateFun = () => {
-    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
-  };
-
-  const navigatePublicFun = () => {
-    navigate(`${commonDirectory}`);
-  };
+  
   const handlePopOverOpen = () => {
     setPopOverOpen(!popOverOpen);
   };
@@ -286,61 +279,7 @@ const BSLayout4 = () => {
       {UserType != 'Super Admin' &&
         UserType != 'Super Admin User' &&
         (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
-          <div className={`${ss}`}>
-            <p>
-              {(AppExpDate?.RemainingDays < 1 &&
-                AppExpDate?.RemainingHours < 1 &&
-                AppExpDate?.RemainingMinutes < 1 &&
-                AppExpDate?.RemainingSeconds < 1) ||
-                AppExpDate === 'undefined' ? (
-                <span className="ExpiredMessage">
-                  Subscription expired &nbsp;
-                  <a
-                    onClick={() => {
-                      navigatePublicFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </span>
-              ) : AppExpDate?.RemainingDays < 1 ? (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="Expired">
-                    {AppExpDate?.RemainingHours >= 1
-                      ? AppExpDate?.RemainingHours
-                      : AppExpDate?.RemainingMinutes}
-                  </span>{' '}
-                  {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              ) : (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="NosDays">
-                    {AppExpDate?.RemainingDays}
-                  </span>{' '}
-                  days. &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              )}
-            </p>
-          </div>
+          <PlanExpireNotification  ss={ss}/>
         )}
       <div
         className="BsLayout4-Master"

src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx

@@ -1,6 +1,5 @@
 import { React, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import { isMobile } from 'react-device-detect';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
@@ -79,12 +78,12 @@ import SalesCountForStandard from '../SalesCountForStandard.jsx';
 import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 const BSLayout5 = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const BSLayout5Data = useSelector(getTemplateData);
   const { action, selectedProducts } = useSelector(
     GlobalBtoBQuickProductTransfer
@@ -217,13 +216,7 @@ const BSLayout5 = () => {
     };
   }, []);
 
-  const navigateFun = () => {
-    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
-  };
-  const navigatePublicFun = () => {
-    navigate(`${commonDirectory}`);
-  };
-
+ 
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -302,61 +295,7 @@ const BSLayout5 = () => {
       {UserType != 'Super Admin' &&
         UserType != 'Super Admin User' &&
         (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
-          <div className={`${ss}`}>
-            <p>
-              {(AppExpDate?.RemainingDays < 1 &&
-                AppExpDate?.RemainingHours < 1 &&
-                AppExpDate?.RemainingMinutes < 1 &&
-                AppExpDate?.RemainingSeconds < 1) ||
-              AppExpDate === 'undefined' ? (
-                <span className="ExpiredMessage">
-                  Subscription expired &nbsp;
-                  <a
-                    onClick={() => {
-                      navigatePublicFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </span>
-              ) : AppExpDate?.RemainingDays < 1 ? (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="Expired">
-                    {AppExpDate?.RemainingHours >= 1
-                      ? AppExpDate?.RemainingHours
-                      : AppExpDate?.RemainingMinutes}
-                  </span>{' '}
-                  {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              ) : (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="NosDays">
-                    {AppExpDate?.RemainingDays}
-                  </span>{' '}
-                  days. &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              )}
-            </p>
-          </div>
+          <PlanExpireNotification  ss={ss}/>
         )}
       <div
         className="BSLayout5-Master"

src/Pages/BookingScreen/Template/BSLayout6/BSLayout6.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import { isMobile } from 'react-device-detect';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
@@ -82,9 +81,9 @@ import StandardTable from '../../Components/BSBillingTables/StandardTable/Standa
 import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const BSLayout6 = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const { action, selectedProducts } = useSelector(
     GlobalBtoBQuickProductTransfer
   );
@@ -224,12 +223,7 @@ const BSLayout6 = () => {
     };
   }, []);
 
-  const navigateFun = () => {
-    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
-  };
-  const navigatePublicFun = () => {
-    navigate(`${commonDirectory}`);
-  };
+ 
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -307,62 +301,8 @@ const BSLayout6 = () => {
       />
       {UserType != 'Super Admin' &&
         UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
-          <div className={`${ss}`}>
-            <p>
-              {(AppExpDate?.RemainingDays < 1 &&
-                AppExpDate?.RemainingHours < 1 &&
-                AppExpDate?.RemainingMinutes < 1 &&
-                AppExpDate?.RemainingSeconds < 1) ||
-              AppExpDate === 'undefined' ? (
-                <span className="ExpiredMessage">
-                  Subscription expired &nbsp;
-                  <a
-                    onClick={() => {
-                      navigatePublicFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </span>
-              ) : AppExpDate?.RemainingDays < 1 ? (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="Expired">
-                    {AppExpDate?.RemainingHours >= 1
-                      ? AppExpDate?.RemainingHours
-                      : AppExpDate?.RemainingMinutes}
-                  </span>{' '}
-                  {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              ) : (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="NosDays">
-                    {AppExpDate?.RemainingDays}
-                  </span>{' '}
-                  days. &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              )}
-            </p>
-          </div>
+        (AppExpDate?.RemainingDays <= 30 || AppExpDate === 'undefined') && (
+          <PlanExpireNotification  ss={ss}/>
         )}
 
       <div

src/Pages/BookingScreen/Template/BSLayout7/BSCombo1.jsx

@@ -28,7 +28,6 @@ import {
 } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
 import { isMobile } from 'react-device-detect';
 import { ArrowUpOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
 import { getSession } from '../../../../Services/Others.js';
 import BSNavBarComboSearch from '../../Components/UtillComponents/BSNavBarComboSearch.jsx';
 import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
@@ -72,12 +71,12 @@ import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import MultipleSearch from '../../Components/UtillComponents/MultipleSearch.jsx';
 import VerfiedProducts from '../../Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx';
 import ShortcutKeyHelper from '../../Components/UtillComponents/ShortcutKeyHelper.jsx';
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
 
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 export default function BSCombo1() {
-  const navigate = useNavigate();
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
     GlobalBtoBQuickProductTransfer
@@ -200,14 +199,7 @@ export default function BSCombo1() {
     await dispatch(getSalesDetailData(data)).unwrap();
   };
 
-  const navigateFun = () => {
-    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
-  };
-
-  const navigatePublicFun = () => {
-    navigate(`${commonDirectory}`);
-  };
-
+  
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -307,61 +299,7 @@ export default function BSCombo1() {
       {UserType != 'Super Admin' &&
         UserType != 'Super Admin User' &&
         (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
-          <div className={`${ss}`}>
-            <p>
-              {(AppExpDate?.RemainingDays < 1 &&
-                AppExpDate?.RemainingHours < 1 &&
-                AppExpDate?.RemainingMinutes < 1 &&
-                AppExpDate?.RemainingSeconds < 1) ||
-                AppExpDate === 'undefined' ? (
-                <span className="ExpiredMessage">
-                  Subscription expired &nbsp;
-                  <a
-                    onClick={() => {
-                      navigatePublicFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </span>
-              ) : AppExpDate?.RemainingDays < 1 ? (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="Expired">
-                    {AppExpDate?.RemainingHours >= 1
-                      ? AppExpDate?.RemainingHours
-                      : AppExpDate?.RemainingMinutes}
-                  </span>{' '}
-                  {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              ) : (
-                <p>
-                  Your application subscription will expire within &nbsp;
-                  <span className="NosDays">
-                    {AppExpDate?.RemainingDays}
-                  </span>{' '}
-                  days. &nbsp;
-                  <a
-                    onClick={() => {
-                      navigateFun();
-                    }}
-                    className="upgrdbtn"
-                  >
-                    RENEWAL NOW <ArrowUpOutlined />
-                  </a>
-                </p>
-              )}
-            </p>
-          </div>
+          <PlanExpireNotification  ss={ss}/>
         )}
 
       {/* Combo Container */}

src/Pages/BookingScreen/Template/PlanExpireNotification.jsx

@@ -0,0 +1,368 @@
+// import { useSelector } from "react-redux";
+// import { GlobalAppExpDateData } from "../../../Features/BookingScreen/BookingData/BookingData";
+// import { useNavigate } from "react-router-dom";
+// import { ArrowUpOutlined } from '@ant-design/icons';
+// import { StoredSessionData } from "../../../Features/ThemeChange/ThemeChange";
+// import ExtendSubscriptionModal from "../../ExtentedModal/ExtendSubscriptionModal";
+// import { useDispatch } from "react-redux";
+// import { getPurchasedAppDetails, postInvoice } from "../../../Features/BookingScreen/Pricing/Pricing";
+// import { sendSms } from "../../../Features/Payment/PaymentDetails/PaymentDetails";
+// import { useState } from "react";
+// const subDirectory = import.meta.env.BASE_URL;
+// const commonDirectory = import.meta.env.COMMON_BASE_URL;
+   
+// const PlanExpireNotification = ({ss}) => {
+//     const navigate = useNavigate();
+//     const dispatch = useDispatch();
+    
+//     const AppExpDate = useSelector(GlobalAppExpDateData);
+//     const SessionData = useSelector(StoredSessionData);
+//     const [extendModel, setExtendModel] = useState(false);
+//     console.log("AppExpDate", AppExpDate);
+//       const navigateFun = () => {
+//           navigate(`${subDirectory}PricingPage`, { state: { AppName: SessionData?.AppName } });
+//         };
+      
+//         const navigatePublicFun = () => {
+//           navigate(`${commonDirectory}`);
+//         };
+//          const formatDate = (dateStr) => {
+//             const date = new Date(dateStr);
+//             const year = date.getFullYear();
+//             const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+//             const day = String(date.getDate()).padStart(2, '0');
+//             return `${day}-${month}-${year}`;
+//             };
+//         const freeExtend = async () => {
+//     try {
+//       const { CompId, AppId, BranchId, UserType,UserId } = SessionData;
+
+//       // Current date
+//       const now = new Date();
+//       const currentDate = formatDate(now);
+
+//       // 1️⃣ Get purchased app details
+//       const response1 = await dispatch(
+//         getPurchasedAppDetails({ AppId, UserId })
+//       ).unwrap();
+
+//       const PurchasedDetails = response1?.data?.data;
+
+//       if (!PurchasedDetails || !PurchasedDetails.length) {
+//         console.error('No purchased details found');
+//         return;
+//       }
+
+//       // 2️⃣ Prepare post data
+//       const postData = {
+//         UserId: UserId,
+//         AppId: AppId,
+//         PricingId: PurchasedDetails[0]?.PricingId,
+//         PurDate: currentDate,
+//         NoofDays: 30,
+//         PaymentMode: 27,
+//         PaymentStatus: 'S',
+//         LicenseStatus: PurchasedDetails[0]?.LicenseStatus,
+//         Price: PurchasedDetails[0]?.Price ?? 0,
+//         TaxId: PurchasedDetails[0]?.TaxId ?? 0,
+//         NetPrice: PurchasedDetails[0]?.ExistingPlanNetPrice ?? 0,
+//         ValidityStart: currentDate,
+//         ValidityEnd: addDays(
+//           currentDate,
+//           PurchasedDetails[0]?.NoOfDays
+//         ),
+//         CreatedBy: UserId,
+//         TaxAmount: PurchasedDetails[0]?.TaxAmount ?? 0,
+//         MobileNo: getSession('MobileNo'),
+//         MailId: 'ts@gmmail.com',
+//         Type: "FreeExtend"
+//       };
+
+//       // 3️⃣ Post invoice
+//       const response = await dispatch(postInvoice(postData)).unwrap();
+
+//       // 4️⃣ Send SMS if required
+//       if (response?.data?.statusCode === 1 && response?.data?.SMSbody) {
+//         await dispatch(
+//           sendSms({ body: response.data.SMSbody })
+//         );
+//         setExtendModel(false)
+
+//       }
+
+//     } catch (error) {
+//       console.error('freeExtend error:', error);
+//     }
+//   };
+//   const handleCancel = () => {
+//     Logout();
+//     setExtendModel(false)
+
+//   }
+//   const handlePay = () => {
+//     setExtendModel(false)
+//     let AppName = getSession("AppName")
+//     navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
+//   }
+
+//     return(
+//         <>
+//             <div className={`${ss}`}>
+//             <p>
+//               {(AppExpDate?.RemainingDays < 30 &&
+//                 AppExpDate?.RemainingHours < 30 &&
+//                 AppExpDate?.RemainingMinutes < 50 &&
+//                 AppExpDate?.RemainingSeconds < 60
+//               ) ||
+//               AppExpDate === 'undefined' ? (
+//                 (AppExpDate?.PlanType?.toLowerCase() == "extend expired")?(
+
+//                 <span className="ExpiredMessage"> 
+//                   Subscription expired &nbsp;
+//                   <a
+//                     onClick={() => {
+//                       navigatePublicFun();
+//                     }}
+//                     className="upgrdbtn"
+//                   >
+//                     RENEWAL NOW <ArrowUpOutlined />
+//                   </a>
+//                 </span>
+//                 ) : (
+                    
+//                 )
+//               ) : AppExpDate?.RemainingDays < 1 ? (
+//                 <p>
+//                   Your application subscription will expire within &nbsp;
+//                   <span className="Expired">
+//                     {AppExpDate?.RemainingHours >= 1
+//                       ? AppExpDate?.RemainingHours
+//                       : AppExpDate?.RemainingMinutes}
+//                   </span>{' '}
+//                   {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
+//                   <a
+//                     onClick={() => {
+//                       navigateFun();
+//                     }}
+//                     className="upgrdbtn"
+//                   >
+//                     RENEWAL NOW <ArrowUpOutlined />
+//                   </a>
+//                 </p>
+//               ) : (
+//                 <p>
+//                   Your application subscription will expire within &nbsp;
+//                   <span className="NosDays">
+//                     {AppExpDate?.RemainingDays}
+//                   </span>{' '}
+//                   days. &nbsp;
+//                   <a
+//                     onClick={() => {
+//                       navigateFun();
+//                     }}
+//                     className="upgrdbtn"
+//                   >
+//                     RENEWAL NOW <ArrowUpOutlined />
+//                   </a>
+//                 </p>
+//               )}
+//             </p>
+//           </div>
+//           {extendModel && (
+//                 <ExtendSubscriptionModal  
+//                         onClose={handleCancel}
+//                         onPayNow={handlePay}
+//                         onContinueWithCredits={freeExtend}
+//                     /> 
+//           )}
+//          </>
+//     )
+// }
+// export default PlanExpireNotification;
+import { useSelector } from "react-redux";
+import { GlobalAppExpDateData } from "../../../Features/BookingScreen/BookingData/BookingData";
+import { useNavigate } from "react-router-dom";
+import { ArrowUpOutlined } from '@ant-design/icons';
+import { StoredSessionData } from "../../../Features/ThemeChange/ThemeChange";
+import ExtendSubscriptionModal from "../../ExtentedModal/ExtendSubscriptionModal";
+import { useDispatch } from "react-redux";
+import { getPurchasedAppDetails, postInvoice } from "../../../Features/BookingScreen/Pricing/Pricing";
+import { sendSms } from "../../../Features/Payment/PaymentDetails/PaymentDetails";
+import { useEffect, useState, useMemo } from "react";
+import { getSession } from "../../../Services/Others";
+
+const subDirectory = import.meta.env.BASE_URL;
+const commonDirectory = import.meta.env.COMMON_BASE_URL;
+
+const PlanExpireNotification = ({ ss }) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const AppExpDate = useSelector(GlobalAppExpDateData);
+  const SessionData = useSelector(StoredSessionData);
+  const [extendModel, setExtendModel] = useState(false);
+ const { AppId, UserId } = SessionData;
+  console.log("AppExpDate", AppExpDate);
+
+  // ================= NAVIGATION =================
+  const navigateFun = () => {
+    navigate(`${subDirectory}PricingPage`, { state: { AppName: SessionData?.AppName } });
+  };
+
+  const navigatePublicFun = () => {
+    navigate(`${commonDirectory}`);
+  };
+
+  // ================= DATE FORMAT =================
+  const formatDate = (dateStr) => {
+    const date = new Date(dateStr);
+    return `${String(date.getDate()).padStart(2, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${date.getFullYear()}`;
+  };
+
+  // ================= CHECK STATUS FLAGS =================
+  const isExpired = useMemo(() => {
+    return (
+      AppExpDate?.RemainingDays <= 1 &&
+      AppExpDate?.RemainingHours <= 1 &&
+      AppExpDate?.RemainingMinutes <= 1 &&
+      AppExpDate?.RemainingSeconds <= 1
+    );
+  }, [AppExpDate]);
+
+  const isExtendExpired = useMemo(() => {
+    return AppExpDate?.PlanType?.toLowerCase() === "extend expired";
+  }, [AppExpDate]);
+
+  const isExpiringToday = AppExpDate?.RemainingDays < 1 && !isExpired;
+  const isExpiringSoon = AppExpDate?.RemainingDays >= 1 && AppExpDate?.RemainingDays <= 30;
+
+  // ================= AUTO OPEN EXTEND MODAL =================
+  useEffect(() => {
+    if (isExpired && !isExtendExpired) {
+      setExtendModel(true);
+    }
+  }, [isExpired, isExtendExpired]);
+
+  // ================= FREE EXTEND =================
+  const freeExtend = async () => {
+    try {
+     
+      const now = new Date();y
+      const currentDate = formatDate(now);
+
+      const response1 = await dispatch(getPurchasedAppDetails({ AppId, UserId })).unwrap();
+      const PurchasedDetails = response1?.data?.data;
+
+      if (!PurchasedDetails?.length) return;
+
+      const postData = {
+        UserId,
+        AppId,
+        PricingId: PurchasedDetails[0]?.PricingId,
+        PurDate: currentDate,
+        NoofDays: 30,
+        PaymentMode: 27,
+        PaymentStatus: "S",
+        LicenseStatus: PurchasedDetails[0]?.LicenseStatus,
+        Price: PurchasedDetails[0]?.Price ?? 0,
+        TaxId: PurchasedDetails[0]?.TaxId ?? 0,
+        NetPrice: PurchasedDetails[0]?.ExistingPlanNetPrice ?? 0,
+        ValidityStart: currentDate,
+        ValidityEnd: addDays(currentDate, PurchasedDetails[0]?.NoOfDays),
+        CreatedBy: UserId,
+        TaxAmount: PurchasedDetails[0]?.TaxAmount ?? 0,
+        MobileNo: getSession("MobileNo"),
+        MailId: "ts@gmail.com",
+        Type: "FreeExtend"
+      };
+
+      const response = await dispatch(postInvoice(postData)).unwrap();
+
+      if (response?.data?.statusCode === 1 && response?.data?.SMSbody) {
+        await dispatch(sendSms({ body: response.data.SMSbody }));
+        setExtendModel(false);
+      }
+
+    } catch (error) {
+      console.error("freeExtend error:", error);
+    }
+  };
+
+  const handleCancel = () => {
+    Logout();
+    setExtendModel(false);
+  };
+ const Logout = async () => {
+    const UserId = UserId;
+    const status = 'N';
+    try {
+      const res = await dispatch(GenerateLogout({ UserId, status })).unwrap();
+      if (res?.data?.statusCode === 1) {
+        sessionStorage.clear();
+        window.location.replace(`${commonSubDir}`);
+      }
+    } catch (error) {
+      console.error('Logout failed:', error);
+    }
+  };
+  const handlePay = () => {
+    setExtendModel(false);
+    navigate(`${subDirectory}PricingPage`, { state: { AppName: getSession("AppName") } });
+  };
+
+  // ================= UI BLOCKS =================
+  const ExpiredBlock = () => (
+    <span className="ExpiredMessage">
+      Subscription expired &nbsp;
+      <a onClick={navigatePublicFun} className="upgrdbtn">
+        RENEWAL NOW <ArrowUpOutlined />
+      </a>
+    </span>
+  );
+
+  const ExpiringTodayBlock = () => (
+    <p>
+      Your application subscription will expire within &nbsp;
+      <span className="Expired">
+        {AppExpDate?.RemainingHours >= 1 ? AppExpDate?.RemainingHours : AppExpDate?.RemainingMinutes}
+      </span>{" "}
+      {AppExpDate?.RemainingHours >= 1 ? "Hrs" : "Min"} &nbsp;
+      <a onClick={navigateFun} className="upgrdbtn">
+        RENEWAL NOW <ArrowUpOutlined />
+      </a>
+    </p>
+  );
+
+  const ExpiringDaysBlock = () => (
+    <p>
+      Your application subscription will expire within &nbsp;
+      <span className="NosDays">{AppExpDate?.RemainingDays}</span> days. &nbsp;
+      <a onClick={navigateFun} className="upgrdbtn">
+        RENEWAL NOW <ArrowUpOutlined />
+      </a>
+    </p>
+  );
+
+  // ================= RETURN =================
+  return (
+    <>
+      <div className={ss}>
+        {isExpired && isExtendExpired && <ExpiredBlock />}
+
+        {isExpiringToday && <ExpiringTodayBlock />}
+
+        {isExpiringSoon && <ExpiringDaysBlock />}
+      </div>
+
+      {extendModel && (
+        <ExtendSubscriptionModal
+          onClose={handleCancel}
+          onPayNow={handlePay}
+          onContinueWithCredits={freeExtend}
+        />
+      )}
+    </>
+  );
+};
+
+export default PlanExpireNotification;