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

675 lines
25 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Tooltip, Badge, Popconfirm, DatePicker } from 'antd';
import dayjs from 'dayjs';
import moment from 'moment';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
import { isMobile } from 'react-device-detect';
import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
import BSItemCard from '../../Components/BSItemCards/BSItemCard';
import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical';
import { dynamicComponentProps } from '../DynamicComponentProps.js';
import {
SelectedGlobalLayoutColorDetail,
SelectedGlobalCatgColorDetail,
SelectedGlobalCardColorDetail,
SelectedGlobalSubCatgColorDetail,
GlobalPricingAppPricingName,
StoredSessionData,
getTemplateData,
SelectedGlobalBillingColorDetail,
} from '../../../../Features/ThemeChange/ThemeChange';
import '../../../../Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss';
import {
GlobalSalesDetailData,
getSalesDetailData,
GlobalCombosearch,
GlobalOrderCardDetails,
GlobalOrderStatus,
PreferenceData,
GlobalAppExpDateData,
GlobalBtoBQuickProductTransfer,
GlobalOtherSevices,
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
import { getSession } from '../../../../Services/Others.js';
import {
getKioskDatas,
globalKioskSalesCount,
} from '../../../../Features/Kiosk/kiosk.js';
import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
import {
GLobalSadminUserPin,
putSadminUserExit,
checkSession,
ApplicationPreferences,
} from '../../../../Features/BrachLogin/BranchLogin';
import {
getBookingStatus,
GlobalBookingStatus,
} from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
// Jsx Files
const BSKioskCounterPayment = lazy(
() => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
);
const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
const ListOfSalesInvoices = lazy(
() =>
import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
);
const BSComboItemCard = lazy(
() => import('../../Components/BSItemCards/BSComboItemCard.jsx')
);
const BranchTransferComponent = lazy(
() =>
import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
);
const BSExpireProductsList = lazy(
() => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
);
const BSOtherServiceItemCard = lazy(
() => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
);
const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
const SalesCountForStandard = lazy(
() => import('../SalesCountForStandard.jsx')
);
const StandardTable = lazy(
() =>
import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
);
const BsBookingitemCard = lazy(
() => import('../../Components/BSItemCards/BsBookingitemCard.jsx')
);
const ComboSalesBillTable = lazy(
() =>
import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
);
const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
// const PlanExpireNotification = lazy(() => import('../PlanExpireNotification.jsx'));
import PlanExpireNotification from '../PlanExpireNotification.jsx';
const BSLayout1 = () => {
const dispatch = useDispatch();
const { selectedDate, setSelectedDate } = useDateStore();
const SessionData = useSelector(StoredSessionData);
const AppId = SessionData?.AppId;
const CompId = SessionData?.CompId;
const BranchId = SessionData?.BranchId;
const UserId = SessionData?.UserId;
const UserType = SessionData?.UserType;
const GlobalLayoutColorDetail = useSelector(SelectedGlobalLayoutColorDetail);
const GlobalsalesDetailData = useSelector(GlobalSalesDetailData);
const SelectedCatgColor = useSelector(SelectedGlobalCatgColorDetail);
const SelectedCardColor = useSelector(SelectedGlobalCardColorDetail);
const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail);
const SettingDataSelector = useSelector(PreferenceData);
const badgeCount = useSelector(globalKioskSalesCount);
const Comboglobal = useSelector(GlobalCombosearch);
const BSLayout1Data = useSelector(getTemplateData);
const OrderStatus = useSelector(GlobalOrderStatus);
const BookingStatus = useSelector(GlobalBookingStatus);
const tableData = useSelector(GlobalOrderCardDetails);
const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
const SAdminuserPin = useSelector(GLobalSadminUserPin);
const AppExpDate = useSelector(GlobalAppExpDateData);
console.log('AppExpDate:', AppExpDate);
const { action, selectedProducts } = useSelector(
GlobalBtoBQuickProductTransfer
);
const OtherServicesglobal = useSelector(GlobalOtherSevices);
const CheckBookingStatus =
BookingStatus?.find((item) => item.ScreenType === 'Booking')
?.ScreenStatus ?? 'Open';
const BookingNavbar = BSLayout1Data?.BookingNavbar?.[0];
const BookingCategory = BSLayout1Data?.BookingCategory;
const BookingSubCategory = BSLayout1Data?.BookingSubCategory;
const BookingCard = BSLayout1Data?.BookingCard;
const BookingBilling = BSLayout1Data?.BookingBilling?.[0];
const [messageType, setMessageType] = useState(null);
const [messageData, setMessageData] = useState(null);
const [connectingState, setConnectingState] = useState({});
// const [AppExpDate, setAppExpDate] = useState(0);
const [screenHeight, setScreenHeight] = useState(window.innerHeight);
const [Kioskopen, setKioskopen] = useState(false);
const [ListOfInvoices, setListOfInvoices] = useState(false);
const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
const [popOverOpen, setPopOverOpen] = useState(false);
const appPreferences = useSelector(ApplicationPreferences);
const salespagefields = appPreferences?.find(
(pref) => pref?.PreferredCatName === 'Sales Page Fields'
)?.PreferenceCatDetails;
const AvailableDate = salespagefields?.find(
(type) =>
type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
type?.PreferredStatus === 'Y'
);
const commonModulePreference = appPreferences?.find(
(preference) => preference?.PreferredCatName === 'Common Module'
)?.PreferenceCatDetails;
const sportsAppPreference = commonModulePreference?.find(
(preference) =>
preference?.PreferredSubCatName === 'SportsApp' &&
preference?.PreferredStatus == 'Y'
);
const [BookingModalOpen, setBookingModalOpen] = useState(false);
const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
(i) => i.SettingIdName === 'DineIn'
)?.[0];
let containerHeight = isMobile
? AppExpDate?.RemainingDays <= 7 ||
AppExpDate?.PlanType?.toLowerCase() === 'extend'
? '575px'
: '595px'
: (UserType != 'Super Admin' &&
UserType != 'Super Admin User' &&
AppExpDate?.RemainingDays <= 7) ||
AppExpDate?.PlanType?.toLowerCase() === 'extend'
? '96vh'
: '99vh';
useEffect(() => {
if (AppId && CompId && BranchId && UserId) {
fetchBookingStatus();
}
}, [AppId, CompId, BranchId, UserId]);
// Fetch data when the component is rendered
useEffect(() => {
fetchAmount();
if (
SessionData?.FeatureAddonData?.FeatureDtls?.find(
(item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
)
) {
fetchKioskDatas();
}
}, [SessionData]);
useEffect(() => {
if (!selectedDate) {
setSelectedDate(dayjs());
}
}, [selectedDate, setSelectedDate]);
const fetchAmount = async () => {
let data = {
CompId: CompId,
BranchId: BranchId,
AppId: AppId,
UserId: UserId,
FromDate: currentDateValue,
ToDate: currentDateValue,
};
await dispatch(getSalesDetailData(data)).unwrap();
};
const fetchBookingStatus = async () => {
let data = {
CompId: CompId,
BranchId: BranchId,
AppId: AppId,
UserId: UserId,
};
await dispatch(getBookingStatus(data));
};
// Example usage
const fetchKioskDatas = async () => {
let data = {
CompId: CompId,
BranchId: BranchId,
AppId: AppId,
UserId: 0,
};
// let response =
await dispatch(getKioskDatas(data));
// const length = response?.payload?.data?.data?.length || 0;
// setBadgeCount(length);
};
const onComplete = useCallback(() => {
setMessageData(null);
setMessageType(null);
}, []);
const openModalKiosk = () => {
setKioskopen(true);
};
const closeModalKiosk = () => {
setKioskopen(false);
};
const handlePopOverOpen = () => {
setPopOverOpen(!popOverOpen);
};
const disablePastDates = (current) => {
return current && current < moment().startOf('day');
};
const handleSupportUser = async () => {
let response = await dispatch(
putSadminUserExit({
AppId: AppId,
CompId: CompId,
BranchId: BranchId,
UserId: UserId,
UpdatedBy: UserId,
})
).unwrap();
if (response?.data?.statusCode == 1) {
setMessageData('success');
setMessageType(response?.data?.data);
setPopOverOpen(false);
const UserId = getSession('UserId');
const sessionId = getSession('SessionId');
await dispatch(checkSession({ UserId, sessionId })).unwrap();
} else {
setMessageData('error');
setMessageType(response?.data?.data);
}
};
const BookingOpenFun = async (status) => {
let Postdata = {
AppId: AppId,
CompId: CompId,
BranchId: BranchId,
UserId: UserId,
ScreenType: 'Booking',
ScreenStatus: status,
CreatedBy: UserId,
Date: new Date(),
};
let Postresponse = await dispatch(PutBookingClose(Postdata)).unwrap();
if (Postresponse?.data?.statusCode === 1) {
fetchBookingStatus();
}
};
const OpenBookingModal = () => {
setBookingModalOpen(true);
};
const HandleBookingModalClose = () => {
setBookingModalOpen(false);
};
const OpenListOfInvoices = () => {
setListOfInvoices(true);
};
const handleInvoiceClose = () => {
setListOfInvoices(false);
};
return (
<Suspense fallback={<CardSkeleton />}>
<>
<Messages
messageType={messageType}
messageData={messageData}
onComplete={onComplete}
/>
{UserType != 'Super Admin' &&
UserType != 'Super Admin User' &&
(AppExpDate?.RemainingDays <= 7 ||
AppExpDate === 'undefined' ||
AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
<PlanExpireNotification />
)}
<div
className="BSLayout1-Master"
style={{ height: containerHeight, overflow: 'hidden' }}
>
<div className="BSLayout1-NavBar">
<BSNavbar1
BookingNavbar={BookingNavbar}
connectingState={connectingState}
setConnectingState={setConnectingState}
/>
</div>
<div
className={
BookingNavbar != 'Navbar3' ? 'BSLayout1' : 'BSLayout1Standard'
}
style={{
backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
}}
>
<div
className="Layout-bill-container"
style={{ marginTop: '12px' }}
>
<div
className="Layout-bill-Subcontainer"
style={{ width: OtherServicesglobal ? '10%' : '100%' }}
>
{UserType !== 'Employee' && (
<div className="pricing-name-details">
{PricingAppPricingName?.[0]?.PricingName +
' / ' +
PricingAppPricingName?.[0]?.Type}
</div>
)}
{AvailableDate && (
<div
style={{
padding: '3px 5px',
marginLeft: '1rem',
}}
>
<DatePicker
disabledDate={disablePastDates}
// defaultValue={moment()} // todays date
format="DD-MMM-YYYY"
value={selectedDate ? dayjs(selectedDate) : null}
onChange={(date) => setSelectedDate(date)}
/>
</div>
)}
{!OtherServicesglobal && (
<SalesCountComponent
DineInAccess={DineInAccess}
GlobalsalesDetailData={GlobalsalesDetailData}
BookingNavbar={BookingNavbar}
/>
)}
{SessionData?.FeatureAddonData?.FeatureDtls?.find(
(item) =>
item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
) &&
!sportsAppPreference && (
<div
style={{
pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
opacity: OrderStatus > 0 ? 0.5 : 1,
}}
>
{!OtherServicesglobal && (
<Tooltip title={'Kiosk Sales'}>
<Badge
count={badgeCount}
offset={[-10, 3]}
size="small"
>
<PozoKioskIcon
onClick={() => openModalKiosk()}
style={{
cursor: 'pointer',
fontSize: '1.5rem',
}}
className="iconsize"
/>
</Badge>
</Tooltip>
)}
</div>
)}
{!OtherServicesglobal && (
<TooltipWrapper
title={'Low Stock Alerts'}
isMobile={isMobile}
>
{' '}
<BSExpireProductsList />
</TooltipWrapper>
)}
{Kioskopen && (
<BSKioskCounterPayment
Kioskopen={Kioskopen}
closeKioskModal={closeModalKiosk}
/>
)}
{SAdminuserPin?.length > 0 &&
UserType != 'Super Admin User' && (
<div>
<SAdminUserNotification
SAdminuserPin={SAdminuserPin}
popOverOpen={popOverOpen}
handleSupportUser={handleSupportUser}
handlePopOverOpen={handlePopOverOpen}
/>
</div>
)}
{!OtherServicesglobal && (
<>
<div>
{CheckBookingStatus == 'Open' ? (
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper
title={'Booking Close'}
isMobile={isMobile}
>
{' '}
<BookingCloseIcon
onClick={OpenBookingModal}
bgFill={'#52c41a'}
style={{
fontSize: '16px',
marginTop: '4px',
color: '#52c41a',
cursor: 'pointer',
}}
/>
</TooltipWrapper>
</div>
) : (
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper
title="Booking Open"
isMobile={isMobile}
>
<Popconfirm
placement="leftTop"
title="Booking Open"
description="Are you sure you want to Open the sales?"
okText="Yes"
cancelText="No"
onConfirm={() => BookingOpenFun('Open')}
>
<span>
<BookingCloseIcon
bgFill="red"
style={{
fontSize: '16px',
marginTop: '4px',
color: '#52c41a',
cursor: 'pointer',
}}
/>
</span>
</Popconfirm>
</TooltipWrapper>
</div>
)}
</div>
<div style={{ marginLeft: '10px' }}>
<TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
{''}
<BSEwayBillicon
style={{ cursor: 'pointer', marginTop: '5px' }}
onClick={OpenListOfInvoices}
/>
</TooltipWrapper>
</div>
</>
)}
</div>
</div>
<div className="BSLayout1-ContentDiv">
<div className="BSCategory1-Contentcont">
<div
style={{
backgroundColor:
SelectedCatgColor?.['OverallBackgroundColor'],
}}
>
{!OtherServicesglobal && (
<CategoryHorizontal
categoryFunction={dynamicComponentProps(
'Category',
BSLayout1Data?.BookingCategory?.[1],
BSLayout1Data?.BookingCategory?.[0]
)}
/>
)}
{OtherServicesglobal && (
<BSOtherServicesHorizontalcat
categoryFunction={dynamicComponentProps(
'Category',
BSLayout1Data?.BookingCategory?.[1],
BSLayout1Data?.BookingCategory?.[0]
)}
/>
)}
</div>
<div className="BSCategory1-Cardcont">
<div
style={{
backgroundColor:
SelectedSubCatgColor?.['OverallBackgroundColor'],
}}
>
{Comboglobal === false && !OtherServicesglobal && (
<SubCategoryVertical
categoryFunction={dynamicComponentProps(
'SubCategory',
BSLayout1Data?.BookingSubCategory?.[1],
BSLayout1Data?.BookingSubCategory?.[0]
)}
/>
)}
</div>
<div
className="layout1-card-content"
style={{
backgroundColor:
SelectedCardColor?.['OverallBackgroundColor'],
width: '100vw',
display: 'flex',
}}
>
{Comboglobal === false &&
!OtherServicesglobal &&
(AvailableDate ? (
<BsBookingitemCard
screenHeight={screenHeight}
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout1Data?.BookingCard?.[1],
BSLayout1Data?.BookingCard?.[0]
)}
/>
) : (
<BSItemCard
connectingState={connectingState}
setConnectingState={setConnectingState}
screenHeight={screenHeight}
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout1Data?.BookingCard?.[1],
BSLayout1Data?.BookingCard?.[0]
)}
/>
))}
{Comboglobal === true && !OtherServicesglobal && (
<BSComboItemCard
screenHeight={screenHeight}
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout1Data?.BookingCard?.[1],
BSLayout1Data?.BookingCard?.[0]
)}
/>
)}
{OtherServicesglobal && (
<BSOtherServiceItemCard
screenHeight={screenHeight}
cardFunctionality={dynamicComponentProps(
'Card',
BSLayout1Data?.BookingCard?.[1],
BSLayout1Data?.BookingCard?.[0]
)}
/>
)}
</div>
</div>
</div>
<div className="BSCategory1-tablecont">
{action ? (
<BranchTransferComponent />
) : (
<>
{BSLayout1Data?.BookingBilling?.[0] == 'Billing1' && (
<BSBillingTable1 />
)}
{BSLayout1Data?.BookingBilling?.[0] == 'Billing2' && (
<BSBillingTable2 />
)}
{BSLayout1Data?.BookingBilling?.[0] == 'Billing3' && (
<BSBillingTable3 />
)}
{BSLayout1Data?.BookingBilling?.[0] == 'Billing4' && (
<BSBillingTable4 />
)}
{BSLayout1Data?.BookingBilling?.[0] == 'Billing5' && (
<BSBillingTable5 />
)}
{BSLayout1Data?.BookingBilling?.[0] == 'Billing6' && (
<BSBillingTable6 />
)}
{BSLayout1Data?.BookingBilling?.[0] == 'Billing7' && (
<BSBillingTable7 />
)}
{BookingBilling == 'Billing8' && <ComboSalesBillTable />}
{BSLayout1Data?.BookingBilling?.[0] ==
'StandardBilling' && (
<div className="BSCategory2New">
<StandardTable />
</div>
)}
</>
)}
</div>
</div>
</div>
</div>
{BookingModalOpen && (
<RetailBookingClosing
PaymentOpen={BookingModalOpen}
PaymentClose={HandleBookingModalClose}
/>
)}
{ListOfInvoices && (
<ListOfSalesInvoices
ListOfInvoicesOpen={ListOfInvoices}
handleInvoiceClose={handleInvoiceClose}
/>
)}
</>
</Suspense>
);
};
export default BSLayout1;