Merge pull request 'FIX#223 Logon System Customer mobile number get in salespage' (#224) from March-3-deployment into main

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

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3.jsx

@@ -100,6 +100,11 @@ const BSBillingTable3 = () => {
       setting?.SettingIdName?.toLowerCase() === 'decimal' &&
       setting?.SettingValue === 'Y'
   );
+  const salesaskiosk = preferenceDatas?.[0]?.SettingDtlDetails?.find(
+    (setting) =>
+      setting?.SettingIdName?.toLowerCase() === 'salespageaskiosk' &&
+      setting?.SettingValue === 'Y'
+  );
   const SessionData = useSelector(StoredSessionData);
   const BranchId = SessionData?.BranchId;
   const AppId = SessionData?.AppId;
@@ -2357,7 +2362,7 @@ const BSBillingTable3 = () => {
                       fontSize: '16px',
                     }}
                   >
-                    {tableData?.length > 0 ? (
+                    {(tableData?.length > 0 && !salesaskiosk)? (
                       <Popconfirm
                         title="Delete the items"
                         description="Are you sure you want to clear these items?"

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3pay.jsx

@@ -215,6 +215,7 @@ import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
 import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
 import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
 import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
+import CustomerMobileNumberModal from '../../BookingFunctionality/CustomerOTP.jsx';
 const PaymentGatewayEmbedded = lazy(
   () => import('../../UtillComponents/PaymentGatewayEmbedded.jsx')
 );
@@ -269,6 +270,7 @@ const BSBillingTable3Pay = () => {
   const previousOrderOfferDetails = useSelector(
     GlobalPreviousOrderOfferDetails
   );
+  const CustomerMobileNumber = useSelector(GlobalSelCustId, shallowEqual);
   const AllPaymentOptions = useSelector(GlobalpaymentOptionData);
   const FreeProdList = useSelector(GlobalFreeProdList);
   const offerAppliedProducts = useSelector(
@@ -301,6 +303,7 @@ const BSBillingTable3Pay = () => {
   const FontFamily = useSelector(GlobalSelectedFont);
   const GetCustId = useSelector(GlobalCustId);
   const SelCustId = useSelector(GlobalSelCustId);
+  console.log(GetCustId, SelCustId, 'GetCustId, SelCustId');
   const selOption = useSelector(GlobalSelOption);
   const SelectedTableDetails = useSelector(GlobalSelectedTableDetails);
   const defaultBookingType = useSelector(GlobalDefaultBookingType);
@@ -378,6 +381,17 @@ const BSBillingTable3Pay = () => {
   const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
   const OrderCardDetail = useSelector(GlobalOrderCardDetails);
   const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);
+  const [CustomerOtpmodalopen, setCustomerOtpmodalopen] = useState(false);
+  const isOtpEnabled = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
+    (setting) =>
+      setting?.SettingIdName?.toLowerCase() === 'kioskotp' &&
+      setting?.SettingValue === 'Y'
+  );
+  const salesaskiosk = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
+    (setting) =>
+      setting?.SettingIdName?.toLowerCase() === 'salespageaskiosk' &&
+      setting?.SettingValue === 'Y'
+  );
 
   console.log(OrderCardDetail, 'OrderCardDetail');
   //Total calculation
@@ -707,6 +721,10 @@ const BSBillingTable3Pay = () => {
     // dispatch(getPrintSelectionComponentData(Data1)).unwrap();
   }, []);
 
+  useEffect(() => {
+    (!CustomerMobileNumber && isOtpEnabled && salesaskiosk) && setCustomerOtpmodalopen(true);
+  }, [PrintOrderDetails, CustomerMobileNumber]);
+
   useEffect(() => {
     const getPrintData = async () => {
       try {
@@ -1072,9 +1090,9 @@ const BSBillingTable3Pay = () => {
         setDefaultPaymentMode([]);
       }
     };
-    if (salesBillEdit) {
+    // if (salesBillEdit) {
       setDefaultPaymentOption();
-    }
+    // }
   }, [defaultPaymentTrigger, salesBillEdit]);
 
   const TokenPrint = async (index) => {
@@ -4917,6 +4935,13 @@ const BSBillingTable3Pay = () => {
             }
           />
         )}
+
+        {(CustomerOtpmodalopen && isOtpEnabled && salesaskiosk) && (
+          <CustomerMobileNumberModal
+            open={CustomerOtpmodalopen}
+            HandleCloseModal={() => setCustomerOtpmodalopen(false)}
+          />
+        )}
       </>
     </Suspense>
   );

src/Pages/BookingScreen/Components/BSBillingTables/StandardTable/StandardTablePayment.jsx

@@ -2908,7 +2908,7 @@ const StandardTablePayment = () => {
       PrintOrderDetails?.[0]?.OrderDetails?.[0]?.productDetails?.some(
         (product) => product.TokenAvailable === 'Y'
       );
-    if (!isMobile) {
+    if (isMobile) {
       if (MobileA4Print) {
         await MobileMultiPdfPrintTrigger({
           preferenceDetails,

src/Pages/BookingScreen/Components/BookingFunctionality/CustomerOTP.jsx

@@ -0,0 +1,482 @@
+import { shallowEqual, useSelector } from 'react-redux';
+import {
+  changeCustomerID,
+  ChangeSelectedCustDisable,
+  changeSelectedCustId,
+  changeSelectedOption,
+  PreferenceData,
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
+
+import { useCallback, useEffect, useState } from 'react';
+import {
+  changeKioskCustomerMobileNo,
+  globalKioskCustomerMobileNo,
+} from '../../../../Features/Kiosk/kiosk.js';
+import { HiOutlineBackspace } from 'react-icons/hi';
+import { useDispatch } from 'react-redux';
+import { isIndianMobile } from '../../../../utils/calculations.js';
+import { IoIosWarning } from 'react-icons/io';
+import './CustomerOTP.scss';
+import { Messages } from '../../../../Components/Notifications/Messages.jsx';
+import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
+import {
+  checkLastOrderTimeLimit,
+  sendupiotp,
+} from '../../../../Features/UpiDetails/UpiDetails.js';
+import { StoredSessionData } from '../../../../Features/ThemeChange/ThemeChange.js';
+import { getAddCustomerDetails, postAddCustomerDetails } from '../../../../Features/BookingScreen/Customer/addCustomer.js';
+const CustomerMobileNumberModal = ({ open, HandleCloseModal }) => {
+  const SettingDataSelector = useSelector(PreferenceData);
+  const CustomerMobileNumber = useSelector(globalKioskCustomerMobileNo);
+
+  const SessionData = useSelector(StoredSessionData, shallowEqual);
+  const dispatch = useDispatch();
+  const [number, setNumber] = useState(
+    CustomerMobileNumber ? CustomerMobileNumber : ''
+  );
+  const [messageType, setMessageType] = useState(null);
+  const [messageData, setMessageData] = useState(null);
+  const [canResend, setCanResend] = useState(true);
+  const [otpInput, setOtpInput] = useState(['', '', '', '']);
+  const [otpIndex, setOtpIndex] = useState(0);
+  const [otpSent, setOtpSent] = useState(false);
+  const [otpVerifed, setOtpVerified] = useState(false);
+  const [otpNumber, setOTPNumber] = useState(null);
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(null);
+  const [maxLimitExceededMessage, setMaxLimitExceededMessage] = useState(null);
+  const isOtpEnabled = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
+    (setting) =>
+      setting?.SettingIdName?.toLowerCase() === 'kioskotp' &&
+      setting?.SettingValue === 'Y'
+  );
+  const isTimeLimitEnabled = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
+    (setting) =>
+      (setting?.SettingIdName?.toLowerCase() === 'hours' ||
+        setting?.SettingIdName?.toLowerCase() === 'minutes') &&
+      setting?.SettingValue === 'Y'
+  );
+
+  useEffect(() => {
+    isIndianMobile(number) && fetchCustomerDetails(number);
+  }, [number]);
+  useEffect(() => {
+    if (otpInput.every((input) => input !== '')) {
+      verifyOtp();
+    }
+  }, [otpInput]);
+  const fetchCustomerDetails = async (number) => {
+    const response = await dispatch(
+      getAddCustomerDetails({
+        MobileNo: number,
+        AppId: SessionData.AppId,
+        CompId: SessionData.CompId,
+        BranchId: SessionData.BranchId,
+      })
+    )?.unwrap();
+    if (response?.data?.statusCode === 1) {
+      console.log(
+        'response?.data?.CustomerId',
+        response?.data,
+        response?.data?.data?.[0]?.CustId
+      );
+      dispatch(changeCustomerID(response?.data?.data?.[0]?.CustId));
+      let custvalues = {
+        value: number,
+        label: response?.data?.data?.[0]?.CustName || number,
+        CustId: response?.data?.data?.[0]?.CustId,
+        ...response?.data?.data?.[0],
+      };
+      //  {value: '8428086416', label: 'mohan', CustId: 'CUST1-281-437-74', CustName: 'mohan', Address1: undefined, …}
+      await dispatch(changeSelectedOption(custvalues));
+      await dispatch(changeSelectedCustId(response?.data?.data?.[0]?.CustId));
+      await dispatch(
+             ChangeSelectedCustDisable(true)
+          ); 
+    }else{
+       let postdata = {
+            "CustMobile":number,
+            "CustomerProfile": null,
+            "AppId": SessionData.AppId,
+            "CompId": SessionData.CompId,
+            "BranchId": SessionData.BranchId,
+            "CreatedBy": SessionData.UserId,
+            "InitialOutStanding": null,
+            "OfferType": "P",
+            "MarriedStatus": "N",
+            "CustomerAddressDtl": []
+            }
+    let response1 = await dispatch(postAddCustomerDetails(postdata)).unwrap();
+    
+        if (response1?.data?.statusCode == 1) {
+          dispatch(changeSelectedOption(null));
+          dispatch(
+            changeCustomerID(
+              response1?.data?.CustomerDetails?.[
+                response1?.data?.CustomerDetails.length - 1
+              ]
+            )
+          );
+          dispatch(
+            changeSelectedCustId(response1?.data?.CustomerDetails?.[0]?.CustId)
+          );   
+          dispatch(
+             ChangeSelectedCustDisable(true)
+          );  
+       
+        }  else{
+            setMessageData('Invalid mobile No.');
+            setMessageType('error');
+            setNumber('');
+        }
+    }
+  };
+  const setNumberFun = (newValue) => {
+    setNumber((prevNumber) => {
+      if (prevNumber.length < 10) {
+        return prevNumber + newValue;
+      }
+      return prevNumber;
+    });
+  };
+
+  const handleOtpNumber = (num) => {
+    if (otpIndex > 3) return;
+
+    const newOtp = [...otpInput];
+    newOtp[otpIndex] = num.toString();
+    setOtpInput(newOtp);
+
+    if (otpIndex < 3) {
+      setOtpIndex(otpIndex + 1);
+    }
+  };
+
+  const handleOtpBackspace = () => {
+    if (otpIndex < 0) return;
+
+    const newOtp = [...otpInput];
+
+    if (newOtp[otpIndex]) {
+      newOtp[otpIndex] = '';
+    } else if (otpIndex > 0) {
+      newOtp[otpIndex - 1] = '';
+      setOtpIndex(otpIndex - 1);
+    }
+
+    setOtpInput(newOtp);
+  };
+
+  const handleBackspace = () => {
+    setNumber((prevNumber) => prevNumber.slice(0, -1));
+  };
+  const checkLast30MinOrder = async (MobileNo) => {
+    const response = await dispatch(
+      checkLastOrderTimeLimit({
+        MobileNo,
+        AppId: SessionData.AppId,
+        CompId: SessionData.CompId,
+        BranchId: SessionData.BranchId,
+      })
+    )?.unwrap();
+    return response?.data;
+  };
+  const sendOTP = async () => {
+    const valid = isIndianMobile(number);
+    if (valid) {
+      if (isTimeLimitEnabled) {
+        const withinTimeLimit = await checkLast30MinOrder(number);
+        if (withinTimeLimit?.IsEligible === false) {
+          // setMessageData(withinTimeLimit?.response);
+          // setMessageType('warning');
+          setMaxLimitExceededMessage(withinTimeLimit?.response);
+          setMaxLimitExceeded(true);
+        await dispatch(changeSelectedOption(null));
+        await dispatch(changeSelectedCustId(null));
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+            setMaxLimitExceededMessage(null);
+          }, 2500);
+          return;
+        }
+      }
+    } else {
+      setMessageData('Please enter valid mobile No.');
+      setMessageType('warning');
+      return;
+    }
+    try {
+      setOtpIndex(0);
+      setOtpSent(true);
+      let response = await dispatch(
+        sendupiotp({
+          MobileNo: number,
+          CreatedBy: 0,
+        })
+      )?.unwrap();
+      if (response?.data?.statusCode == 1) {
+        setMessageData('OTP sent to your mobile number');
+        setMessageType('success');
+        setOTPNumber(response?.data?.OTP);
+        startResendTimer();
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const verifyOtp = () => {
+    const enteredOtp = otpInput.join('');
+
+    if (enteredOtp === otpNumber?.toString()) {
+      setMessageType('success');
+      setMessageData('OTP Verified Successfully');
+      setOtpSent(false);
+      setOtpInput(['', '', '', '']);
+      HandleCloseModal();
+      //   setShowPaymentMethods(true);
+      setOtpVerified(true);
+    } else {
+      setMessageType('error');
+      setMessageData('Invalid OTP');
+      setOtpInput(['', '', '', '']);
+      setOtpIndex(0);
+    }
+  };
+  const onComplete = useCallback(() => {
+    setMessageData(null);
+    setMessageType(null);
+  }, []);
+  return (
+    <>
+      <Messages
+        messageType={messageType}
+        messageData={messageData}
+        onComplete={onComplete}
+      />
+      <DefaultModal
+        open={open}
+        // handleCancel={HandleCloseModal}
+        footer={false}
+        width={900}
+        // {width > 768 ? 900 : 700}
+        children={
+          <div className="BSOTPpaymentModal-Master">
+            <h4 className="BSOTPTitlepayment">
+              {isOtpEnabled ? 'Enter Mobile Number To Order' : 'PAYMENT'}
+            </h4>
+            <div className="BSOTPpaymentModal_main">
+              {!otpSent && !otpVerifed && (
+                <>
+                  <div className="BSOTPprompt">
+                    {/* <p style={{ fontFamily: 'Poppins', fontWeight: '600' }}>
+                          Get your order bill on your mobile <br />
+                          via SMS / Whatsapp
+                        </p> */}
+                  </div>
+
+                  <div
+                    className={`BSOTPinputModal ${number ? 'green-border' : ''}`}
+                  >
+                    <input type="text" value={number} readOnly />
+                    {number?.length === 10 && !isIndianMobile(number) && (
+                      <div className="input-err">
+                        Please Enter Valid Mobile Number
+                      </div>
+                    )}
+                  </div>
+
+                  {/* input boxxes */}
+                  <div
+                    className="BSOTPdailpad-main"
+                    // style={{
+                    //   pointerEvents: selectedPaymentOption && 'none',
+                    //   opacity: selectedPaymentOption && '40%',
+                    // }}
+                  >
+                    <div
+                      className="BSOTPKiosk-dailpadModal"
+                      //   style={{ backgroundColor: getKioskLightColourdata }}
+                    >
+                      <div className="BSOTPKioskPayment-dailpad-1">
+                        <p onClick={() => setNumberFun(1)}>1</p>
+                        <p onClick={() => setNumberFun(2)}>2</p>
+                        <p onClick={() => setNumberFun(3)}>3</p>
+                      </div>
+                      <div className="BSOTPKioskPayment-dailpad-2">
+                        <p onClick={() => setNumberFun(4)}>4</p>
+                        <p onClick={() => setNumberFun(5)}>5</p>
+                        <p onClick={() => setNumberFun(6)}>6</p>
+                      </div>
+                      <div className="BSOTPKioskPayment-dailpad-3">
+                        <p onClick={() => setNumberFun(7)}>7</p>
+                        <p onClick={() => setNumberFun(8)}>8</p>
+                        <p onClick={() => setNumberFun(9)}>9</p>
+                      </div>
+                      <div className="BSOTPKioskPayment-dailpad-4">
+                        <p onClick={handleBackspace}>
+                          <HiOutlineBackspace
+                            size={30}
+                            style={{ marginBottom: '-2px' }}
+                          />
+                        </p>
+                        <p onClick={() => setNumberFun(0)}>0</p>
+                        <p style={{ background: 'none' }}></p>
+                      </div>
+                    </div>
+                  </div>
+                  {isOtpEnabled && (
+                    <>
+                      <button
+                        className="BSOTPKioskOPTBTn"
+                        // disabled={number?.length === 10}
+                        onClick={() => sendOTP()}
+                      >
+                        Get OTP
+                      </button>
+                    </>
+                  )}
+                </>
+              )}
+              {isOtpEnabled && otpSent && (
+                <div className="BSOTPotp-section">
+                  <div style={{ fontFamily: 'Poppins', fontSize: '16px' }}>
+                    Enter OTP
+                  </div>
+                  {/* Mobile Number + Edit */}
+                  <div className="BSOTPotp-mobile-row">
+                    <span className="BSOTPotp-mobile-number">{number}</span>
+                    <button
+                      className="BSOTPotp-edit-btn"
+                      onClick={() => {
+                        setOtpSent(false);
+                        setOtpInput(['', '', '', '']);
+                      }}
+                    >
+                      Edit
+                    </button>
+                    ``{' '}
+                  </div>
+
+                  {/* 4 Digit OTP Input */}
+                  <div className='optEnterResendOTP'>
+                    <div className="BSOTPotp-input-container">
+                      {otpInput.map((digit, index) => (
+                        <input
+                          key={index}
+                          type="text"
+                          value={digit}
+                          className={`BSOTPotp-box ${index === otpIndex ? 'active' : ''}`}
+                          onClick={() => setOtpIndex(index)}
+                          readOnly
+                        />
+                      ))}
+                    </div>
+
+                    <div className="BSOTPotp-buttons">
+                      {/* <button
+                            className="verify-btn"
+                            disabled={otpInput.join('').length !== 4}
+                            onClick={verifyOtp}
+                          >
+                            Verify
+                          </button> */}
+
+                      <button
+                        className="BSOTPresend-btn"
+                        disabled={!canResend}
+                        onClick={sendOTP}
+                      >
+                        {canResend ? 'Resend OTP' : `Resend in ${resendTimer}s`}
+                      </button>
+                    </div>
+                  </div>
+                  <div className="BSOTPKioskPayment-dailpad-main">
+                    <div
+                      className="BSOTPKiosk-dailpadModal"
+                      // style={{ backgroundColor: getKioskLightColourdata }}
+                    >
+                      <div className="BSOTPKioskPayment-dailpad-1">
+                        <p onClick={() => handleOtpNumber(1)}>1</p>
+                        <p onClick={() => handleOtpNumber(2)}>2</p>
+                        <p onClick={() => handleOtpNumber(3)}>3</p>
+                      </div>
+                      <div className="BSOTPKioskPayment-dailpad-2">
+                        <p onClick={() => handleOtpNumber(4)}>4</p>
+                        <p onClick={() => handleOtpNumber(5)}>5</p>
+                        <p onClick={() => handleOtpNumber(6)}>6</p>
+                      </div>
+                      <div className="BSOTPKioskPayment-dailpad-3">
+                        <p onClick={() => handleOtpNumber(7)}>7</p>
+                        <p onClick={() => handleOtpNumber(8)}>8</p>
+                        <p onClick={() => handleOtpNumber(9)}>9</p>
+                      </div>
+                      <div className="BSOTPKioskPayment-dailpad-4">
+                        <p onClick={handleOtpBackspace}>
+                          <HiOutlineBackspace size={30} />
+                        </p>
+                        <p onClick={() => handleOtpNumber(0)}>0</p>
+                        <p style={{ background: 'none' }}></p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Buttons */}
+                </div>
+              )}
+              {/* {(!isOtpEnabled || (otpVerifed)) && <>
+                      <p className="choiseTitle">Select Payment Method</p>
+                      {console.log('selectedOption', selectedPaymentOption)}
+                      <div
+                        className="paymentChoise"
+                        style={{
+                          pointerEvents:
+                            (!isIndianMobile(number) || selectedPaymentOption) &&
+                            'none',
+                          opacity:
+                            (!isIndianMobile(number) || selectedPaymentOption) && '40%',
+                        }}
+                      >
+                        
+                        {counterAvailability && (
+                          <div
+                            className="upi"
+                            onClick={() => handlePaymentOption('Counter')}
+                          >
+                            <MdOutlinePayments size={50} opacity={0.5} />
+                            <p style={{ fontSize: '12px', textAlign: 'center' }}>
+                              PAY AT THE COUNTER
+                            </p>
+                          </div>
+                        )}
+                        {paymentOptionDetailsBusinessUpi && (
+                          <div
+                            className="upi"
+                            onClick={() => handlePaymentOption('BU')}
+                          >
+                            <img src={UPI} alt="" width={60} />
+                            <p> UPI</p>
+                          </div>
+                        )}
+                        {!paymentOptionDetailsBusinessUpi && !counterAvailability && (
+                          <div className="payment-error-msg">
+                            Please Set Payment Options Contact Admin
+                          </div>
+                        )}
+                      </div>
+                    </>} */}
+            </div>
+            <div
+              className={`BSOTPItem3Warning ${maxLimitExceeded ? 'showing' : ''}`}
+            >
+              <p>
+                <IoIosWarning size={30} color="#b99400" />
+                {maxLimitExceededMessage}
+              </p>
+            </div>
+          </div>
+        }
+      />
+    </>
+  );
+};
+export default CustomerMobileNumberModal;

src/Pages/BookingScreen/Components/BookingFunctionality/CustomerOtp.scss

@@ -0,0 +1,701 @@
+.BSOTPpaymentModal_main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  gap: 10px;
+
+  .BSOTPprompt {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+
+    p {
+      text-align: left;
+      font-family: 'Gilroy';
+      font-weight: 700;
+      font-size: 26px;
+    }
+  }
+
+  .BSOTPKioskPayment-inputModal {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding: 1rem 1rem;
+    flex-direction: column;
+
+    .input-err {
+      color: red;
+      font-size: 13px;
+      margin-top: 4px;
+      font-family: 'Poppins', sans-serif;
+    }
+
+    input {
+      width: 50vw;
+      height: 4rem;
+      padding: 0rem 1rem;
+      font-family: 'Gilroy', sans-serif;
+      font-size: 22px;
+      border: none;
+      letter-spacing: 1px;
+      font-weight: 500;
+      border: 1px solid rgba(0, 0, 0, 0.199);
+      border-radius: 8px;
+    }
+  }
+
+  .BSOTPKiosk-dailpadModal {
+    background-color: #e1eef1;
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+    padding: 10px 10px;
+    border-radius: 8px;
+    width: 60%;
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+  }
+
+  .BSOTPpaymentChoise {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 3rem;
+    row-gap: 1rem;
+
+    .BSOTPupi {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      width: 110px;
+      height: 110px;
+      border: 1px solid rgba(0, 0, 0, 0.199);
+      border-radius: 8px;
+      cursor: pointer;
+
+      p {
+        font-weight: 500;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .BSOTPchoiseTitle {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    padding: 1rem 2rem;
+  }
+
+  .BSOTPKioskPayment-dailpad-main {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    padding: 16px 0px;
+    align-items: center;
+    width: 100%;
+    overflow-x: hidden;
+  }
+  .BSOTPKioskPayment-dailpad-1,
+  .BSOTPKioskPayment-dailpad-2,
+  .BSOTPKioskPayment-dailpad-3 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 1.5rem;
+    row-gap: 2rem;
+
+    p {
+      background-color: #fff;
+      padding: 10px 10px;
+      width: 25%;
+      text-align: center;
+      border-radius: 12px;
+      cursor: pointer;
+      font-family: 'Gilroy', sans-serif;
+      font-weight: 600;
+      font-size: 28px;
+    }
+  }
+
+  .BSOTPKioskPayment-dailpad-4 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row-reverse;
+    column-gap: 1.5rem;
+
+    p {
+      background-color: #fff;
+      padding: 10px 10px;
+      width: 25%;
+      text-align: center;
+      border-radius: 12px;
+      cursor: pointer;
+      font-family: 'Gilroy', sans-serif;
+      font-weight: 600;
+      font-size: 28px;
+    }
+  }
+
+  .ant-modal .ant-modal-content {
+    height: 90vh !important;
+  }
+}
+
+.BSOTPTitlepayment {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  font-family: 'Barlow Condensed';
+  font-size: 24px !important;
+}
+
+.BSOTPpaymentCardMain {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-around;
+  background-color: #fff;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+  padding: 1rem 1rem;
+  height: 45vh;
+  position: relative;
+
+  .ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
+    background-color: var(--SELECTED_COLOR) !important;
+    border-color: var(--SELECTED_COLOR) !important;
+  }
+
+  .BSOTPcardChooice {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 10px;
+    column-gap: 10px;
+  }
+
+  .BSOTPcardoption {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    column-gap: 10px;
+    // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    box-shadow:
+      rgba(0, 0, 0, 0.1) 0px 10px 36px 0px,
+      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+    border-radius: 6px;
+
+    padding: 4px 14px;
+    cursor: pointer;
+    width: 95%;
+
+    img {
+      width: 30px;
+      height: 22px;
+    }
+  }
+
+  .BSOTPcardname {
+    font-size: 16px;
+    font-weight: 550;
+  }
+
+  .BSOTPcardname2 {
+    font-size: 11px;
+    font-weight: 550;
+    margin-top: -1px;
+  }
+
+  .BSOTPbankChooice {
+    width: 60%;
+    border-radius: 6px;
+
+    .searchbar {
+      display: flex;
+      padding: 1px 12px;
+      // border: 1px solid #1c1c1c;
+      // box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+      box-shadow:
+        rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+        rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+
+      border-radius: 6px;
+      align-items: center;
+      // border: 1px solid black;
+    }
+
+    input {
+      border: none;
+      outline: none;
+      padding: 1px 10px;
+    }
+
+    .titlechoose {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      column-gap: 1rem;
+      padding-bottom: 9px;
+      border-bottom: 1px solid #1c1c1c;
+    }
+
+    .choosecardMain {
+      padding: 10px 10px;
+      margin-top: -1rem;
+    }
+
+    .bankname {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+      font-size: 16px;
+      padding: 10px 10px;
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+  }
+
+  .BSOTPbuttonOfpay {
+    position: absolute;
+    bottom: -60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    column-gap: 11rem;
+    padding: 1rem 4rem;
+
+    .inr {
+      font-size: 22px;
+      color: #4eb14e;
+      font-weight: 600;
+    }
+
+    .primary_Button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 16px;
+      cursor: pointer;
+      background-color: #4eb14e !important;
+      color: #fff;
+      border-radius: 6px;
+    }
+  }
+}
+
+.searchbar :focus {
+  .ant-input-outlined {
+    box-shadow: none;
+  }
+}
+
+.searchbar:focus-within {
+  .ant-input-outlined {
+    box-shadow: none;
+  }
+}
+
+.searchbar .ant-input-search .ant-input:focus {
+  background-color: #fff !important;
+  border: #fff !important;
+}
+
+.searchbar .ant-input-search .ant-input:focus {
+  border-color: #fff !important;
+}
+
+.paymentCardMain .ant-collapse {
+  width: 100%;
+  border: none;
+  // box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+  box-shadow:
+    rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+}
+
+.paymentCardMain .ant-radio-group,
+.ant-radio-wrapper span.ant-radio + * {
+  padding: 10px 10px;
+}
+
+.paymentCardMain .ant-modal .ant-modal-content {
+  padding: 54px 35px !important;
+}
+
+.paymentCardMain
+  .ant-collapse
+  .ant-collapse-item:last-child
+  > .ant-collapse-content {
+  overflow: scroll;
+  height: 26vh;
+}
+
+.paymentCardMain .ant-input-search .ant-input:hover,
+.paymentCardMain .ant-input:hover {
+  border: none;
+  outline: none;
+
+  &:focus {
+    border: none;
+    outline: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .BSOTPpaymentModal_main .BSOTPKiosk-dailpadModal {
+    padding: 2rem 0rem;
+  }
+
+  .BSOTPpaymentModal_main .BSOTPpaymentChoise {
+    column-gap: 1rem;
+  }
+
+  .BSOTPpaymentModal_main .BSOTPpaymentChoise .upi {
+    width: 100px;
+  }
+
+  .BSOTPpaymentModal_main .BSOTPbuttonOfpay {
+    width: max-content;
+  }
+
+  .BSOTPTitlepayment {
+    text-wrap: nowrap;
+    font-size: 19px !important;
+  }
+}
+
+.BSOTPpayment-modal {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: white;
+  width: 420px;
+  height: 540px;
+  border-radius: 12px;
+  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
+  padding: 16px;
+  z-index: 10;
+}
+
+.BSOTPmodal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  // filter: blur(5px);
+  // pointer-events: none;
+  // user-select: none;
+  width: 70vw;
+  margin: 1rem 0;
+  font-family: 'Poppins';
+  font-weight: 500;
+
+  @media (max-width: 768px) {
+    width: 95vw;
+  }
+}
+
+.BSOTPpayment-modal {
+  position: fixed;
+  z-index: 1000;
+  top: 50%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: 0;
+  height: 100%;
+  backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  /* for Safari */
+}
+
+.BSOTPpaymentclose-btn {
+  width: max-content;
+  height: max-content;
+  border: none;
+  background-color: unset;
+  color: #ff0000;
+  cursor: pointer;
+  font-size: 20px;
+  padding: 4px;
+}
+
+.BSOTPpayment-frame {
+  width: 70vw;
+  height: 70vh;
+
+  @media (max-width: 768px) {
+    width: 95vw;
+    height: 80vh;
+  }
+}
+
+.BSOTPKioskOPTBTn {
+  width: 60%;
+  padding: 12px 16px;
+  font-size: 20px;
+  font-family: 'Poppins';
+  font-weight: 400;
+  border: none;
+  outline: none;
+  background-color: #000000;
+  color: #fff;
+  border-radius: 10px;
+  cursor: pointer;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+
+.BSOTPotp-section {
+  text-align: center;
+  width: 100%;
+
+  .BSOTPotp-mobile-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 20px;
+    font-family: 'Poppins';
+
+    .BSOTPotp-mobile-number {
+      font-size: 20px;
+      font-weight: 600;
+      letter-spacing: 1px;
+    }
+
+    .BSOTPotp-edit-btn {
+      background: none;
+      border: none;
+      color: #007bff;
+      font-size: 14px;
+      cursor: pointer;
+      font-family: 'Poppins';
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .BSOTPotp-input-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+
+    .BSOTP-otp-box {
+      width: 65px;
+      height: 65px;
+      font-size: 28px;
+      text-align: center;
+      border: 2px solid #ccc;
+      border-radius: 8px;
+      outline: none;
+      transition: 0.2s ease;
+
+      &:focus {
+        border-color: #28a745;
+        box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
+      }
+    }
+
+    .otp-box.active {
+      border: 2px solid #28a745;
+    }
+  }
+
+  .BSOTPotp-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+
+    button {
+      min-width: 140px;
+      padding: 12px 18px;
+      font-size: 16px;
+      font-weight: 500;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: 0.2s ease;
+      font-family: 'Poppins', sans-serif !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    .verify-btn {
+      background-color: #28a745;
+      border: none;
+      color: #fff;
+
+      &:hover:not(:disabled) {
+        background-color: #218838;
+      }
+    }
+
+    .BSOTPresend-btn {
+      background-color: #ffc107;
+      border: none;
+      color: #000;
+
+      &:hover:not(:disabled) {
+        background-color: #e0a800;
+      }
+    }
+  }
+}
+.BSOTPItem3Warning {
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  bottom: 0;
+  right: 0%;
+  background-color: #00000096;
+  z-index: 100;
+  font-family: 'Poppins';
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-direction: column;
+  backdrop-filter: blur(4px);
+
+  /* Animation initial state */
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
+
+  p {
+    display: flex;
+    box-shadow:
+      rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background-color: #fff;
+    padding: 15px 20px;
+    border-radius: 8px;
+
+    /* popup animation */
+    transform: scale(0.8);
+    transition: transform 0.3s ease;
+  }
+}
+
+/* When visible */
+.BSOTPItem3Warning.showing {
+  opacity: 1;
+  visibility: visible;
+
+  p {
+    transform: scale(1);
+  }
+}
+
+.BSOTPinputModal {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  .input-err {
+    font-family: 'Poppins', sans-serif;
+    font-size: 12px;
+    margin-top: 6px;
+    color: rgb(224, 0, 0);
+  }
+  input {
+    width: 60%;
+    outline: none;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    margin: 0;
+    text-align: center;
+    height: 45px;
+    border-radius: 6px;
+    border: 1px solid #333;
+    font-size: 20px;
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+  }
+}
+.BSOTPdailpad-main {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+  padding: 14px 0px;
+  align-items: center;
+  overflow-x: hidden;
+  width: 100%;
+}
+
+.BSOTPotp-box {
+  width: 55px;
+  height: 55px;
+  font-size: 24px;
+  text-align: center;
+  border: 2px solid #ccc;
+  border-radius: 8px;
+  outline: none;
+  transition: 0.2s ease;
+  font-family: 'Poppins';
+  font-weight: 500;
+
+  &:focus {
+    border-color: #28a745;
+    box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
+  }
+}
+
+.BSOTPotp-box.active {
+  border: 2px solid #28a745;
+}
+.BSOTPpaymentModal-Master {
+  scrollbar-width: thin;
+  height: 90vh;
+  overflow: auto;
+}
+.optEnterResendOTP {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}

src/Pages/BookingScreen/Components/UtillComponents/BSSelectCustomer.jsx

@@ -136,8 +136,11 @@ const BSCustomerSelect = ({ TopName = null }) => {
   );
   const BSLayout1Data = useSelector(getTemplateData);
   const selOption = useSelector(GlobalSelOption);
+  console.log(selOption, 'selOption');
   const GetCustId = useSelector(GlobalCustId);
+  console.log(GetCustId, 'GetCustId');
   const Custdisable = useSelector(GlobalSelectedCustDisable);
+  console.log(Custdisable, 'Custdisable');
   const SessionData = useSelector(StoredSessionData);
   const OrderOfferDetails = useSelector(
     GlobalOfferAppliedProducts,

src/Pages/BookingScreen/Template/PaymentOptions.js

@@ -192,12 +192,25 @@ export const usePaymentOptions = ({ AppId, CompId, BranchId, UserId }) => {
           ) === undefined &&
           Pay_at_the_counter !== undefined;
 
-        if (UpiCondition) {
+        let BusinessUPI = Formated_Payment_Details?.find((item) => item.OptionName == 'Business Upi')
+        if (UpiCondition || BusinessUPI) {
           let UpiDetailsResponse = await dispatch(
             getPaymentUPIDetails({ CompId, AppId, BranchId, DetailType: 'U' })
           ).unwrap();
+          let BusinessUpi = await dispatch(
+            getPaymentUPIDetails({ CompId, AppId, BranchId, DetailType: 'BU' })
+          ).unwrap();
+          let data = BusinessUpi?.data?.data
+          const hasNonUPI = Formated_Payment_Details
+            ?.find(item => item.OptionName === 'Pay at the counter')
+            ?.ModeDetails
+            ?.every(e => e?.ModeName !== "UPI");
+
+          const hasChooseBusinessUpi = Formated_Payment_Details
+            ?.find(item => item.OptionName === 'Business Upi')
+            ?.ModeDetails
           if (
-            UpiDetailsResponse?.data?.statusCode === 0 &&
+            UpiDetailsResponse?.data?.statusCode === 0 && BusinessUpi?.data?.statusCode === 0 && BusinessUpi?.data?.data?.length === 0 &&
             UpiDetailsResponse?.data?.data?.length === 0
           ) {
             Formated_Payment_Details = Formated_Payment_Details.map((item) => {
@@ -210,6 +223,62 @@ export const usePaymentOptions = ({ AppId, CompId, BranchId, UserId }) => {
               return item;
             });
           }
+          else if (BusinessUpi?.data?.data?.length === 1  && hasNonUPI && hasChooseBusinessUpi) {
+            Formated_Payment_Details = Formated_Payment_Details.map((item) => {
+              if (item.OptionName === 'Pay at the counter') {
+                let reqDatfromBusinessUpi = BusinessUPI?.ModeDetails?.[0]
+
+                return {
+                  ...item,
+                  ModeDetails: [
+                    ...item?.ModeDetails,
+                    {
+                      "PaymentOptionId": reqDatfromBusinessUpi?.PaymentOptionId,
+                      "PaymentModeId": reqDatfromBusinessUpi?.PaymentModeId,
+                      "ModeId": reqDatfromBusinessUpi?.ModeId,
+                      "ModeName": "UPI",
+                      "ModeDefault": "Y",
+                      "ModeImage": "",
+                      "PayOpt": null,
+                      "CardType": null,
+                      "MerchantUPIId": null,
+                      "MerchantMobile": null,
+                      "MerchantNumber": null,
+                      "RefreshToken": null,
+                      "Token": null,
+                      "MerchantId": null,
+                      "ActiveStatus": reqDatfromBusinessUpi?.ActiveStatus,
+                      "CreatedBy": 0,
+                      "CreatedDate": "2026-03-03T19:07:54.393",
+                      "UpdatedBy": null,
+                      "UpdatedDate": null,
+                      "MethodDetails": []
+                    }
+                  ],
+                };
+              }
+
+              // IMPORTANT: return other items unchanged
+              return item;
+            });
+          }
+          else if (UpiDetailsResponse?.data?.statusCode === 0 && UpiDetailsResponse?.data?.data?.length === 0) {
+            Formated_Payment_Details = Formated_Payment_Details.map((item) => {
+              if (item.OptionName === 'Pay at the counter') {
+                return {
+                  ...item,
+                  ModeDetails: Pay_at_the_counter_witoutUPIMode,
+                };
+              }
+              return item;
+            });
+
+          }
+
+
+
+          ////
+
         }
 
         if (

src/Pages/Kiosk/Payment/KioskPaymentWithModal.jsx

@@ -968,16 +968,6 @@ const KioskPayment = (props) => {
         };
         await dispatch(sendSms(postData));
       }
-      const goFullScreen = () => {
-        const elem = document.documentElement;
-
-        if (!document.fullscreenElement) {
-          elem.requestFullscreen?.().catch((err) => {
-            console.log("Fullscreen error:", err);
-          });
-        }
-      };
-      goFullScreen();
       clearAllStates();
     } else {
       if (
@@ -1954,7 +1944,7 @@ const KioskPayment = (props) => {
         open={open}
         handleCancel={!selectedPaymentOption && HandleCloseModal}
         footer={false}
-        width={width > 768 ? 900 : 700}
+        width={width > 768 ? 800 : 600}
         children={
           showPaymentGatewayOptions ? (
             <div className="paymentCardMain">

src/Pages/Kiosk/Payment/KioskPaymentWithModal.scss

@@ -560,4 +560,5 @@
       }
     }
   }
-}
+}
+

src/Pages/Payment/PaymentDetails/PaymentDetailsList.jsx

@@ -31,6 +31,7 @@ import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';
 import { DropDowns } from '../../../Components/Forms/DropDown.jsx';
 import { useAuth } from '../../../AuthContext.jsx';
 import { FeatureAddon } from '../../../Features/BookingScreen/BookingData/BookingData.js';
+  import "../../../Pages/openingStock/openingStockForm.scss"
 
 const PaymentDetailsList = () => {
   const { SadminuserAccess } = useAuth();

src/Pages/Preference/PreferenceList.jsx

@@ -67,6 +67,7 @@ const PreferenceList = () => {
     dashboard: allSettingsMap['dashboard']?.value === 'Y',
     shortcutkeys: allSettingsMap['shortcutkeys']?.value === 'Y',
     autoreceivestock: allSettingsMap['autoreceivestock']?.value === 'Y',
+    salespageaskiosk: allSettingsMap['salespageaskiosk']?.value === 'Y',
     kioskotp: allSettingsMap['kioskotp']?.value === 'Y',
     decimal: allSettingsMap['decimal']?.value === 'Y',
     enabledModules: [
@@ -308,6 +309,7 @@ const PreferenceList = () => {
         dashboard: values.dashboard,
         shortcutkeys: values.shortcutkeys,
         autoreceivestock: values.autoreceivestock,
+        salespageaskiosk: values.salespageaskiosk,
         kioskotp: values.kioskotp,
         decimal: values.decimal,
         searchfocus: values.searchfocus,
@@ -512,6 +514,10 @@ const PreferenceList = () => {
               {renderCheckbox(
                 'decimal',
                 'Display values with 2 decimal places throughout the app?'
+              )}
+               {renderCheckbox(
+                'salespageaskiosk',
+                'Do you want to open sales page as kiosk layout?'
               )}
               {(allSettingsMap['onlineindividualslots'] !== undefined ||
                 allSettingsMap['allow individual booking'] !== undefined ||

src/Pages/UpiDetails/UpiDetailslist.jsx

@@ -23,6 +23,7 @@ import {
 } from '../../Features/UpiDetails/UpiDetails.js';
 import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js';
 import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
+ import "../../Pages/openingStock/openingStockForm.scss"
 
 const UpiDetailslist = () => {
   const navigateTo = useNavigate();

src/Pages/openingStock/openingStockForm.scss

@@ -299,3 +299,12 @@
 .purchase-entry-form {
     width: 100%;
 }
+.otpInput {
+  width: 2.5rem !important;
+  height: 2.5rem;
+  margin: 0 0.14rem;
+  font-size: 1rem;
+  text-align: center;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}

src/Styles/Payment/PaymentDetails/PaymentDetails.scss

@@ -30,6 +30,7 @@
   display: flex;
   flex-direction: row;
   column-gap: 0.5rem;
+  margin-top: 10px;
 }
 
 .defaultandCustomisedTheme {

src/Styles/UpiDetails/upidetails.scss

@@ -27,8 +27,8 @@
   display: flex;
   flex-direction: row;
   column-gap: 0.5rem;
+  margin-top: 10px;
 }
-
 // Branch Login Design by Vicky
 
 .branchLoginMaster {