Notes

import React from 'react';
import { observer } from 'mobx-react';
import { StoreContext } from '../../utils/StoreContext';
import styles from './sass/pdp-comparison-schema.scss';

function pdpComparisonSchema({ location }) {
const { pdpPrototype, appState } = React.useContext(StoreContext);
const { optionValuesWithFacets: result } = pdpPrototype;

console.log(result, 'optionValuesWithFacets');

// If the data is being fetched, display a loader
if (appState.isFetching) {
return <div className="loader" />;
}

// Function to extract unique option group types from the data
const getUniqueOptionGroupTypes = () => {
const optionGroupTypes = new Set();
result.forEach(variant => {
variant.compatibleVariantDetails.forEach(detail => {
optionGroupTypes.add(detail.optionGroupType);
});
});
return Array.from(optionGroupTypes);
};

const optionGroupTypes = getUniqueOptionGroupTypes();

return (
<div className={styles.page}>
<h1>Product Comparison</h1>
<div className={styles.comparisonTable}>
{/* First row: dimensionChip */}
<div className={styles.tableRow}>
<div className={styles.tableHeader}>Chip</div>
{result.map((variant, index) => (
<div key={index} className={styles.tableCell}>
{variant.groupedVariantKeyToValue?.dimensionChip}
</div>
))}
</div>

{/* Display comparisons for each unique optionGroupType */}
{optionGroupTypes.map((groupType, rowIndex) => (
<div key={rowIndex} className={styles.tableRow}>
<div className={styles.tableHeader}>{groupType}</div>
{result.map((variant, colIndex) => {
// Find the corresponding detail for this option group type in this variant
const detail = variant.compatibleVariantDetails.find(
detail => detail.optionGroupType === groupType
);

return (
<div key={colIndex} className={styles.tableCell}>
{/* Option Display Names */}
{detail?.optionDisplayNamesSummary?.map((displayName, i) => (
<p key={i}>{displayName}</p>
))}

{/* Variant Values Summaries */}
{detail?.variantValuesSummaries?.map((summary, i) => (
<div key={i}>
<strong>{summary.variantKey}:</strong> {summary.valuesSummary?.join(', ')}
</div>
))}
</div>
);
})}
</div>
))}
</div>
</div>
);
}

export default observer(pdpComparisonSchema);
.page {
padding: 20px;
}

.comparisonTable {
display: table;
width: 100%;
border-collapse: collapse;
}

.tableRow {
display: table-row;
}

.tableHeader {
display: table-cell;
font-weight: bold;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}

.tableCell {
display: table-cell;
padding: 10px;
border: 1px solid #ddd;
}

.loader {
text-align: center;
font-size: 18px;
}