Notes

import React from 'react';

export const PlatformProductScreen = ({
productData,
selectedProducts,
expanded,
handleExpandAll,
handleToggle,
handleCheckboxChange,
handleSelectAll,
handleSort,
showCount,
t,
handleCancel,
handleProceed,
sortConfigs,
}) => (
<div data-testid="platformProductScreen">
<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]}
>
<div>
{section.parent}{" "}
{showCount(section?.parent) ? (
<span class="badge badge-dark">
{showCount(section?.parent)}
</span>
) : (
""
)}
</div>
<span className="expand-icon ms-2">
{expanded[index] ? <em class="abt-icon abt-icon-minus"></em> : <em class="abt-icon abt-icon-plus"></em>}
</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>
<div className='select-all-container'>
<input
type="checkbox"
className="select-all"
data-group={`group${index + 1}`}
onChange={(e) => {
const isChecked = e.target.checked;
handleSelectAll(index, isChecked);
}}
/>
<span>{t("reach_product_step1_table_selectAll")}</span>
</div>
</th>
<th
onClick={() => handleSort(index, "name")}
style={{ cursor: "pointer", fontWeight: "bold" }}
>
{t("reach_product_step1_table_productName")}
<span className="sorting-icon-container">
{sortConfigs[index]?.key === "name" ? (
sortConfigs[index]?.direction === "asc" ? (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
) : (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-up"></em>
)
) : (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
)}
</span>
</th>
<th
onClick={() => handleSort(index, "family")}
style={{ cursor: "pointer", fontWeight: "bold" }}
>
{t("reach_product_step1_table_productFamily")}
<span className="sorting-icon-container">
{sortConfigs[index]?.key === "family" ? (
sortConfigs[index]?.direction === "asc" ? (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
) : (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-up"></em>
)
) : (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
)}
</span>
</th>
<th
onClick={() => handleSort(index, "listNo")}
style={{ cursor: "pointer", fontWeight: "bold" }}
>
{t("reach_product_step1_table_productListNo")}
<span className="sorting-icon-container">
{sortConfigs[index]?.key === "listNo" ? (
sortConfigs[index]?.direction === "asc" ? (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
) : (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-up"></em>
)
) : (
<em class="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
)}
</span>
</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}
disabled={selectedProducts?.length === 0}
>
{t("reach_product_step1_proceedBtn")}
</button>
</div>
</div>
)





import React from "react";

