karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

i 've just added two field for token

This commit is contained in:
Tamilselvan 2026-03-13 16:02:50 +05:30
parent cacf42a8fa
commit 4b86b38a73
1 changed files with 326 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

597
src/Pages/BookingScreen/Components/PrintMainPage/PrinterSelection.jsx
View File

@ -30,7 +30,7 @@ const PrinterSelection = (props) => {
const [initialPrinters, setInitialPrinters] = useState([]); const [initialPrinters, setInitialPrinters] = useState([]);
const PrinterDetails = useSelector(GlobalPrinterMappingDtls); const PrinterDetails = useSelector(GlobalPrinterMappingDtls);
const FeatureAddonData = useSelector(GlobalFeatAddOnData); const FeatureAddonData = useSelector(GlobalFeatAddOnData);
const [MyPrinter, setMyPrinter] = useState(true); const [MyPrinter, setMyPrinter] = useState(true);
const [MyKioskPrinter, setMyKioskPrinter] = useState(false); const [MyKioskPrinter, setMyKioskPrinter] = useState(false);
const { onClose } = props; const { onClose } = props;
// const initialPrinters = [ // const initialPrinters = [
@ -50,23 +50,23 @@ const PrinterSelection = (props) => {
getCounters(); getCounters();
}, []); }, []);
useEffect(() => { useEffect(() => {
const onFocus = () => { const onFocus = () => {
const isTriggered = localStorage.getItem("trigger_from_app"); const isTriggered = localStorage.getItem("trigger_from_app");
if (isTriggered === "1") { if (isTriggered === "1") {
console.log("App trigger detected — refreshing printer data..."); console.log("App trigger detected — refreshing printer data...");
getPrinters(); getPrinters();
getCounters(); getCounters();
// Clear flag so it doesn't run again // Clear flag so it doesn't run again
localStorage.removeItem("trigger_from_app"); localStorage.removeItem("trigger_from_app");
} }
}; };
window.addEventListener("focus", onFocus); window.addEventListener("focus", onFocus);
return () => window.removeEventListener("focus", onFocus); return () => window.removeEventListener("focus", onFocus);
}, []); }, []);
const getPrinters = async () => { const getPrinters = async () => {
const data = { const data = {
AppId: AppId, AppId: AppId,
@ -79,17 +79,17 @@ const PrinterSelection = (props) => {
const printerData = response?.data?.data || []; const printerData = response?.data?.data || [];
const printMappingDtl = printerData?.[0]?.PrintMappingDtl || []; const printMappingDtl = printerData?.[0]?.PrintMappingDtl || [];
setInitialPrinters(printMappingDtl); setInitialPrinters(printMappingDtl);
// Map API data: preserve original MappingPrintType (K/U/null) // Map API data: preserve original MappingPrintType (K/U/null)
// For user mappings, use backend values; for others, create user mapping structure // For user mappings, use backend values; for others, create user mapping structure
const mappedPrinters = printMappingDtl.map((printer) => { const mappedPrinters = printMappingDtl.map((printer) => {
const isUserMapping = printer.MappingPrintType === 'U' && printer.UserId === UserId; const isUserMapping = printer.MappingPrintType === 'U' && printer.UserId === UserId;
const physicalId = `${printer.ConnectionKey}${(printer.MacAddress !== 'N/A' && printer.MacAddress !== null) ? `_${printer.MacAddress}` : ''}`; const physicalId = `${printer.ConnectionKey}${(printer.MacAddress !== 'N/A' && printer.MacAddress !== null) ? `_${printer.MacAddress}` : ''}`;
// Preserve null MappingPrintType - don't convert to 'U' // Preserve null MappingPrintType - don't convert to 'U'
const mappingPrintType = printer.MappingPrintType !== null && printer.MappingPrintType !== undefined const mappingPrintType = printer.MappingPrintType !== null && printer.MappingPrintType !== undefined
? printer.MappingPrintType ? printer.MappingPrintType
: null; : null;
return { return {
ConnectionKey: printer.ConnectionKey, ConnectionKey: printer.ConnectionKey,
PrinterName: printer.PrinterName, PrinterName: printer.PrinterName,
@ -108,9 +108,12 @@ const PrinterSelection = (props) => {
MappingPrintType: mappingPrintType, MappingPrintType: mappingPrintType,
UserId: printer.UserId || UserId, UserId: printer.UserId || UserId,
DeviceAddress: printer.DeviceAddress || null, DeviceAddress: printer.DeviceAddress || null,
TakeAwayTokenFlg: printer.TakeAwayTokenFlg || "N",
DineInTokenFlg: printer.DineInTokenFlg || "N"
}; };
}); });
setPrinters(mappedPrinters); setPrinters(mappedPrinters);
} else { } else {
setInitialPrinters([]) setInitialPrinters([])
@ -128,7 +131,7 @@ const PrinterSelection = (props) => {
setcounters(counterdata); setcounters(counterdata);
} }
const toggleSetPrint = (printerId) => { const toggleSetPrint = (printerId) => {
const selectedPrinter = printers.find(p => p.PrintUniqId === printerId); const selectedPrinter = printers.find(p => p.PrintUniqId === printerId);
console.log(printerId, selectedPrinter, printers, 'printerId'); console.log(printerId, selectedPrinter, printers, 'printerId');
@ -136,9 +139,9 @@ const PrinterSelection = (props) => {
setPrinters((prev) => { setPrinters((prev) => {
// Check if user mapping already exists for this physical printer // Check if user mapping already exists for this physical printer
const existingUserMapping = prev.find(p => const existingUserMapping = prev.find(p =>
p.id === selectedPrinter.id && p.id === selectedPrinter.id &&
p.MappingPrintType === 'U' && p.MappingPrintType === 'U' &&
p.UserId === UserId p.UserId === UserId
); );
@ -184,10 +187,10 @@ const PrinterSelection = (props) => {
setPrinters((prev) => setPrinters((prev) =>
prev.map((p) => { prev.map((p) => {
if (p.ConnectionKey === selectedPrinter.ConnectionKey && if (p.ConnectionKey === selectedPrinter.ConnectionKey &&
p.MacAddress === selectedPrinter.MacAddress && p.MacAddress === selectedPrinter.MacAddress &&
p.UserId === UserId && p.UserId === UserId &&
p.MappingPrintType === 'U') { p.MappingPrintType === 'U') {
return { return {
...p, ...p,
CounterId: p.CounterId === counter.CounterId ? null : counter.CounterId, CounterId: p.CounterId === counter.CounterId ? null : counter.CounterId,
@ -204,10 +207,10 @@ const PrinterSelection = (props) => {
setPrinters(prev => setPrinters(prev =>
prev.map(p => { prev.map(p => {
if (p.ConnectionKey === selectedPrinter.ConnectionKey && if (p.ConnectionKey === selectedPrinter.ConnectionKey &&
p.MacAddress === selectedPrinter.MacAddress && p.MacAddress === selectedPrinter.MacAddress &&
p.UserId === UserId && p.UserId === UserId &&
p.MappingPrintType === 'U') { p.MappingPrintType === 'U') {
return { ...p, MappingType: newType }; return { ...p, MappingType: newType };
} }
return p; return p;
@ -220,28 +223,28 @@ const PrinterSelection = (props) => {
// Remove duplicates by PrintUniqId, keep only unique entries // Remove duplicates by PrintUniqId, keep only unique entries
const uniquePrinters = []; const uniquePrinters = [];
const seenKeys = new Set(); const seenKeys = new Set();
printers.forEach(printer => { printers.forEach(printer => {
if (!seenKeys.has(printer.PrintUniqId)) { if (!seenKeys.has(printer.PrintUniqId)) {
seenKeys.add(printer.PrintUniqId); seenKeys.add(printer.PrintUniqId);
uniquePrinters.push(printer); uniquePrinters.push(printer);
} }
}); });
console.log(uniquePrinters, 'uniquePrinters'); console.log(uniquePrinters, 'uniquePrinters');
// IMPORTANT: Send ALL user mappings (both Y and N) so backend can remove mappings // IMPORTANT: Send ALL user mappings (both Y and N) so backend can remove mappings
// Filter to only user mappings (MappingPrintType === 'U') for current user // Filter to only user mappings (MappingPrintType === 'U') for current user
const userMappings = uniquePrinters.filter(p => const userMappings = uniquePrinters.filter(p =>
p.MappingPrintType === 'U' && p.UserId === UserId p.MappingPrintType === 'U' && p.UserId === UserId
); );
const PostPrintMappingdata = { const PostPrintMappingdata = {
AppId: AppId, AppId: AppId,
CompId: CompId, CompId: CompId,
BranchId: BranchId, BranchId: BranchId,
UserId: UserId, UserId: UserId,
UpdatedBy: UserId, UpdatedBy: UserId,
// Send all user mappings (Y and N) so removal works // Send all user mappings (Y and N) so removal works
PrintMappingDtl: userMappings PrintMappingDtl: userMappings
} }
@ -250,14 +253,14 @@ const PrinterSelection = (props) => {
if (response?.data?.statusCode === 1) { if (response?.data?.statusCode === 1) {
setMessageType("success"); setMessageType("success");
setMessageData("Printer settings saved successfully."); setMessageData("Printer settings saved successfully.");
const data = { const data = {
AppId: AppId, AppId: AppId,
CompId: CompId, CompId: CompId,
BranchId: BranchId, BranchId: BranchId,
UserId: UserId UserId: UserId
} }
await dispatch(getPrinterMappingDetails(data)).unwrap(); await dispatch(getPrinterMappingDetails(data)).unwrap();
getCounters(); getCounters();
} else { } else {
setMessageType("error"); setMessageType("error");
setMessageData(response?.data?.message || "Failed to save printer settings."); setMessageData(response?.data?.message || "Failed to save printer settings.");
@ -277,16 +280,39 @@ const PrinterSelection = (props) => {
setPrinters((prev) => setPrinters((prev) =>
prev.map((p) => { prev.map((p) => {
if (p.ConnectionKey === selectedPrinter.ConnectionKey && if (p.ConnectionKey === selectedPrinter.ConnectionKey &&
p.MacAddress === selectedPrinter.MacAddress && p.MacAddress === selectedPrinter.MacAddress &&
p.UserId === UserId && p.UserId === UserId &&
p.MappingPrintType === 'U') { p.MappingPrintType === 'U'
) {
return { ...p, CustomerCopy: value }; return { ...p, CustomerCopy: value };
} }
return p; return p;
}) })
); );
}; };
const updateTokenAvailable = (printerId, type, checked) => {
const selectedPrinter = printers.find(p => p.id === printerId);
if (!selectedPrinter) return;
setPrinters((prev) =>
prev.map((p) => {
if (
p.ConnectionKey === selectedPrinter.ConnectionKey &&
p.MacAddress === selectedPrinter.MacAddress
) {
if (type === "Takeaway") {
return { ...p, TakeAwayTokenFlg: checked ? "Y" : "N" };
}
if (type === "Dine") {
return { ...p, DineInTokenFlg: checked ? "Y" : "N" };
}
}
return p;
})
);
};
const openKioskPrinter = () => { const openKioskPrinter = () => {
setMyKioskPrinter(true); setMyKioskPrinter(true);
setMyPrinter(false); setMyPrinter(false);
@ -306,7 +332,7 @@ const PrinterSelection = (props) => {
}} }}
/> />
<div> <div>
<div <div
className="PrinterSettingSwitchBTN" className="PrinterSettingSwitchBTN"
> >
<div <div
@ -314,252 +340,281 @@ const PrinterSelection = (props) => {
onClick={openMyPrinter} onClick={openMyPrinter}
> >
{/* <HiOutlineSquares2X2 size={16} /> */} {/* <HiOutlineSquares2X2 size={16} /> */}
My Printer My Printer
</div> </div>
{FeatureAddonData?.FeatureDtls?.find( {FeatureAddonData?.FeatureDtls?.find(
(item) => (item) =>
item?.FeatureAddonName?.toLowerCase() === 'kiosk sales' item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
) && ) &&
<div <div
className={MyKioskPrinter ? 'selected' : ''} className={MyKioskPrinter ? 'selected' : ''}
onClick={openKioskPrinter} onClick={openKioskPrinter}
> >
{/* <HiSquaresPlus size={16} /> */} {/* <HiSquaresPlus size={16} /> */}
Kiosk Printer Kiosk Printer
</div> </div>
} }
</div> </div>
</div>
{MyPrinter && (
<div>
<DropDowns
options={(() => {
const uniquePrinters = [];
const seenPhysicalIds = new Set();
const userMappedPhysicalIds = new Set();
// First, collect physical printer IDs (ConnectionKey + MacAddress)
// that are actively mapped to current user (MappingPrintType === 'U' && UserId === UserId && ChkStatus === 'Y')
// Only exclude printers that are currently active, not removed ones
printers.forEach(p => {
if (p.MappingPrintType === 'U' && p.UserId === UserId && p.ChkStatus === 'Y') {
userMappedPhysicalIds.add(p.id);
}
});
// Build dropdown: show each physical printer once
// Exclude printers actively mapped to current user (ChkStatus === 'Y')
// Include: unmapped (null), kiosk (K), removed user mappings (ChkStatus === 'N'), and other users' mappings
printers.forEach(p => {
const physicalId = p.id; // ConnectionKey + MacAddress
// Skip if this physical printer is actively mapped to current user (ChkStatus === 'Y')
if (userMappedPhysicalIds.has(physicalId)) return;
// Show each physical printer only once
if (!seenPhysicalIds.has(physicalId)) {
seenPhysicalIds.add(physicalId);
uniquePrinters.push({
label: `${p.ConnectionKey}${p.PrinterName && p.PrinterName !== 'Unknown' ? ` (${p.PrinterName})` : ''}${(p.MacAddress !== 'N/A' && p.MacAddress !== null) ? ` (${p.MacAddress})` : ''}`,
value: p.PrintUniqId, // Use PrintUniqId (will create new user mapping in toggleSetPrint)
});
}
});
return uniquePrinters;
})()}
defaultValue={null}
valueData={selectedPrinterId}
placeholder="Select Printer"
onChangeFunction={(value) => {
const printer = printers.find(p => p.PrintUniqId === value);
if (printer) {
toggleSetPrint(printer.PrintUniqId);
}
setSelectedPrinterId(null);
}}
/>
</div>
{MyPrinter && (
<div>
<DropDowns
options={(() => {
const uniquePrinters = [];
const seenPhysicalIds = new Set();
const userMappedPhysicalIds = new Set();
// First, collect physical printer IDs (ConnectionKey + MacAddress)
// that are actively mapped to current user (MappingPrintType === 'U' && UserId === UserId && ChkStatus === 'Y')
// Only exclude printers that are currently active, not removed ones
printers.forEach(p => {
if (p.MappingPrintType === 'U' && p.UserId === UserId && p.ChkStatus === 'Y') {
userMappedPhysicalIds.add(p.id);
}
});
// Build dropdown: show each physical printer once
// Exclude printers actively mapped to current user (ChkStatus === 'Y')
// Include: unmapped (null), kiosk (K), removed user mappings (ChkStatus === 'N'), and other users' mappings
printers.forEach(p => {
const physicalId = p.id; // ConnectionKey + MacAddress
// Skip if this physical printer is actively mapped to current user (ChkStatus === 'Y')
if (userMappedPhysicalIds.has(physicalId)) return;
// Show each physical printer only once
if (!seenPhysicalIds.has(physicalId)) {
seenPhysicalIds.add(physicalId);
uniquePrinters.push({
label: `${p.ConnectionKey}${p.PrinterName && p.PrinterName !== 'Unknown' ? ` (${p.PrinterName})` : ''}${(p.MacAddress !== 'N/A' && p.MacAddress !== null) ? ` (${p.MacAddress})` : ''}`,
value: p.PrintUniqId, // Use PrintUniqId (will create new user mapping in toggleSetPrint)
});
}
});
return uniquePrinters;
})()}
defaultValue={null}
valueData={selectedPrinterId}
placeholder="Select Printer"
onChangeFunction={(value) => {
const printer = printers.find(p => p.PrintUniqId === value);
if (printer) {
toggleSetPrint(printer.PrintUniqId);
}
setSelectedPrinterId(null);
}}
/>
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "16px",
fontFamily: "poppins",
marginTop: "16px"
}}
>
{(() => {
const uniquePrinters = [];
const seenKeys = new Set();
printers
.filter(p => p.ChkStatus === 'Y' && p.MappingPrintType === 'U' && p.UserId === UserId)
.forEach(printer => {
if (!seenKeys.has(printer.id)) {
seenKeys.add(printer.id);
uniquePrinters.push(printer);
}
});
return uniquePrinters;
})().map((printer) => (
<div <div
key={printer.PrintUniqId}
style={{ style={{
display: "flex", flex: "1 1 calc(50% - 16px)",
flexWrap: "wrap", border: "1px solid #ddd",
gap: "16px", borderRadius: "6px",
fontFamily: "poppins", padding: "16px",
marginTop: "16px" boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
background: "#fff",
transition: "all 0.3s ease",
}} }}
> >
{(() => { {/* Printer Name */}
const uniquePrinters = []; <div style={{ marginBottom: "12px", fontWeight: "bold" }}>
const seenKeys = new Set(); 🖨️ {printer.name || printer.id}
</div>
printers
.filter(p => p.ChkStatus === 'Y' && p.MappingPrintType === 'U' && p.UserId === UserId)
.forEach(printer => {
if (!seenKeys.has(printer.id)) {
seenKeys.add(printer.id);
uniquePrinters.push(printer);
}
});
return uniquePrinters;
})().map((printer) => (
<div
key={printer.PrintUniqId}
style={{
flex: "1 1 calc(50% - 16px)",
border: "1px solid #ddd",
borderRadius: "6px",
padding: "16px",
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
background: "#fff",
transition: "all 0.3s ease",
<div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
<div>
<label
style={{
display: "flex",
alignItems: "center",
gap: "8px",
marginBottom: "12px",
fontWeight: "500",
color: "#0f5132",
background: "#d1e7dd",
padding: "8px 12px",
borderRadius: "4px",
border: "1px solid #badbcc",
transition: "all 0.2s ease-in-out",
}} }}
> >
{/* Printer Name */} <input
<div style={{ marginBottom: "12px", fontWeight: "bold" }}> type="checkbox"
🖨️ {printer.name || printer.id} checked={printer.ChkStatus === 'Y' && printer.MappingPrintType === 'U'}
</div> onChange={() => toggleSetPrint(printer.PrintUniqId)}
/>
Set for Print
</label>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}> <div>
<div> <Switch
<label size="small"
style={{ checked={printer.MappingType === 'G'}
display: "flex", disabled={canEditPrinter(printer)}
alignItems: "center", onChange={(checked) => {
gap: "8px", const newValue = checked ? 'G' : 'I';
marginBottom: "12px", updatePrinterMappingType(printer.id, newValue);
fontWeight: "500", }}
color: "#0f5132", checkedChildren="Group"
background: "#d1e7dd", unCheckedChildren="Individual"
padding: "8px 12px", style={{
borderRadius: "4px", transform: 'scale(1.2)',
border: "1px solid #badbcc", transformOrigin: 'left center',
transition: "all 0.2s ease-in-out", width: '85px',
}} }}
> />
<input </div>
type="checkbox" <div>
checked={printer.ChkStatus === 'Y' && printer.MappingPrintType === 'U'} <label style={{ display: "block", fontSize: "0.85rem", fontWeight: 500 }}>
onChange={() => toggleSetPrint(printer.PrintUniqId)} Customer Copy
/> </label>
Set for Print <input
</label> type="number"
</div> min="1"
placeholder="1"
value={printer.CustomerCopy}
onChange={(e) => updateCustomerCopy(printer.id, e.target.value)}
style={{
width: "70px",
padding: "6px 8px",
borderRadius: "4px",
border: "1px solid #ccc",
outline: "none",
}}
/>
</div>
<div>
<label style={{ display: "block", fontSize: "0.85rem", fontWeight: 500 }}>
Token Printer setup
</label>
<div> <label style={{ display: "inline-flex", alignItems: "center", marginRight: "12px" }}>
<Switch <input
size="small" style={{ marginRight: "6px" }}
checked={printer.MappingType === 'G'} type="checkbox"
disabled={canEditPrinter(printer)} checked={printer.TakeAwayTokenFlg == "Y"}
onChange={(checked) => { onChange={(e) =>
const newValue = checked ? 'G' : 'I'; updateTokenAvailable(printer.id, "Takeaway", e.target.checked)
updatePrinterMappingType(printer.id, newValue); }
}} />
checkedChildren="Group" Takeaway
unCheckedChildren="Individual" </label>
style={{
transform: 'scale(1.2)',
transformOrigin: 'left center',
width: '85px',
}}
/>
</div>
<div>
<label style={{ display: "block", fontSize: "0.85rem", fontWeight: 500 }}>
Customer Copy
</label>
<input
type="number"
min="1"
placeholder="1"
value={printer.CustomerCopy}
onChange={(e) => updateCustomerCopy(printer.id, e.target.value)}
style={{
width: "70px",
padding: "6px 8px",
borderRadius: "4px",
border: "1px solid #ccc",
outline: "none",
}}
/>
</div>
</div>
<div <label style={{ display: "inline-flex", alignItems: "center" }}>
<input
style={{ marginRight: "6px" }}
type="checkbox"
checked={printer.DineInTokenFlg == "Y"}
onChange={(e) =>
updateTokenAvailable(printer.id, "Dine", e.target.checked)
}
/>
Dine
</label>
</div>
</div>
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "12px",
width: "100%",
background: "#f8f9fa",
padding: "12px",
borderRadius: "6px",
border: "1px solid #ddd",
}}
>
{counters?.map((counter) => {
const isCounterUsedElsewhere = printers?.some(
(p) => p.id !== printer.id && p.CounterId === counter.CounterId
);
return (
<label
key={counter.CounterId}
style={{ style={{
width: "calc(50% - 6px)",
fontWeight: "normal",
display: "flex", display: "flex",
flexWrap: "wrap", alignItems: "center",
gap: "12px", gap: "8px",
width: "100%", opacity: isCounterUsedElsewhere ? 0.4 : 1, // Optional: make it look visually disabled
background: "#f8f9fa",
padding: "12px",
borderRadius: "6px",
border: "1px solid #ddd",
}} }}
> >
{counters?.map((counter) => { <input
const isCounterUsedElsewhere = printers?.some( type="checkbox"
(p) => p.id !== printer.id && p.CounterId === counter.CounterId checked={printer.CounterId === counter.CounterId}
); onChange={() => toggleCounter(printer.id, counter)}
disabled={isCounterUsedElsewhere}
return ( />
<label {counter?.CounterName}
key={counter.CounterId} </label>
style={{ );
width: "calc(50% - 6px)", })}
fontWeight: "normal", </div>
display: "flex",
alignItems: "center",
gap: "8px",
opacity: isCounterUsedElsewhere ? 0.4 : 1, // Optional: make it look visually disabled
}}
>
<input
type="checkbox"
checked={printer.CounterId === counter.CounterId}
onChange={() => toggleCounter(printer.id, counter)}
disabled={isCounterUsedElsewhere}
/>
{counter?.CounterName}
</label>
);
})}
</div>
</div>
))}
</div> </div>
))}
<div </div>
style={{
width: "100%", <div
display: "flex", style={{
justifyContent: "flex-end", width: "100%",
marginTop: 24, display: "flex",
}} justifyContent: "flex-end",
> marginTop: 24,
<Buttons }}
buttonText="Save" >
color="901D77" <Buttons
icon={<ArrowRightOutlined />} buttonText="Save"
htmlType={true} color="901D77"
handleSubmit={handleSave} icon={<ArrowRightOutlined />}
/> htmlType={true}
</div> handleSubmit={handleSave}
</div>
)}
{MyKioskPrinter && (
<div>
{' '}
<KioskPrinterSelection
// onClose={() => setOpenModel(false)}
/> />
</div> </div>
)} </div>
)}
{MyKioskPrinter && (
<div>
{' '}
<KioskPrinterSelection
// onClose={() => setOpenModel(false)}
/>
</div>
)}
</div> </div>
); );
}; };