529 lines
16 KiB
React
529 lines
16 KiB
React
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { useSelector, useDispatch } from 'react-redux';
|
||
|
|
import BSLayout1 from '../../Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx';
|
||
|
|
import BSLayout2 from '../../Pages/BookingScreen/Template/BSLayout2/BSLayout2.jsx';
|
||
|
|
import BSLayout3 from '../../Pages/BookingScreen/Template/BSLayout3/BSLayout3.jsx';
|
||
|
|
import BSLayout4 from '../../Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx';
|
||
|
|
import BSLayout5 from '../../Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx';
|
||
|
|
import BSLayout6 from '../../Pages/BookingScreen/Template/BSLayout6/BSLayout6.jsx';
|
||
|
|
import BSCombo from '../../Pages/BookingScreen/Template/BSLayout7/BSCombo1.jsx';
|
||
|
|
import {
|
||
|
|
getPrintSelectionComponentData,
|
||
|
|
getTemplate,
|
||
|
|
getTemplateData,
|
||
|
|
GlobalPricingAppPricingName,
|
||
|
|
changetemplateData,
|
||
|
|
PricingAppPricingNameData,
|
||
|
|
changeSessionData,
|
||
|
|
GlobalScanTemplate,
|
||
|
|
changeScanTemplate,
|
||
|
|
} from '../../Features/ThemeChange/ThemeChange';
|
||
|
|
import {
|
||
|
|
ChangeBranchFinancialStatus,
|
||
|
|
changeProductSubCategorie,
|
||
|
|
ChangeScreenSize,
|
||
|
|
FeatureAddon,
|
||
|
|
getConfigType,
|
||
|
|
getLayoutCategories,
|
||
|
|
getLayoutSubCategories,
|
||
|
|
getPreferenceData,
|
||
|
|
getUnpaidData,
|
||
|
|
GlobalFeatAddOnData,
|
||
|
|
GlobalProductCategorie,
|
||
|
|
} from '../../Features/BookingScreen/BookingData/BookingData.js';
|
||
|
|
import { getSession } from '../../Services/Others';
|
||
|
|
import { usePaymentOptions } from '../../Pages/BookingScreen/Template/PaymentOptions.js';
|
||
|
|
import { getCustomerDisplayWindow } from '../../Features/customerDisplayWindow/customerDisplayWindow.js';
|
||
|
|
import { ChangeRedirectStatus } from '../../Features/AppPage/CenterPage.js';
|
||
|
|
import { WithoutSalesSetup } from './WithoutSalesSetup.jsx';
|
||
|
|
import {
|
||
|
|
changeholddata,
|
||
|
|
gettinghold,
|
||
|
|
} from '../../Features/BookingScreen/HoldOption/HoldOption.js';
|
||
|
|
import { getBranchDetail } from '../../Features/BrachLogin/BranchLogin.js';
|
||
|
|
import Loader from '../../Components/Loader/Loader.jsx';
|
||
|
|
|
||
|
|
const BookingPage = () => {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const templateData = useSelector(getTemplateData);
|
||
|
|
const ProdCat = useSelector(GlobalProductCategorie);
|
||
|
|
console.log(templateData, "templateData")
|
||
|
|
const BookingLayout = templateData?.BookingLayout?.[0];
|
||
|
|
const [ismounted, setIsmounted] = useState(false)
|
||
|
|
const [templateLoaded, setTemplateLoaded] = useState(false);
|
||
|
|
const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
|
||
|
|
// const Advance = PricingAppPricingName?.some(item => item.PricingName === "Advance");
|
||
|
|
const Pro = PricingAppPricingName?.some((item) => item.PricingName === 'Customized');
|
||
|
|
const CompId = getSession('CompId');
|
||
|
|
const BranchId = getSession('BranchId');
|
||
|
|
const AppId = getSession('AppId');
|
||
|
|
const UserId = getSession('UserId');
|
||
|
|
const AppName = getSession('AppName');
|
||
|
|
const UserType = getSession('UserType');
|
||
|
|
const AuthToken = sessionStorage.getItem("auth");
|
||
|
|
const SessionMobileNo = getSession("MobileNo");
|
||
|
|
// const [FeatureAddonData, setFeatureAddonData] = useState([]);
|
||
|
|
const FeatureAddonData = useSelector(GlobalFeatAddOnData)
|
||
|
|
const Scantemplatedata = useSelector(GlobalScanTemplate)
|
||
|
|
// useEffect(() => {
|
||
|
|
// dispatch(
|
||
|
|
// getPreferenceData({ CompId: CompId, AppId: AppId, BranchId: BranchId })
|
||
|
|
// );
|
||
|
|
// financialYear();
|
||
|
|
// // dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
|
||
|
|
// }, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (BranchId) {
|
||
|
|
unpaidandHoldFun();
|
||
|
|
}
|
||
|
|
}, [BranchId]);
|
||
|
|
const updateScreenSize = () => {
|
||
|
|
dispatch(ChangeScreenSize(window.innerWidth));
|
||
|
|
};
|
||
|
|
useEffect(() => {
|
||
|
|
// Set initial screen size
|
||
|
|
updateScreenSize();
|
||
|
|
|
||
|
|
// Add event listener to track changes in screen size
|
||
|
|
window.addEventListener('resize', updateScreenSize);
|
||
|
|
|
||
|
|
// Clean up the event listener on component unmount
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('resize', updateScreenSize);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
const unpaidandHoldFun = async () => {
|
||
|
|
let data = {
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
AppId: AppId,
|
||
|
|
};
|
||
|
|
try {
|
||
|
|
await dispatch(getUnpaidData(data)).unwrap();
|
||
|
|
let response = await dispatch(gettinghold(data)).unwrap();
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
// handleHold();
|
||
|
|
dispatch(changeholddata(response?.data?.data));
|
||
|
|
} else {
|
||
|
|
dispatch(changeholddata([]));
|
||
|
|
}
|
||
|
|
} catch {
|
||
|
|
(err) => {
|
||
|
|
console.log(err);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// const financialYear = async () => {
|
||
|
|
// const response = await dispatch(
|
||
|
|
// getBranchDetail({ BrId: BranchId })
|
||
|
|
// ).unwrap();
|
||
|
|
// if (response?.data?.statusCode === 1) {
|
||
|
|
// const data = response?.data?.data?.[0];
|
||
|
|
// const FYStatus = data?.FYStatus;
|
||
|
|
// const FYStartsFrom = data?.FYStartsFrom
|
||
|
|
// ? new Date(data.FYStartsFrom)
|
||
|
|
// : null;
|
||
|
|
// const today = new Date();
|
||
|
|
// today.setHours(0, 0, 0, 0);
|
||
|
|
// if (FYStartsFrom) FYStartsFrom.setHours(0, 0, 0, 0);
|
||
|
|
|
||
|
|
// let statusToDispatch = 'N';
|
||
|
|
|
||
|
|
// if (FYStatus === 'N') {
|
||
|
|
// statusToDispatch = 'Y';
|
||
|
|
// } else if (FYStatus === 'Y') {
|
||
|
|
// if (FYStartsFrom && FYStartsFrom <= today) {
|
||
|
|
// statusToDispatch = 'Y';
|
||
|
|
// } else {
|
||
|
|
// statusToDispatch = 'N';
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// dispatch(ChangeBranchFinancialStatus(statusToDispatch));
|
||
|
|
// }
|
||
|
|
// };
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const SessionData = {
|
||
|
|
CompId,
|
||
|
|
BranchId,
|
||
|
|
AppId,
|
||
|
|
UserId,
|
||
|
|
AppName,
|
||
|
|
UserType,
|
||
|
|
AuthToken,
|
||
|
|
SessionMobileNo,
|
||
|
|
FeatureAddonData,
|
||
|
|
};
|
||
|
|
dispatch(changeSessionData(SessionData));
|
||
|
|
}, [BranchId, FeatureAddonData]);
|
||
|
|
|
||
|
|
usePaymentOptions({
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
AppId: AppId,
|
||
|
|
UserId: UserId,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
ProdCat &&
|
||
|
|
dispatch(
|
||
|
|
getLayoutSubCategories({
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
AppId: AppId,
|
||
|
|
ProdCat: ProdCat,
|
||
|
|
})
|
||
|
|
).unwrap();
|
||
|
|
}, [ProdCat]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
|
||
|
|
dispatch(getConfigType({ TypeName: 'Booking Type' })).unwrap();
|
||
|
|
dispatch(ChangeRedirectStatus(true));
|
||
|
|
dispatch(changeProductSubCategorie('NaN'));
|
||
|
|
dispatch(
|
||
|
|
getLayoutCategories({ CompId: CompId, BranchId: BranchId, AppId: AppId })
|
||
|
|
).unwrap();
|
||
|
|
let data;
|
||
|
|
if (UserType === 'Super Admin' || UserType === 'Super Admin User') {
|
||
|
|
data = {
|
||
|
|
appId: AppId,
|
||
|
|
compId: CompId,
|
||
|
|
branchId: BranchId,
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
data = {
|
||
|
|
appId: AppId,
|
||
|
|
userId: UserId,
|
||
|
|
};
|
||
|
|
// getFeatureAddonData();
|
||
|
|
}
|
||
|
|
// dispatch(getConfigType({ TypeName: 'Booking Type' })).unwrap();
|
||
|
|
|
||
|
|
dispatch(PricingAppPricingNameData(data)).unwrap();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// useEffect(() => {
|
||
|
|
// if (Advance) {
|
||
|
|
|
||
|
|
// Professional('Advance');
|
||
|
|
// }
|
||
|
|
// }, [Advance]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchData = async (Plan) => {
|
||
|
|
if (templateLoaded) return; // STOP duplicate calls
|
||
|
|
|
||
|
|
|
||
|
|
const Data = { AppId, CompId, BranchId };
|
||
|
|
if (Scantemplatedata?.Scantemplate && (Scantemplatedata?.changetemp == 'Combo')) {
|
||
|
|
console.log("dont want any changes")
|
||
|
|
} else
|
||
|
|
if (Scantemplatedata?.changetemp == 'Layout' && (Scantemplatedata?.OldTemp == 'Combo1' ||
|
||
|
|
Scantemplatedata?.OldTemp == 'Combo2')) {
|
||
|
|
let tempdata = {
|
||
|
|
BookingLayout: [
|
||
|
|
'Layout2',
|
||
|
|
[
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71805,
|
||
|
|
OptionId: 45,
|
||
|
|
OptionName: 'Category',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71807,
|
||
|
|
OptionId: 47,
|
||
|
|
OptionName: 'Card',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71808,
|
||
|
|
OptionId: 48,
|
||
|
|
OptionName: 'Billing',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71809,
|
||
|
|
OptionId: 166,
|
||
|
|
OptionName: 'Navbar',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
],
|
||
|
|
BookingNavbar: [
|
||
|
|
'Navbar3',
|
||
|
|
[
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71811,
|
||
|
|
OptionId: 74,
|
||
|
|
OptionName: 'Search',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71812,
|
||
|
|
OptionId: 75,
|
||
|
|
OptionName: 'RePrint',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71813,
|
||
|
|
OptionId: 77,
|
||
|
|
OptionName: 'QuickAdd',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71814,
|
||
|
|
OptionId: 76,
|
||
|
|
OptionName: 'DineIn',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71815,
|
||
|
|
OptionId: 79,
|
||
|
|
OptionName: 'TakeAway',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71816,
|
||
|
|
OptionId: 80,
|
||
|
|
OptionName: 'Offer',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71817,
|
||
|
|
OptionId: 82,
|
||
|
|
OptionName: 'ExtraCharge',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71825,
|
||
|
|
OptionId: 130,
|
||
|
|
OptionName: 'Hold',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71826,
|
||
|
|
OptionId: 172,
|
||
|
|
OptionName: 'AddCustomer',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
],
|
||
|
|
BookingCategory: [
|
||
|
|
'Category5',
|
||
|
|
[
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71818,
|
||
|
|
OptionId: 95,
|
||
|
|
OptionName: 'Image',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71819,
|
||
|
|
OptionId: 96,
|
||
|
|
OptionName: 'Background',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
],
|
||
|
|
BookingCard: [
|
||
|
|
'Card4',
|
||
|
|
[
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71821,
|
||
|
|
OptionId: 117,
|
||
|
|
OptionName: 'Background',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71822,
|
||
|
|
OptionId: 119,
|
||
|
|
OptionName: 'Price',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71823,
|
||
|
|
OptionId: 120,
|
||
|
|
OptionName: 'SmallImage',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71824,
|
||
|
|
OptionId: 121,
|
||
|
|
OptionName: 'ImageLeft',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
],
|
||
|
|
BookingBilling: [
|
||
|
|
'StandardBilling',
|
||
|
|
[
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71825,
|
||
|
|
OptionId: 130,
|
||
|
|
OptionName: 'Hold',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71825,
|
||
|
|
OptionId: 130,
|
||
|
|
OptionName: 'DineIn',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71826,
|
||
|
|
OptionId: 171,
|
||
|
|
OptionName: 'Background',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71826,
|
||
|
|
OptionId: 172,
|
||
|
|
OptionName: 'AddCustomer',
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71828,
|
||
|
|
OptionId: 210,
|
||
|
|
OptionName: 'Sl.No',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71829,
|
||
|
|
OptionId: 211,
|
||
|
|
OptionName: 'Item',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71830,
|
||
|
|
OptionId: 214,
|
||
|
|
OptionName: 'Quantity',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71831,
|
||
|
|
OptionId: 216,
|
||
|
|
OptionName: 'Amount',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71832,
|
||
|
|
OptionId: 217,
|
||
|
|
OptionName: 'Edit',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
TemplateOptionsId: 71833,
|
||
|
|
OptionId: 218,
|
||
|
|
OptionName: 'Delete',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
],
|
||
|
|
};
|
||
|
|
await dispatch(changeScanTemplate({ Scantemplate: false, changetemp: Scantemplatedata?.changetemp, Template: tempdata, OldTemp: Scantemplatedata?.OldTemp }))
|
||
|
|
// setIsmounted(false)
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const templateResponse = await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
|
||
|
|
dispatch(getPrintSelectionComponentData(Data)).unwrap();
|
||
|
|
setTemplateLoaded(true)
|
||
|
|
if (
|
||
|
|
!templateResponse?.data?.data ||
|
||
|
|
templateResponse.data.data.length === 0
|
||
|
|
) {
|
||
|
|
// If no template data, call Professional('Advance')
|
||
|
|
Professional(Plan);
|
||
|
|
// setIsmounted(false)
|
||
|
|
}
|
||
|
|
// else {
|
||
|
|
// setIsmounted(false)
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
// Check if template data is empty or not
|
||
|
|
|
||
|
|
};
|
||
|
|
const Advance = PricingAppPricingName?.some(
|
||
|
|
(item) => item.PricingName === 'Premium'
|
||
|
|
);
|
||
|
|
const Pro = PricingAppPricingName?.some(
|
||
|
|
(item) => item.PricingName === 'Pro'
|
||
|
|
);
|
||
|
|
const hasCustomizedTemplate = FeatureAddonData?.FeatureDtls?.some(
|
||
|
|
(item) => item?.FeatureAddonName?.toLowerCase() === 'customized template'
|
||
|
|
);
|
||
|
|
if (PricingAppPricingName?.length === 0) return;
|
||
|
|
console.log(PricingAppPricingName,FeatureAddonData,"FeatureAddonDataFeatureAddonData")
|
||
|
|
if (PricingAppPricingName?.length > 0) {
|
||
|
|
if (Advance) {
|
||
|
|
fetchData('Advance');
|
||
|
|
// Professional('Advance');
|
||
|
|
} else if (Pro) {
|
||
|
|
if (hasCustomizedTemplate) {
|
||
|
|
fetchData();
|
||
|
|
} else {
|
||
|
|
Professional('Pro');
|
||
|
|
// setIsmounted(false)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// if (hasCustomizedTemplate) {
|
||
|
|
// fetchData('Standard');
|
||
|
|
// } else {
|
||
|
|
fetchData('Standard');
|
||
|
|
// Professional('Standard');
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
// setIsmounted(false)
|
||
|
|
}
|
||
|
|
}, [PricingAppPricingName]);
|
||
|
|
useEffect(() => {
|
||
|
|
const handleUnload = () => {
|
||
|
|
const customerDisplayWindow = getCustomerDisplayWindow(); // Retrieve from your state/redux
|
||
|
|
if (customerDisplayWindow && !customerDisplayWindow.closed) {
|
||
|
|
customerDisplayWindow.postMessage({ type: 'refresh' }, '*');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Add beforeunload listener when the component mounts
|
||
|
|
window.addEventListener('beforeunload', handleUnload);
|
||
|
|
|
||
|
|
// Clean up the event listener when the component unmounts
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('beforeunload', handleUnload);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const Professional = async (data) => {
|
||
|
|
const tempData = {
|
||
|
|
SelectedApplication: AppId,
|
||
|
|
AppName: AppName,
|
||
|
|
Type: data,
|
||
|
|
// === 'Standard' ? 'Standard' : 'Pro'
|
||
|
|
};
|
||
|
|
|
||
|
|
dispatch(changetemplateData(tempData));
|
||
|
|
};
|
||
|
|
|
||
|
|
// const getFeatureAddonData = async () => {
|
||
|
|
// let featureAddon = await dispatch(
|
||
|
|
// FeatureAddon({ AppId: AppId, UserId: UserId })
|
||
|
|
// ).unwrap();
|
||
|
|
|
||
|
|
// if (featureAddon?.data?.statusCode === 1) {
|
||
|
|
// setFeatureAddonData(featureAddon?.data?.data?.[0]?.FeatAddonHdr?.[0]);
|
||
|
|
// } else {
|
||
|
|
// setFeatureAddonData([]);
|
||
|
|
// }
|
||
|
|
// };
|
||
|
|
if (ismounted)
|
||
|
|
return (
|
||
|
|
<div style={{
|
||
|
|
position: "fixed",
|
||
|
|
top: "0",
|
||
|
|
left: "0",
|
||
|
|
right: "0",
|
||
|
|
bottom: "0",
|
||
|
|
height: "100vh",
|
||
|
|
width: "100vw",
|
||
|
|
backgroundColor: "#fff"
|
||
|
|
}}>
|
||
|
|
<Loader />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
return (
|
||
|
|
<div style={{ backgroundColor: '#fff !important' }}>
|
||
|
|
{Object.keys(templateData)?.length > 0 ? (
|
||
|
|
<>
|
||
|
|
{BookingLayout === 'Layout1' && <BSLayout1 />}
|
||
|
|
{BookingLayout === 'Layout2' && <BSLayout2 />}
|
||
|
|
{BookingLayout === 'Layout3' && <BSLayout3 />}
|
||
|
|
{BookingLayout === 'Layout4' && <BSLayout4 />}
|
||
|
|
{BookingLayout === 'Layout5' && <BSLayout5 />}
|
||
|
|
{BookingLayout === 'Layout6' && <BSLayout6 />}
|
||
|
|
{BookingLayout?.includes('Combo') && <BSCombo />}
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>{/* {Advance ? <div>Loading...</div> : null} */}</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BookingPage;
|