{"version":3,"file":"static/js/164.a7b3a813.chunk.js","mappings":"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","sources":["shared/parking-product-pricing-table/parking-product-pricing-table-container-component.jsx","shared/parking-product-pricing-table/parking-product-pricing-table-module.jsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport ReactHtmlParser from \"react-html-parser\"\nimport useWindowWidth from \"../../hooks/useWindowWidth\"\nimport * as SelectionFactoryHelper from \"../helpers/SelectionFactoryHelper\"\nimport PropTypes, { arrayOf } from \"prop-types\"\nimport { object } from \"underscore\"\n\nexport default function ParkingProductPricingTableContainer({ headline, subHeadline, parkingProductTableBlocks }) {\n  const [activeColumnIndex, setActiveColumnIndex] = useState(0) // default to the first column after row headers\n  const windowWidth = useWindowWidth() // Using your custom hook\n\n  return (\n    <section className={\"product-pricing-table-container w--wider\"}>\n      <h2 id={headline ? headline.replaceAll(\" \", \"-\") : \"\"} className=\"parking-product-pricing-header\">\n        {headline}\n      </h2>\n      <div className=\"subheadline\">{ReactHtmlParser(subHeadline)}</div>\n\n      {windowWidth < 950 && (\n        <div className=\"tabs\">\n          {parkingProductTableBlocks[0]?.parkingPricingColumns\n            .filter((column) => column.__type__ === \"ParkingProductPricingColumnBlock\")\n            .map((column, index) => (\n              <button key={index} className={`tab ${activeColumnIndex === index ? \"active\" : \"\"}`} onClick={() => setActiveColumnIndex(index)}>\n                {column.columnHeader}\n              </button>\n            ))}\n        </div>\n      )}\n\n      {parkingProductTableBlocks && parkingProductTableBlocks.length > 0\n        ? parkingProductTableBlocks.map((table, index) => {\n            return (\n              <ParkingProductPricingTablehead\n                key={table.tableHeading + \"-\" + (table?.productCodes[0]?.carparkCode ?? \"code-less\" + \"-\" + index)}\n                tableHeading={table.tableHeading}\n                productCodes={table.productCodes}\n                tableNotice={table.tableNotice}\n                parkingPricingColumns={table.parkingPricingColumns}\n                activeColumnIndex={activeColumnIndex}\n                windowWidth={windowWidth}\n              />\n            )\n          })\n        : undefined}\n    </section>\n  )\n}\n\nParkingProductPricingTableContainer.propTypes = {\n  headline: PropTypes.string,\n  subHeadline: PropTypes.string,\n  parkingProductTableBlocks: arrayOf(object),\n}\n\nfunction ParkingProductPricingTablehead({ tableHeading, productCodes, tableNotice, parkingPricingColumns, activeColumnIndex, windowWidth }) {\n  const initialColumnBlock = parkingPricingColumns.find((column) => column.__type__ === \"ParkingProductPricingTableInitialColumnBlock\")\n  const otherColumns = parkingPricingColumns.filter((column) => column.__type__ === \"ParkingProductPricingColumnBlock\")\n\n  const activeColumn = windowWidth < 950 && activeColumnIndex !== null ? otherColumns[activeColumnIndex] : null\n\n  const numOfDataColumns = otherColumns && otherColumns.length\n\n  const columnClass =\n    numOfDataColumns == 1 ? \"single\" : numOfDataColumns == 2 ? \"double\" : numOfDataColumns == 3 ? \"triple\" : numOfDataColumns == 4 ? \"quad\" : \"\"\n\n  return (\n    <table className=\"product-pricing-table\">\n      <caption className=\"product-pricing-table-caption\">\n        {tableHeading}\n        <div className=\"product-codes\">\n          {productCodes && productCodes.length > 0\n            ? productCodes.map((code, index) => (\n                <div key={index} className=\"code-container\">\n                  <span className={`code ${SelectionFactoryHelper.getFromSelectionFactory(code.style)}`}>{code.carparkCode}</span>\n                  {code.carparkCodeDescriptor && <p>{code.carparkCodeDescriptor}</p>}\n                </div>\n              ))\n            : undefined}\n        </div>\n        {tableNotice && <p className=\"notice\">{tableNotice}</p>}\n      </caption>\n\n      <thead className={windowWidth < 950 ? \"hidden-header\" : \"\"}>\n        <tr>\n          {/* Top left cell is always empty. */}\n          <th className={columnClass} aria-label=\"start\"></th>\n          {otherColumns.map((column, index) => (\n            <th className={columnClass} key={index} aria-hidden={windowWidth < 950 && activeColumnIndex !== index}>\n              <p>{column.columnHeader}</p>\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      <tbody>\n        {windowWidth < 950 && activeColumn?.isEmpty ? (\n          <tr className=\"empty-row\">\n            <td className=\"empty-cell\" colSpan={initialColumnBlock?.rowHeads.length + 1}>\n              <p className=\"empty-description\">{activeColumn.isEmptyDescription}</p>\n            </td>\n          </tr>\n        ) : (\n          initialColumnBlock?.rowHeads.map((row, rowIndex) => (\n            <tr key={rowIndex}>\n              <th className={columnClass} scope=\"row\">\n                <p>\n                  {row.rowHead}\n                  {row.subDescription && <small>{row.subDescription}</small>}\n                </p>\n              </th>\n\n              {otherColumns.map((column, colIndex) => {\n                if (windowWidth < 950 && colIndex !== activeColumnIndex) return null\n\n                return (\n                  <td className={columnClass} key={colIndex}>\n                    {windowWidth < 950 && column.isEmpty ? (\n                      <p>\n                        <span className=\"empty-description\">{column.isEmptyDescription}</span>\n                      </p>\n                    ) : column?.rowData?.length > 0 ? (\n                      <p>\n                        <span>{column.rowData[rowIndex]}</span>\n                      </p>\n                    ) : (\n                      <span className=\"empty-cell\"></span>\n                    )}\n                  </td>\n                )\n              })}\n            </tr>\n          ))\n        )}\n      </tbody>\n    </table>\n  )\n}\n\nParkingProductPricingTablehead.propTypes = {\n  tableHeading: PropTypes.string,\n  productCodes: PropTypes.arrayOf(object),\n  tableNotice: PropTypes.string,\n  parkingPricingColumns: arrayOf(object),\n  activeColumnIndex: PropTypes.number,\n  windowWidth: PropTypes.number,\n}\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport ParkingProductPricingTableContainer from \"./parking-product-pricing-table-container-component.jsx\"\n\nexport default class ParkingProductPricingTableModule {\n  constructor(elem) {\n    const self = this\n    self.elem = elem\n    self.modelJson = elem.dataset.modelJson && JSON.parse(elem.dataset.modelJson)\n    this.init()\n    return self\n  }\n\n  init() {\n    const self = this\n    ReactDOM.unmountComponentAtNode(self.elem)\n    ReactDOM.render(<ParkingProductPricingTableContainer {...self.modelJson} />, self.elem)\n  }\n}\n"],"names":["ParkingProductPricingTableContainer","_ref","_parkingProductTableB","headline","subHeadline","parkingProductTableBlocks","_useState","useState","_useState2","_slicedToArray","activeColumnIndex","setActiveColumnIndex","windowWidth","useWindowWidth","_jsxs","className","children","_jsx","id","replaceAll","ReactHtmlParser","parkingPricingColumns","filter","column","__type__","map","index","concat","onClick","columnHeader","length","table","_table$productCodes$","_table$productCodes$2","ParkingProductPricingTablehead","tableHeading","productCodes","tableNotice","carparkCode","undefined","_ref2","initialColumnBlock","find","otherColumns","activeColumn","numOfDataColumns","columnClass","code","SelectionFactoryHelper","style","carparkCodeDescriptor","isEmpty","colSpan","rowHeads","isEmptyDescription","row","rowIndex","scope","rowHead","subDescription","colIndex","_column$rowData","rowData","ParkingProductPricingTableModule","_createClass","elem","_classCallCheck","self","this","modelJson","dataset","JSON","parse","init","key","value","ReactDOM","_objectSpread"],"sourceRoot":""}