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

621 lines
22 KiB
JavaScript

import React, {
useEffect,
useState,
useCallback,
lazy,
Suspense,
useMemo,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment';
import { Tooltip, Badge, Popconfirm } from 'antd';
import { isMobile } from 'react-device-detect';
import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
import SubCategoryHorizontal from '../../Components/BSSubCategories/BSSubCategoryHorizontal';
import BSItemCard from '../../Components/BSItemCards/BSItemCard';
import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
import { dynamicComponentProps } from '../DynamicComponentProps.js';
import {
getTemplateData,
GlobalPricingAppPricingName,
SelectedGlobalBillingColorDetail,
SelectedGlobalCardColorDetail,
SelectedGlobalCatgColorDetail,
SelectedGlobalLayoutColorDetail,
SelectedGlobalSubCatgColorDetail,
StoredSessionData,
} from '../../../../Features/ThemeChange/ThemeChange';
import {
GlobalSalesDetailData,
getSalesDetailData,
GlobalCombosearch,
PreferenceData,
GlobalOrderStatus,
GlobalAppExpDateData,
GlobalBtoBQuickProductTransfer,
GlobalOtherSevices,
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import { getSession } from '../../../../Services/Others.js';
import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
import {
getKioskDatas,
globalKioskSalesCount,
} from '../../../../Features/Kiosk/kiosk.js';
import {
GLobalSadminUserPin,
putSadminUserExit,
checkSession,
ApplicationPreferences,
} from '../../../../Features/BrachLogin/BranchLogin.js';
// Icons
import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
import {
getBookingStatus,
GlobalBookingStatus,
} from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
import RetailBookingClosing from '../RetailBookingClose.jsx';
// Jsx Files
const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
const BSKioskCounterPayment = lazy(
() => import('../../Components/UtillComponents/BSKioskCounterPayment.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 BSOtherServicesHorizontalcat = lazy(
() => import('../../Components/BSCategories/BSOtherServicesHorizontalcat')
);
const SalesCountForStandard = lazy(
() => import('../SalesCountForStandard.jsx')
);
const StandardTable = lazy(
() =>
import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
);
const ComboSalesBillTable = lazy(
() =>
import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
);
// const PlanExpireNotification = lazy(
// () => import('../PlanExpireNotification.jsx')
// );
import PlanExpireNotification from '../PlanExpireNotification.jsx';
const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
// Scss
import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
const BSLayout3 = () => {
const dispatch = useDispatch();
const { action, selectedProducts } = useSelector(
GlobalBtoBQuickProductTransfer
);
const SettingDataSelector = useSelector(PreferenceData);
const BSLayout3Data = useSelector(getTemplateData);
const GlobalLayoutColorDetail = useSelector(SelectedGlobalLayoutColorDetail);
const GlobalsalesDetailData = useSelector(GlobalSalesDetailData);
const SelectedCatgColor = useSelector(SelectedGlobalCatgColorDetail);
const SelectedCardColor = useSelector(SelectedGlobalCardColorDetail);
const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail);
const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
const OtherServicesglobal = useSelector(GlobalOtherSevices);
const Comboglobal = useSelector(GlobalCombosearch);
const badgeCount = useSelector(globalKioskSalesCount);
const OrderStatus = useSelector(GlobalOrderStatus);
const SessionData = useSelector(StoredSessionData);
const [messageType, setMessageType] = useState(null);
const [messageData, setMessageData] = useState(null);
const AppExpDate = useSelector(GlobalAppExpDateData);
// const [AppExpDate, setAppExpDate] = useState(0);
const [Kioskopen, setKioskopen] = useState(false);
const BookingStatus = useSelector(GlobalBookingStatus);
const appPreferences = useSelector(ApplicationPreferences);
const commonModulePreference = appPreferences?.find(
(preference) => preference?.PreferredCatName === 'Common Module'
)?.PreferenceCatDetails;
const sportsAppPreference = commonModulePreference?.find(
(preference) =>
preference?.PreferredSubCatName === 'SportsApp' &&
preference?.PreferredStatus == 'Y'
);
const CheckBookingStatus =
BookingStatus?.find((item) => item.ScreenType === 'Booking')
?.ScreenStatus ?? 'Open';
const [BookingModalOpen, setBookingModalOpen] = useState(false);
const [popOverOpen, setPopOverOpen] = useState(false);
const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
const BookingNavbar = BSLayout3Data?.BookingNavbar?.[0];
const BookingCategory = BSLayout3Data?.BookingCategory;
const BookingSubCategory = BSLayout3Data?.BookingSubCategory;
const BookingCard = BSLayout3Data?.BookingCard;
const BookingBilling = BSLayout3Data?.BookingBilling?.[0];
const animations = ['example1', 'example2', 'example3'];
const [count, setcount] = useState(0);
let ss = animations[count];
const DineInAccess = useMemo(() => {
return SettingDataSelector?.[0]?.SettingDtlDetails.filter(
(i) => i.SettingIdName === 'DineIn'
)?.[0];
}, [SettingDataSelector]);
const [connectingState, setConnectingState] = useState({});
const [ListOfInvoices, setListOfInvoices] = useState(false);
const AppId = SessionData?.AppId;
const CompId = SessionData?.CompId;
const BranchId = SessionData?.BranchId;
const UserId = SessionData?.UserId;
const UserType = SessionData?.UserType;
const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
let containerHeight = isMobile
? AppExpDate?.RemainingDays <= 7 ||
AppExpDate?.PlanType?.toLowerCase() === 'extend'
? '576px'
: '590px'
: (UserType != 'Super Admin' &&
UserType != 'Super Admin User' &&
AppExpDate?.RemainingDays <= 7) ||
AppExpDate?.PlanType?.toLowerCase() === 'extend'
? '95vh'
: '99vh';
const SAdminuserPin = useSelector(GLobalSadminUserPin);
useEffect(() => {
if (AppId && CompId && BranchId && UserId) {
fetchBookingStatus();
}
}, [AppId, CompId, BranchId, UserId]);
useEffect(() => {
fetchAmount();
if (
SessionData?.FeatureAddonData?.FeatureDtls?.find(
(item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
)
) {
fetchKioskDatas();
}
}, [SessionData]);
const fetchKioskDatas = async () => {
let data = {
CompId: CompId,
BranchId: BranchId,
AppId: AppId,
UserId: 0,
};
await dispatch(getKioskDatas(data));
};
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));
};
const openModalKiosk = () => {
setKioskopen(true);
};
const closeModalKiosk = () => {
setKioskopen(false);
};
const handlePopOverOpen = () => {
setPopOverOpen(!popOverOpen);
};
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 onComplete = useCallback(() => {
setMessageData(null);
setMessageType(null);
}, []);
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();
} else {
}
};
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="BSLayout3-Master"
style={{ height: containerHeight, overflow: 'hidden' }}
>
<div className="BSLayout3-NavBar">
<BSNavbar1
BookingNavbar={BookingNavbar}
connectingState={connectingState}
setConnectingState={setConnectingState}
/>
</div>
<div
className={
BookingNavbar != 'Navbar3' ? 'BSLayout3' : 'BSLayout3Standard'
}
style={{
backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
}}
>
<div className="Layout-bill-container">
<div
className={
BookingNavbar === 'Navbar3'
? 'Layout-IfNavbar3'
: 'Layout-bill-Subcontainer'
}
style={{ width: OtherServicesglobal ? '10%' : '100%' }}
>
{UserType !== 'Employee' && (
<div className="pricing-name-details">
{PricingAppPricingName?.[0]?.PricingName +
' / ' +
PricingAppPricingName?.[0]?.Type}
</div>
)}
{!OtherServicesglobal && (
<SalesCountComponent
DineInAccess={DineInAccess}
GlobalsalesDetailData={GlobalsalesDetailData}
BookingNavbar={BookingNavbar}
/>
)}
{!OtherServicesglobal &&
SessionData?.FeatureAddonData?.FeatureDtls?.find(
(item) =>
item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
) &&
!sportsAppPreference && (
<div
style={{
pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
opacity: OrderStatus > 0 ? 0.5 : 1,
}}
>
<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>
)}
{!OtherServicesglobal && 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 && (
<>
{' '}
{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',
}}
/>
{/* <button className="BookingCloseButton"
onClick={OpenBookingModal}>Booking Close</button> */}
</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>
)}{' '}
</>
)}
{!OtherServicesglobal && (
<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="BsLayout3-ContentDiv"
style={{
backgroundColor:
GlobalLayoutColorDetail?.OverallBackgroundColor,
}}
>
<div className="BSCategory3-Contentcont">
<div
style={{
backgroundColor:
SelectedCatgColor?.['OverallBackgroundColor'],
}}
>
{!OtherServicesglobal && (
<CategoryHorizontal
categoryFunction={dynamicComponentProps(
'Category',
BookingCategory?.[1],
BookingCategory?.[0]
)}
/>
)}
{OtherServicesglobal && (
<BSOtherServicesHorizontalcat
categoryFunction={dynamicComponentProps(
'Category',
BookingCategory?.[1],
BookingCategory?.[0]
)}
/>
)}
</div>
<div
style={{
backgroundColor:
SelectedSubCatgColor?.['OverallBackgroundColor'],
}}
>
{!OtherServicesglobal && Comboglobal === false && (
<SubCategoryHorizontal
categoryFunction={dynamicComponentProps(
'SubCategory',
BookingSubCategory?.[1],
BookingSubCategory?.[0]
)}
/>
)}
</div>
<div
className="BSCategory3-Cardcont"
style={{
backgroundColor:
SelectedCardColor?.['OverallBackgroundColor'],
display: 'flex',
}}
>
{!OtherServicesglobal && Comboglobal === false && (
<BSItemCard
connectingState={connectingState}
setConnectingState={setConnectingState}
cardFunctionality={dynamicComponentProps(
'Card',
BookingCard?.[1],
BookingCard?.[0]
)}
/>
)}
{!OtherServicesglobal && Comboglobal === true && (
<BSComboItemCard
cardFunctionality={dynamicComponentProps(
'Card',
BookingCard?.[1],
BookingCard?.[0]
)}
/>
)}
{OtherServicesglobal && (
<BSOtherServiceItemCard
screenHeight={window.innerHeight}
cardFunctionality={dynamicComponentProps(
'Card',
BookingCard?.[1],
BookingCard?.[0]
)}
/>
)}
</div>
</div>
<div className="BSCategory3-tablecont">
{action ? (
<BranchTransferComponent />
) : (
<>
{(BSLayout3Data?.BookingBilling?.[0] === 'Billing1' ||
BSLayout3Data?.BookingBilling?.[0] === 'Billing3' ||
BSLayout3Data?.BookingBilling?.[0] === 'Billing4' ||
BSLayout3Data?.BookingBilling?.[0] === 'Billing5' ||
BSLayout3Data?.BookingBilling?.[0] === 'Billing6' ||
BSLayout3Data?.BookingBilling?.[0] === 'Billing7') && (
<BSBillingTable3 />
)}
{BSLayout3Data?.BookingBilling?.[0] === 'Billing2' && (
<BSBillingTable2 />
)}
{BSLayout3Data?.BookingBilling?.[0] === 'Billing8' && (
<ComboSalesBillTable />
)}
{BSLayout3Data?.BookingBilling?.[0] ===
'StandardBilling' && (
<div className="BSCategory2New">
<BSBillingTable3 />
</div>
)}
</>
)}
</div>
</div>
</div>
</div>
{BookingModalOpen && !OtherServicesglobal && (
<RetailBookingClosing
PaymentOpen={BookingModalOpen}
PaymentClose={HandleBookingModalClose}
/>
)}
{ListOfInvoices && !OtherServicesglobal && (
<ListOfSalesInvoices
ListOfInvoicesOpen={ListOfInvoices}
handleInvoiceClose={handleInvoiceClose}
/>
)}
</>
</Suspense>
);
};
export default BSLayout3;