export const PlatformProductInputs = ({
handleExpandAllStep2,
selectedProducts,
expandedStep2,
getProductCount,
countType,
handleCountChange,
showWarning,
setShowWarning,
isWarningCheckboxChecked,
setIsWarningCheckboxChecked,
setCurrentStep,
handleProceed,
handleCancel,
t,
blankFields,
currentStep,
handleToggleStep2,
setValidInput,
generateSummary,
}) => {

const currentYear = new Date().getFullYear();

return (
<div className="step-2-content">
<h1 className="selection-title2">
{countType === "kit"
? `${t('reach_product_step2_heading_kit_count')}`
: `${t('reach_product_step2_heading_test_count')}`
}
</h1>
<p className="selection-subtitle2">
{countType === "kit"
? `${t("reach_product_step2_subheading_part1_kit_count")} ${currentYear} ${t("reach_product_step2_subheading_part2")}`
: `${t("reach_product_step2_subheading_part1_test_count")} ${currentYear} ${t("reach_product_step2_subheading_part2")}`}
</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_step1_collapseAll")
: t("reach_product_step1_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]}
>
<div>
{section.parent}{" "}
<span className="badge badge-dark">
{getProductCount(section.products)}
</span>
</div>
<span className="expand-icon ms-2">
{expandedStep2[parentIndex] ? (
<em class="abt-icon abt-icon-minus"></em>
) : (
<em class="abt-icon abt-icon-plus"></em>
)}
</span>
</button>
</h2>

<div
className={`accordion-collapse collapse ${
expandedStep2[parentIndex] ? "show" : ""
}`}
aria-labelledby={`accordionStep2${parentIndex}`}
>
<div className="accordion-body">
{/* mobile view step 2*/}
<div className="d-block d-md-none reach-input2">
{section.products.map((product, productIndex) => (
<div className="card" key={productIndex}>
<div className="card-body px-4 py-3">
<div className="row">
<div className="col-12 align-items-left">
<p className="card-title mb-2">{product?.name}</p>
<p className="card-text mb-2">{product?.family}</p>
<p className="card-text mb-2">{product?.listNo}</p>
<hr className="custom-hr"></hr>
{countType === "test" ? (
<div className="form-group">
<label>Number of Tests:</label>
<input
type="text"
className={`form-control ${
blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.type === "test"
)
? "input-error"
: ""
}`}
value={product?.testCount ?? ''}
onChange={(e) =>
handleCountChange(parentIndex, productIndex, e.target.value, { type: 'test' })
}
onKeyDown={(e) => {
if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === '+' || e.key === '-') {
e.preventDefault();
}
}}
/>
</div>
) : (
product.kits.map((kit, kitIndex) => (
<div
className="form-group"
key={`${productIndex}-${kitIndex}`}
>
<label>
Number of Kits (List Sale Size:{" "}
{kit.listSaleSize}, Tests per Kit:{" "}
{kit.testsPerKit}):
</label>
<input
type="text"
className={`form-control ${
blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.kitIndex === kitIndex &&
field.type === "kit"
)
? "input-error"
: ""
}`}
value={kit?.reagentKits ?? ''}
onChange={(e) =>
handleCountChange(parentIndex, productIndex, e.target.value, {
kitIndex,
type: 'kit',
})
}
onKeyDown={(e) => {
if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === '+' || e.key === '-') {
e.preventDefault();
}
}}
/>
</div>
))
)}
</div>
</div>
</div>
</div>
))}
</div>
<div className="d-none d-md-block">
{" "}
<table className="table product-table reachinput">
<thead>
<tr>
<th>{t("reach_product_step1_table_productName")}</th>
<th>{t("reach_product_step1_table_productFamily")}</th>
<th>{t("reach_product_step1_table_productListNo")}</th>
{countType === "kit" ? (
<>
{/* <th>Tests per Kit</th> */}
<th>
{t("reach_product_step2_table_header_kit_input")}
</th>
</>
) : (
<th>
{t("reach_product_step2_table_header_test_input")}
</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>
<input
type="text"
className={`form-control ${
blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.type === "test"
)
? "input-error"
: ""
}`}

value={product?.testCount ?? ''}
onChange={(e) =>
handleCountChange(parentIndex, productIndex, e.target.value, { type: 'test' })
}
onKeyDown={(e) => {
if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === '+' || e.key === '-') {
e.preventDefault();
}
}}
/>
</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="text"
value={kit?.reagentKits ?? ''}
onChange={(e) =>
handleCountChange(parentIndex, productIndex, e.target.value, {
kitIndex,
type: 'kit',
})
}
onKeyDown={(e) => {
if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === '+' || e.key === '-') {
e.preventDefault();
}
}}
className={`form-control ${
isBlank ? "input-error" : ""
}`}
/>
</td>
</tr>
);
})}
</React.Fragment>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
))}
</div>
{showWarning && (
<div>
<div className="flex items-center gap-4">
<div className=" flex items-center justify-center reachcircle">
<em class="abt-icon abt-icon-notice svg1"></em>
<p className="mb-0 svg1-text">
{t("reach_product_step2_warningmsg")}
</p>
</div>
</div>

<div className="form-check formcheck">
<input
type="checkbox"
className="form-check-input"
id="acknowledgeWarning"
checked={isWarningCheckboxChecked}
onChange={(e) => {
setIsWarningCheckboxChecked(e.target.checked);
}}
/>
<label
className="form-check-label fmlable"
htmlFor="acknowledgeWarning"
>
{t("reach_product_step2_checkbox_confirm")}
</label>
</div>
</div>
)}
<div className=" flex items-center justify-center reach-info">
<em class="abt-icon abt-icon-information svg2"></em>
<p className="mb-0 svg2-text">
{t("reach_product_step2_review_entry_msg")}
</p>
</div>

<div className="button-group mt-3 d-flex justify-content-between reachbuttons">
<div className="d-flex">
<button
className="btn btn-secondary buttonbd me-2 buttonback"
onClick={() => {
setIsWarningCheckboxChecked(false);
setShowWarning(false);
setValidInput(false);
setCurrentStep(1)
}}
>
{t("reach_back_button")}
</button>

{currentStep === 2 && (
<button
className="btn btn-secondary buttondownload"
onClick={() => generateSummary('summary page')}
>
{t("reach_download_input_summary_btn")}
</button>
)}
</div>

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

<button
className="btn btn-primary buttonproceed"
disabled={showWarning && !isWarningCheckboxChecked}
onClick={handleProceed}
>
{t("reach_product_step1_proceedBtn")}
</button>
</div>
</div>
<div className="text3">
<p>{t("reach_product_step2_warningmsg_session")}</p>
</div>
</div>
);
};