Notes

import React, { useState, useEffect, useRef, useCallback } from "react";
// import "bootstrap/css/bootstrap.min.css";
// import { Button } from "@abbott/add-platform";
// import { useNavigate } from "react-router-dom";
// import html2pdf from "html2pdf.js";
import { useTranslation } from "react-i18next";

// Sorting function for default and manual sorting
function sortProducts(products, key, direction = "asc") {
return products.sort((a, b) => {
if (a[key] < b[key]) {
return direction === "asc" ? -1 : 1;
}
if (a[key] > b[key]) {
return direction === "asc" ? 1 : -1;
}
return 0;
});
}

function convertApiResponseToProductData(apiResponse) {
const productDataMap = {};

apiResponse.response.products.forEach((product) => {
const {
platformType,
assayAndProductName,
sizeCode,
therapeuticArea,
kits,
} = product;

if (!productDataMap[platformType]) {
productDataMap[platformType] = {
parent: platformType,
products: [],
};
}

// Add sorted products by default
productDataMap[platformType].products.push({
name: assayAndProductName,
family: therapeuticArea,
listNo: sizeCode,
kits: kits || [],
});
});

return Object.values(productDataMap);
}

const apiResponse = {
status: true,
requestId: "dummy-request-id",
response: {
products: [
{
platformType: "Immunoassay - Alinity i",
assayAndProductName: "TSH Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "07P48",
kits: [
{
listSaleSize: "07P4820",
testsPerKit: 200,
},
{
listSaleSize: "07P4830",
testsPerKit: 1200,
},
],
},
{
platformType: "Immunoassay - Alinity i",
assayAndProductName: "Free T4 Reagent Kit",
therapeuticArea: "Specific Protein",
sizeCode: "06P06",
kits: [
{
listSaleSize: "06P0610",
testsPerKit: 100,
},
{
listSaleSize: "06P0620",
testsPerKit: 500,
},
],
},
{
platformType: "Immunoassay - Alinity i",
assayAndProductName: "Insulin Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "02P11",
kits: [
{
listSaleSize: "02P1110",
testsPerKit: 200,
},
{
listSaleSize: "02P1120",
testsPerKit: 800,
},
],
},
{
platformType: "Immunoassay - Alinity i",
assayAndProductName: "HCG Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "03P24",
kits: [
{
listSaleSize: "03P2410",
testsPerKit: 960,
},
],
},
{
platformType: "Clinical Chemistry - ARCHITECT c",
assayAndProductName: "Cholesterol",
therapeuticArea: "Specific Protein",
sizeCode: "7D62",
kits: [
{
listSaleSize: "7D62-21",
testsPerKit: 3032,
},
],
},
{
platformType: "Clinical Chemistry - ARCHITECT c",
assayAndProductName: "Glucose Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "14D47",
kits: [
{
listSaleSize: "14D4721",
testsPerKit: 500,
},
],
},
{
platformType: "Clinical Chemistry - ARCHITECT c",
assayAndProductName: "Creatinine Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "8L24",
kits: [
{
listSaleSize: "8L24-01",
testsPerKit: 2500,
},
],
},
{
platformType: "Immunoassay - ARCHITECT i",
assayAndProductName: "Ferritin Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "03P40",
kits: [
{
listSaleSize: "03P4010",
testsPerKit: 100,
},
{
listSaleSize: "03P4020",
testsPerKit: 500,
},
],
},
{
platformType: "Immunoassay - ARCHITECT i",
assayAndProductName: "Vitamin D Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "06P17",
kits: [
{
listSaleSize: "06P1710",
testsPerKit: 200,
},
],
},
{
platformType: "Immunoassay - ARCHITECT i",
assayAndProductName: "PTH Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "8K21",
kits: [
{
listSaleSize: "8K2110",
testsPerKit: 500,
},
],
},
{
platformType: "Immunoassay - ARCHITECT i",
assayAndProductName: "Troponin I Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "03P25",
kits: [
{
listSaleSize: "03P2510",
testsPerKit: 960,
},
],
},
{
platformType: "Immunoassay - Alinity s",
assayAndProductName: "HIV Ag/Ab Combo",
therapeuticArea: "Protein",
sizeCode: "08D06",
kits: [
{
listSaleSize: "08D0610",
testsPerKit: 960,
},
],
},
{
platformType: "Immunoassay - Alinity s",
assayAndProductName: "HBsAg Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "07P16",
kits: [
{
listSaleSize: "07P1610",
testsPerKit: 480,
},
],
},
{
platformType: "Immunoassay - Alinity s",
assayAndProductName: "Anti-HCV Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "03P45",
kits: [
{
listSaleSize: "03P4510",
testsPerKit: 960,
},
],
},
{
platformType: "Immunoassay - Alinity s",
assayAndProductName: "Anti-HBc Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "07P55",
kits: [
{
listSaleSize: "07P5510",
testsPerKit: 960,
},
],
},
{
platformType: "Clinical Chemistry - Alinity c",
assayAndProductName: "Glucose Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "14D47",
kits: [
{
listSaleSize: "14D4721",
testsPerKit: 500,
},
],
},
{
platformType: "Clinical Chemistry - Alinity c",
assayAndProductName: "Urea Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "12P34",
kits: [
{
listSaleSize: "12P3421",
testsPerKit: 400,
},
],
},
{
platformType: "Clinical Chemistry - Alinity c",
assayAndProductName: "Total Protein Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "8L54",
kits: [
{
listSaleSize: "8L54-01",
testsPerKit: 1000,
},
],
},
{
platformType: "Clinical Chemistry - Alinity c",
assayAndProductName: "Albumin Reagent Kit",
therapeuticArea: "Protein",
sizeCode: "02L78",
kits: [
{
listSaleSize: "02L7810",
testsPerKit: 1200,
},
],
},
],
},
retry: false,
errorCode: 0,
};

