Notes

{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-title2">
{countType === "kit"
? "Please Enter No. of Kits"
: "Please Enter No. of Tests"}
</h1>
<p className="selection-subtitle2">
{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="expand-all text-end mb-2">
<button className="btn btn-link reach-it-expnd2" onClick={handleExpandAllStep2}>
{expandedStep2.every((exp) => exp)
? t("reach_product_step2_collapseAll")
: t("reach_product_step2_expandAll")}
</button>
</div>

<div className="accordion" id="productAccordionStep2">
{selectedProducts.map((section, parentIndex) => (
<div className="accordion-item product-card" key={parentIndex}>
<hr className="accordion-hr"></hr>
<h2 className="accordion-header reach-it-btnheader">
<button
className="accordion-button reach-it-accordionbtn"
type="button"
onClick={() => handleToggleStep2(parentIndex)}
aria-expanded={expandedStep2[parentIndex]}
>
{section.parent}{" "}
<span className="badge badge-dark">
{getProductCount(section.products)}
</span>
<span className="expand-icon ms-2">
{expandedStep2[parentIndex] ? "-" : "+"}
</span>
</button>
</h2>
<div
className={`accordion-collapse collapse ${expandedStep2[parentIndex] ? "show" : ""
}`}
aria-labelledby={`accordionStep2${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>
<p className="info-text">
<span className="info-icon">i</span>
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>
<p className="info-text">
<span className="info-icon">i</span>
Please note that there are some fields left blank. To proceed, you must acknowledge this by checking the box below.
</p>
</div>

<div className="button-group mt-3 d-flex justify-content-between">
<div className="d-flex">
<button
className="btn btn-secondary buttonbd me-2 buttonback"
onClick={() => setCurrentStep(1)}
>
BACK
</button>

{currentStep === 2 && (
<button
className="btn btn-secondary buttondownload"
onClick={generatePdf}
>
DOWNLOAD INPUT SUMMARY
</button>
)}
</div>

<div className="d-flex">
<button
className="btn btn-secondary me-2 buttoncancel"
onClick={handleCancel}
>
CANCEL
</button>

<button
className="btn btn-primary buttonproceed"
disabled={showWarning && !isWarningCheckboxChecked}
onClick={handleProceed}
>
PROCEED
</button>
</div>
</div>
</div>
)}