export const Products = () => {
const [expanded, setExpanded] = useState([]);
const [selectedProducts, setSelectedProducts] = useState([]);
const [currentStep, setCurrentStep] = useState(1);
const [productData, setProductData] = useState([]);
const [sortConfig, setSortConfig] = useState({
key: "name",
direction: "asc",
}); // State to track sorting
const [countType, setCountType] = useState("");
const [loading, setLoading] = useState(false);
const [showModal, setShowModal] = useState(false);
const [showWarning, setShowWarning] = useState(false); // To control the visibility of the warning message
const [blankFields, setBlankFields] = useState([]); // To store indexes of blank fields
const [isWarningCheckboxChecked, setIsWarningCheckboxChecked] = useState(false)
const { t } = useTranslation();

const pdfContentRef = useRef(null);

useEffect(() => {
const countTypeFromStorage = localStorage.getItem("triton-count-type");
setCountType(countTypeFromStorage);
const convertedProductData = convertApiResponseToProductData(apiResponse);

// Sort products by default based on the 'name'
convertedProductData.forEach((section) => {
section.products = sortProducts(
section.products,
sortConfig.key,
sortConfig.direction
);
});

setProductData(convertedProductData);
setExpanded(Array(convertedProductData.length).fill(false)); // Keep expanded state
}, []);

const handleSort = (key) => {
let direction = "asc";
if (sortConfig.key === key && sortConfig.direction === "asc") {
direction = "desc";
}
setSortConfig({ key, direction });

// Update sorted data without collapsing the accordion
setProductData((prevData) => {
const sortedData = prevData.map((section) => {
return {
...section,
products: sortProducts([...section.products], key, direction),
};
});
return [...sortedData];
});
};


const handleToggle = (index) => {
setExpanded((prevExpanded) => {
const newExpanded = [...prevExpanded];
newExpanded[index] = !newExpanded[index];
return newExpanded;
});
};

const handleExpandAll = () => {
const isExpanding = expanded.some((exp) => !exp);
setExpanded(Array(productData.length).fill(isExpanding));
};

const handleCheckboxChange = (parentIndex, product, isChecked) => {
setSelectedProducts((prevSelected) => {
const updatedSelected = [...prevSelected];
const parentSection = productData[parentIndex];
const existingParentIndex = updatedSelected.findIndex(
(p) => p.parent === parentSection.parent
);

if (existingParentIndex > -1) {
const existingParent = updatedSelected[existingParentIndex];

if (isChecked) {
const productExists = existingParent.products.find(
(p) => p.name === product.name
);
if (!productExists) {
existingParent.products = [...existingParent.products, product];
}
} else {
existingParent.products = existingParent.products.filter(
(p) => p.name !== product.name
);
}

updatedSelected[existingParentIndex] = { ...existingParent };

if (existingParent.products.length === 0) {
return updatedSelected.filter(
(p) => p.parent !== parentSection.parent
);
}
} else if (isChecked) {
updatedSelected.push({
parent: parentSection.parent,
products: [product],
});
}

return updatedSelected;
});
};

const handleAcknowledgeMent = () => {
setCurrentStep(3);
setShowModal(false);
};

const checkBlankInputs = useCallback(() => {
const blanks = [];
selectedProducts.forEach((section, parentIndex) => {
// Loop through each product in the section
section.products.forEach((product, productIndex) => {
if (countType === "test") {
// Check if testCount is empty for the 'test' countType
if (!product.testCount || product.testCount === "") {
blanks.push({ parentIndex, productIndex, type: "test" });
}
} else if (countType === "kit") {
// Check if any kits have blank reagentKits for the 'kit' countType
product.kits.forEach((kit, kitIndex) => {
if (!kit.reagentKits || kit.reagentKits === "") {
blanks.push({
parentIndex,
productIndex,
kitIndex,
type: "kit",
});
}
});
}
});
});

// If there are any blank fields, set the blankFields state and show warning
if (blanks.length > 0) {
setBlankFields(blanks);
setShowWarning(true);
setIsWarningCheckboxChecked(false);
} else {
// If no blank fields, clear warning and proceed
setBlankFields([]);
setShowWarning(false);
setIsWarningCheckboxChecked(false)
// Proceed to the next step or whatever action is needed
}
}, [selectedProducts])

const handleProceed = () => {
if (currentStep === 2) {
checkBlankInputs()
setShowModal(true);
} else {
setCurrentStep(2);
}
};

const handleCancel = () => {
// navigate("/");
};

const handleSelectAll = (parentIndex, isChecked) => {
const parentSection = productData[parentIndex];
parentSection.products.forEach((product) => {
handleCheckboxChange(parentIndex, product, isChecked);
});
};

const handleTestCountChange = (parentIndex, productIndex, value) => {
setSelectedProducts((prevSelectedProducts) => {
const updatedProducts = [...prevSelectedProducts];
updatedProducts[parentIndex].products[productIndex].testCount = value;
return updatedProducts;
});
};

const handleKitCountChange = (parentIndex, productIndex, kitIndex, value) => {
setSelectedProducts((prevSelectedProducts) => {
const updatedProducts = [...prevSelectedProducts];
updatedProducts[parentIndex].products[productIndex].kits[
kitIndex
].reagentKits = value;
return updatedProducts;
});
};

const generatePdf = () => {
setLoading(true);
const pdfContent = pdfContentRef.current;
pdfContent.innerHTML = ""; // Clear previous content

selectedProducts.forEach((section) => {
let sectionHtml = '<div class="pdf-selection">';
sectionHtml += `<h3 class="pdf-platform-title">${section.parent}</h3>`;
sectionHtml +=
'<table class="pdf-table" border="1" cellpadding="5" cellspacing="0" style="width: 100%;">';
sectionHtml += "<thead>";

if (countType === "kit") {
sectionHtml +=
"<tr><th>Product</th><th>Product Family</th><th>List No.</th><th>Tests per Kit</th><th>No. of Reagent Kits</th></tr>";
} else {
sectionHtml +=
"<tr><th>Product</th><th>Product Family</th><th>List No.</th><th>Tests</th></tr>";
}

sectionHtml += "</thead><tbody>";

section.products.forEach((product) => {
if (countType === "kit") {
// For Kit Count
sectionHtml += `<tr><td>${product.name}</td><td>${product.family}</td><td>${product.listNo}</td><td></td><td></td></tr>`;
product.kits.forEach((kit) => {
sectionHtml += `<tr><td></td><td></td><td>${kit.listSaleSize
}</td><td>${kit.testsPerKit}</td><td>${kit.reagentKits || ""
}</td></tr>`;
});
} else {
// For Test Count
sectionHtml += `<tr><td>${product.name}</td><td>${product.family
}</td><td>${product.listNo}</td><td>${product.testCount || ""
}</td></tr>`;
}
});

sectionHtml += "</tbody></table>";
sectionHtml += "</div>";
sectionHtml += '<div class="pdf-section-spacing"></div>'; // Add spacing between tables
pdfContent.innerHTML += sectionHtml;
});

// Temporarily show the div for PDF generation
pdfContent.style.display = "block";

// Delay to ensure the browser renders the content
// setTimeout(() => {
// html2pdf()
// .from(pdfContent)
// .set({
// margin: 1,
// filename: "SelectedProducts.pdf",
// image: { type: "jpeg", quality: 0.98 },
// html2canvas: {
// scale: 1,
// logging: true,
// dpi: 192,
// letterRendering: true,
// },
// jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
// })
// .save()
// .then(() => {
// // Hide the div again after generating the PDF
// pdfContent.style.display = "none";
// setLoading(false);
// });
// }, 500);
};

const showCount = (platform) => {
const requiredPlatform = selectedProducts?.filter(
(product) => product?.parent === platform
);
return (
(requiredPlatform &&
requiredPlatform?.length > 0 &&
requiredPlatform[0]?.products?.length) ||
null
);
};
return (
<>
{/* Step Form */}
<div className="wizard">
<div className="step">
<div
className={`circle ${currentStep >= 1 ? "active" : ""} ${currentStep > 1 ? "checked" : ""
}`}
>
1
</div>
<div className="step-text">{t("reach_stepper_one")}</div>
</div>

<div className="step">
<div
className={`circle ${currentStep >= 2 ? "active" : ""} ${currentStep > 2 ? "checked" : ""
}`}
>
2
</div>
<div className="step-text">{t("reach_stepper_two")}</div>
</div>

<div className="step">
<div
className={`circle ${currentStep >= 3 ? "active" : ""} ${currentStep > 3 ? "checked" : ""
}`}
>
3
</div>
<div className="step-text">{t("reach_stepper_three")}</div>
</div>
</div>

<div className="container reach-it-container">
{loading && (
<div className="loader-overlay">
<div className="loader"></div>
</div>
)}

{currentStep === 1 && (
<>
<h1 className="product-selection-title">
{t("reach_product_step1_heading")}
</h1>
<div className="expand-all text-end mb-2">
<button className="btn btn-link reach-it-expnd" onClick={handleExpandAll}>
{expanded.every((exp) => exp)
? t("reach_product_step1_collapseAll")
: t("reach_product_step1_expandAll")}
</button>
</div>

<div className="accordion" id="productAccordion">
{productData.map((section, index) => (
<div className="accordion-item product-card" key={index}>
<hr className="accordion-hr"></hr>
<h2 className="accordion-header reach-it-btnheader">
<button
className="accordion-button reach-it-accordionbtn"
type="button"
onClick={() => handleToggle(index)}
aria-expanded={expanded[index]}
>
{section.parent}{" "}
{showCount ? (
<span class="badge badge-dark">
{showCount(section.parent)}
</span>
) : (
""
)}
<span className="expand-icon ms-2">
{expanded[index] ? "-" : "+"}
</span>
</button>
</h2>
<div
className={`accordion-collapse collapse ${expanded[index] ? "show" : ""
}`}
aria-labelledby={`accordion${index}`}
>
<div className="accordion-body reach-it d-block d-md-none">
{section.products.map((product, idx) => {
const isProductSelected = selectedProducts.some(
(selectedParent) =>
selectedParent.parent === section.parent &&
selectedParent.products.some(
(p) => p.name === product.name
)
);
return (
<>
{/* mobile only component*/}
<div class="card">
<div class="card-body px-4 py-3">
<div class="row">
<div class="col-2 d-flex justify-content-center align-items-center">
<input
type="checkbox"
className={`group${index + 1
} platforms-checkbox`}
checked={isProductSelected}
onChange={(e) =>
handleCheckboxChange(
index,
product,
e.target.checked
)
}
/>
</div>
<div class="col-10 align-items-left">
<p class="card-title mb-2">
{product?.name}
</p>
<p class="card-text mb-2">
{product?.family}
</p>
<p class="card-text">{product?.listNo}</p>
</div>
</div>
</div>
</div>
</>
);
})}
</div>
<div className="accordion-body d-none d-md-block">
<table className="table product-table">
<thead>
<tr>
<th>
<input
type="checkbox"
className="select-all"
data-group={`group${index + 1}`}
onChange={(e) => {
const isChecked = e.target.checked;
handleSelectAll(index, isChecked);
}}
/>
{t("reach_product_step1_table_selectAll")}
</th>
<th
onClick={() => handleSort("name")}
style={{ cursor: "pointer", fontWeight: "bold" }}
>
{t("reach_product_step1_table_productName")}
{sortConfig.key === "name"
? sortConfig.direction === "asc"
? "↓"
: "↑"
: "↓"}
</th>
<th
onClick={() => handleSort("family")}
style={{ cursor: "pointer", fontWeight: "bold" }}
>
{t("reach_product_step1_table_productFamily")}
{sortConfig.key === "family"
? sortConfig.direction === "asc"
? "↓"
: "↑"
: "↓"}
</th>
<th
onClick={() => handleSort("listNo")}
style={{ cursor: "pointer", fontWeight: "bold" }}
>
{t("reach_product_step1_table_productListNo")}
{sortConfig.key === "listNo"
? sortConfig.direction === "asc"
? "↓"
: "↑"
: "↓"}
</th>
</tr>
</thead>
<tbody>
{section.products.map((product, idx) => {
const isProductSelected = selectedProducts.some(
(selectedParent) =>
selectedParent.parent === section.parent &&
selectedParent.products.some(
(p) => p.name === product.name
)
);
return (
<tr key={idx}>
<td>
<input
type="checkbox"
className={`group${index + 1}`}
checked={isProductSelected}
onChange={(e) =>
handleCheckboxChange(
index,
product,
e.target.checked
)
}
/>
</td>
<td>{product.name}</td>
<td>{product.family}</td>
<td>{product.listNo}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>

{index === 4 && <hr className="accordion-hr"></hr>}
</div>
))}
</div>

<div className="button-group mt-3 btnst">
<button
className="btn btn-secondary ms-2 btncancel"
onClick={handleCancel}
>
{t("reach_product_step1_cancelBtn")}
</button>
<button
className="btn btn-primary btnproceed"
onClick={handleProceed}
>
{t("reach_product_step1_proceedBtn")}
</button>
</div>
</>
)}

{/* Step 2 */}
{currentStep === 2 && (
<div className="step-2-content">
<h1 className="selection-title">
{countType === "kit"
? "Please Enter No. of Kits"
: "Please Enter No. of Tests"}
</h1>
<p className="selection-subtitle">
{countType === "kit"
? "Provide the number of reagent kits for the selected products used in the preceding calendar year."
: "Provide the number of tests for the selected products used in the preceding calendar year."}
</p>

<div className="accordion" id="productAccordion">
{selectedProducts.map((section, parentIndex) => (
<div className="accordion-item product-card" key={parentIndex}>
<h2 className="accordion-header reach-it-btnheader">
<button
className="accordion-button reach-it-accordionbtn"
type="button"
onClick={() => handleToggle(parentIndex)}
aria-expanded={expanded[parentIndex]}
>
{section.parent}
<span className="expand-icon ms-2">
{expanded[parentIndex] ? "-" : "+"}
</span>
</button>
</h2>
<div
className={`accordion-collapse collapse ${expanded[parentIndex] ? "show" : ""
}`}
aria-labelledby={`accordion${parentIndex}`}
>
<div className="accordion-body">
<table className="table product-table">
<thead>
<tr>
<th>Product</th>
<th>Product Family</th>
<th>List No.</th>
{countType === "kit" ? (
<>
<th>Tests per Kit</th>
<th>No. of Reagent Kits</th>
</>
) : (
<th>Tests</th>
)}
</tr>
</thead>
<tbody>
{section.products.map((product, productIndex) => (
<React.Fragment key={productIndex}>
<tr>
<td>{product.name}</td>
<td>{product.family}</td>
<td>{product.listNo}</td>
{countType === "kit" ? (
<>
<td></td>
<td></td>
</>
) : (
<td>
<input
type="number"
className={`form-control ${blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.type === "test"
)
? "input-error"
: ""
}`}
placeholder="Enter number of tests"
value={product?.testCount || ""}
onChange={(e) =>
handleTestCountChange(
parentIndex,
productIndex,
e.target.value
)
}
/>
</td>
)}
</tr>
{countType === "kit" &&
product.kits.map((kit, kitIndex) => {
const isBlank = blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.kitIndex === kitIndex &&
field.type === "kit"
);
return (
<tr key={`${productIndex}-${kitIndex}`}>
<td></td>
<td></td>
<td>{kit.listSaleSize}</td>
<td>{kit.testsPerKit}</td>
<td>
<input
type="number"
placeholder="Enter number of kits"
value={kit?.reagentKits || ""}
onChange={(e) =>
handleKitCountChange(
parentIndex,
productIndex,
kitIndex,
e.target.value
)
}
className={`form-control ${isBlank ? "input-error" : ""}`}
// Add onChange to handle user input
/>
</td>
</tr>
)
})}
</React.Fragment>
))}
</tbody>
</table>
</div>
</div>
</div>
))}
</div>
{showWarning && (
<div className="warning-message mt-3">
<p className="text-danger">
Please note that there are some fields left blank. To proceed, you must acknowledge this by checking the box below.
</p>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="acknowledgeWarning"
checked={isWarningCheckboxChecked}
onChange={(e) => setIsWarningCheckboxChecked(e.target.checked)}
/>
<label className="form-check-label" htmlFor="acknowledgeWarning">
I understand that some fields are blank.
</label>
</div>
</div>
)}
<div className="button-group mt-3">
<button
className="btn btn-secondary"
onClick={() => setCurrentStep(1)}
>
Back
</button>
{currentStep === 2 && (
<button className="btn btn-secondary" onClick={generatePdf}>
Download PDF
</button>
)}
</div>
<div className="button-group mt-3 btnst" >

<button className="btn btn-secondary ms-2 btncancel" onClick={handleCancel}>
Cancel
</button>
<button className="btn btn-primary btnproceed" disabled={showWarning && !isWarningCheckboxChecked} onClick={handleProceed}>
Proceed
</button>
</div>
</div>
)}
<div
id="pdfContent"
ref={pdfContentRef}
style={{ display: "none" }}
></div>
</div>
</>
);
};