merchi_product_form/lib/components/VariationOptionColour.js

A React component for Merchi product forms

'use client';

import * as React from 'react';
import TooltipElement from './TooltipElement';
import { variationFieldOptionCostDetail } from './utils';
import VariationFieldOptionDefaultInputs from './VariationFieldOptionDefaultInputs';
import IconCheckedOrNoStock from './icons/IconCheckedOrNoStock';
import { useMerchiFormContext } from '../context/MerchiProductFormProvider';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function VariationOptionColour(_ref) {
  var doClick = _ref.doClick,
    _ref$isAvailable = _ref.isAvailable,
    isAvailable = _ref$isAvailable === void 0 ? true : _ref$isAvailable,
    isChecked = _ref.isChecked,
    name = _ref.name,
    option = _ref.option,
    sellerProductEditable = _ref.sellerProductEditable;
  var _useMerchiFormContext = useMerchiFormContext(),
    classNameOptionColour = _useMerchiFormContext.classNameOptionColour,
    classNameOptionColourContainer = _useMerchiFormContext.classNameOptionColourContainer;
  var color = option.colour,
    value = option.value;
  var containerClass = "".concat(classNameOptionColour, " ").concat(isChecked ? 'image-checked' : '', " ").concat(isAvailable ? 'cursor-pointer' : 'option-no-inventory');
  var optionCost = variationFieldOptionCostDetail(option);
  return /*#__PURE__*/_jsxs("div", {
    className: classNameOptionColourContainer,
    onClick: isAvailable ? doClick : undefined,
    children: [/*#__PURE__*/_jsx("div", {
      className: containerClass,
      style: {
        backgroundColor: color
      },
      children: /*#__PURE__*/_jsx(IconCheckedOrNoStock, {
        isChecked: isChecked,
        noStock: !isAvailable
      })
    }), /*#__PURE__*/_jsx(TooltipElement, {
      tooltip: String(value) + "".concat(!isAvailable ? ' - insufficient stock' : ''),
      children: /*#__PURE__*/_jsx("p", {
        className: "merchi-embed-form_color-select-description",
        children: value
      })
    }), sellerProductEditable && /*#__PURE__*/_jsx("small", {
      className: "d-block",
      children: optionCost
    }), /*#__PURE__*/_jsx(VariationFieldOptionDefaultInputs, {
      optionName: name,
      option: option
    })]
  });
}
export default VariationOptionColour;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlRvb2x0aXBFbGVtZW50IiwidmFyaWF0aW9uRmllbGRPcHRpb25Db3N0RGV0YWlsIiwiVmFyaWF0aW9uRmllbGRPcHRpb25EZWZhdWx0SW5wdXRzIiwiSWNvbkNoZWNrZWRPck5vU3RvY2siLCJ1c2VNZXJjaGlGb3JtQ29udGV4dCIsImpzeCIsIl9qc3giLCJqc3hzIiwiX2pzeHMiLCJWYXJpYXRpb25PcHRpb25Db2xvdXIiLCJfcmVmIiwiZG9DbGljayIsIl9yZWYkaXNBdmFpbGFibGUiLCJpc0F2YWlsYWJsZSIsImlzQ2hlY2tlZCIsIm5hbWUiLCJvcHRpb24iLCJzZWxsZXJQcm9kdWN0RWRpdGFibGUiLCJfdXNlTWVyY2hpRm9ybUNvbnRleHQiLCJjbGFzc05hbWVPcHRpb25Db2xvdXIiLCJjbGFzc05hbWVPcHRpb25Db2xvdXJDb250YWluZXIiLCJjb2xvciIsImNvbG91ciIsInZhbHVlIiwiY29udGFpbmVyQ2xhc3MiLCJjb25jYXQiLCJvcHRpb25Db3N0IiwiY2xhc3NOYW1lIiwib25DbGljayIsInVuZGVmaW5lZCIsImNoaWxkcmVuIiwic3R5bGUiLCJiYWNrZ3JvdW5kQ29sb3IiLCJub1N0b2NrIiwidG9vbHRpcCIsIlN0cmluZyIsIm9wdGlvbk5hbWUiXSwic291cmNlcyI6WyIuLi8uLi9zcmMvY29tcG9uZW50cy9WYXJpYXRpb25PcHRpb25Db2xvdXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBUb29sdGlwRWxlbWVudCBmcm9tICcuL1Rvb2x0aXBFbGVtZW50JztcbmltcG9ydCB7IHZhcmlhdGlvbkZpZWxkT3B0aW9uQ29zdERldGFpbCB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IFZhcmlhdGlvbkZpZWxkT3B0aW9uRGVmYXVsdElucHV0cyBmcm9tICcuL1ZhcmlhdGlvbkZpZWxkT3B0aW9uRGVmYXVsdElucHV0cyc7XG5pbXBvcnQgSWNvbkNoZWNrZWRPck5vU3RvY2sgZnJvbSAnLi9pY29ucy9JY29uQ2hlY2tlZE9yTm9TdG9jayc7XG5pbXBvcnQgeyB1c2VNZXJjaGlGb3JtQ29udGV4dCB9IGZyb20gJy4uL2NvbnRleHQvTWVyY2hpUHJvZHVjdEZvcm1Qcm92aWRlcic7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGRvQ2xpY2s6ICgpID0+IHZvaWQ7XG4gIGlzQXZhaWxhYmxlOiBib29sZWFuO1xuICBpc0NoZWNrZWQ6IGJvb2xlYW47XG4gIG5hbWU6IHN0cmluZztcbiAgb3B0aW9uOiBhbnk7XG4gIHNlbGxlclByb2R1Y3RFZGl0YWJsZT86IGJvb2xlYW47XG59XG5cbmZ1bmN0aW9uIFZhcmlhdGlvbk9wdGlvbkNvbG91cih7XG4gIGRvQ2xpY2ssXG4gIGlzQXZhaWxhYmxlID0gdHJ1ZSxcbiAgaXNDaGVja2VkLFxuICBuYW1lLFxuICBvcHRpb24sXG4gIHNlbGxlclByb2R1Y3RFZGl0YWJsZSxcbn06IFByb3BzKSB7XG4gIGNvbnN0IHtcbiAgICBjbGFzc05hbWVPcHRpb25Db2xvdXIsXG4gICAgY2xhc3NOYW1lT3B0aW9uQ29sb3VyQ29udGFpbmVyLFxuICB9ID0gdXNlTWVyY2hpRm9ybUNvbnRleHQoKTtcbiAgY29uc3QgeyBjb2xvdXI6IGNvbG9yLCB2YWx1ZSB9ID0gb3B0aW9uO1xuICBjb25zdCBjb250YWluZXJDbGFzcyA9IGAke2NsYXNzTmFtZU9wdGlvbkNvbG91cn0gJHtpc0NoZWNrZWQgPyAnaW1hZ2UtY2hlY2tlZCcgOiAnJ30gJHtpc0F2YWlsYWJsZSA/ICdjdXJzb3ItcG9pbnRlcicgOiAnb3B0aW9uLW5vLWludmVudG9yeSd9YDtcbiAgY29uc3Qgb3B0aW9uQ29zdCA9IHZhcmlhdGlvbkZpZWxkT3B0aW9uQ29zdERldGFpbChvcHRpb24pO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lT3B0aW9uQ29sb3VyQ29udGFpbmVyfVxuICAgICAgb25DbGljaz17aXNBdmFpbGFibGUgPyBkb0NsaWNrIDogdW5kZWZpbmVkfVxuICAgID5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtjb250YWluZXJDbGFzc30gc3R5bGU9e3sgYmFja2dyb3VuZENvbG9yOiBjb2xvciB9fT5cbiAgICAgICAgPEljb25DaGVja2VkT3JOb1N0b2NrIGlzQ2hlY2tlZD17aXNDaGVja2VkfSBub1N0b2NrPXshaXNBdmFpbGFibGV9IC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxUb29sdGlwRWxlbWVudFxuICAgICAgICB0b29sdGlwPXtcbiAgICAgICAgICBTdHJpbmcodmFsdWUpICsgYCR7IWlzQXZhaWxhYmxlID8gJyAtIGluc3VmZmljaWVudCBzdG9jaycgOiAnJ31gXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPHAgY2xhc3NOYW1lPSdtZXJjaGktZW1iZWQtZm9ybV9jb2xvci1zZWxlY3QtZGVzY3JpcHRpb24nPnt2YWx1ZX08L3A+XG4gICAgICA8L1Rvb2x0aXBFbGVtZW50PlxuICAgICAge3NlbGxlclByb2R1Y3RFZGl0YWJsZSAmJiA8c21hbGwgY2xhc3NOYW1lPSdkLWJsb2NrJz57b3B0aW9uQ29zdH08L3NtYWxsPn1cbiAgICAgIDxWYXJpYXRpb25GaWVsZE9wdGlvbkRlZmF1bHRJbnB1dHMgb3B0aW9uTmFtZT17bmFtZX0gb3B0aW9uPXtvcHRpb259IC8+XG4gICAgPC9kaXY+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFZhcmlhdGlvbk9wdGlvbkNvbG91cjtcbiJdLCJtYXBwaW5ncyI6IkFBQUEsWUFBWTs7QUFDWixPQUFPLEtBQUtBLEtBQUssTUFBTSxPQUFPO0FBQzlCLE9BQU9DLGNBQWMsTUFBTSxrQkFBa0I7QUFDN0MsU0FBU0MsOEJBQThCLFFBQVEsU0FBUztBQUN4RCxPQUFPQyxpQ0FBaUMsTUFBTSxxQ0FBcUM7QUFDbkYsT0FBT0Msb0JBQW9CLE1BQU0sOEJBQThCO0FBQy9ELFNBQVNDLG9CQUFvQixRQUFRLHNDQUFzQztBQUFDLFNBQUFDLEdBQUEsSUFBQUMsSUFBQTtBQUFBLFNBQUFDLElBQUEsSUFBQUMsS0FBQTtBQVc1RSxTQUFTQyxxQkFBcUJBLENBQUFDLElBQUEsRUFPcEI7RUFBQSxJQU5SQyxPQUFPLEdBQUFELElBQUEsQ0FBUEMsT0FBTztJQUFBQyxnQkFBQSxHQUFBRixJQUFBLENBQ1BHLFdBQVc7SUFBWEEsV0FBVyxHQUFBRCxnQkFBQSxjQUFHLElBQUksR0FBQUEsZ0JBQUE7SUFDbEJFLFNBQVMsR0FBQUosSUFBQSxDQUFUSSxTQUFTO0lBQ1RDLElBQUksR0FBQUwsSUFBQSxDQUFKSyxJQUFJO0lBQ0pDLE1BQU0sR0FBQU4sSUFBQSxDQUFOTSxNQUFNO0lBQ05DLHFCQUFxQixHQUFBUCxJQUFBLENBQXJCTyxxQkFBcUI7RUFFckIsSUFBQUMscUJBQUEsR0FHSWQsb0JBQW9CLENBQUMsQ0FBQztJQUZ4QmUscUJBQXFCLEdBQUFELHFCQUFBLENBQXJCQyxxQkFBcUI7SUFDckJDLDhCQUE4QixHQUFBRixxQkFBQSxDQUE5QkUsOEJBQThCO0VBRWhDLElBQWdCQyxLQUFLLEdBQVlMLE1BQU0sQ0FBL0JNLE1BQU07SUFBU0MsS0FBSyxHQUFLUCxNQUFNLENBQWhCTyxLQUFLO0VBQzVCLElBQU1DLGNBQWMsTUFBQUMsTUFBQSxDQUFNTixxQkFBcUIsT0FBQU0sTUFBQSxDQUFJWCxTQUFTLEdBQUcsZUFBZSxHQUFHLEVBQUUsT0FBQVcsTUFBQSxDQUFJWixXQUFXLEdBQUcsZ0JBQWdCLEdBQUcscUJBQXFCLENBQUU7RUFDL0ksSUFBTWEsVUFBVSxHQUFHekIsOEJBQThCLENBQUNlLE1BQU0sQ0FBQztFQUN6RCxvQkFDRVIsS0FBQTtJQUNFbUIsU0FBUyxFQUFFUCw4QkFBK0I7SUFDMUNRLE9BQU8sRUFBRWYsV0FBVyxHQUFHRixPQUFPLEdBQUdrQixTQUFVO0lBQUFDLFFBQUEsZ0JBRTNDeEIsSUFBQTtNQUFLcUIsU0FBUyxFQUFFSCxjQUFlO01BQUNPLEtBQUssRUFBRTtRQUFFQyxlQUFlLEVBQUVYO01BQU0sQ0FBRTtNQUFBUyxRQUFBLGVBQ2hFeEIsSUFBQSxDQUFDSCxvQkFBb0I7UUFBQ1csU0FBUyxFQUFFQSxTQUFVO1FBQUNtQixPQUFPLEVBQUUsQ0FBQ3BCO01BQVksQ0FBRTtJQUFDLENBQ2xFLENBQUMsZUFDTlAsSUFBQSxDQUFDTixjQUFjO01BQ2JrQyxPQUFPLEVBQ0xDLE1BQU0sQ0FBQ1osS0FBSyxDQUFDLE1BQUFFLE1BQUEsQ0FBTSxDQUFDWixXQUFXLEdBQUcsdUJBQXVCLEdBQUcsRUFBRSxDQUMvRDtNQUFBaUIsUUFBQSxlQUVEeEIsSUFBQTtRQUFHcUIsU0FBUyxFQUFDLDRDQUE0QztRQUFBRyxRQUFBLEVBQUVQO01BQUssQ0FBSTtJQUFDLENBQ3ZELENBQUMsRUFDaEJOLHFCQUFxQixpQkFBSVgsSUFBQTtNQUFPcUIsU0FBUyxFQUFDLFNBQVM7TUFBQUcsUUFBQSxFQUFFSjtJQUFVLENBQVEsQ0FBQyxlQUN6RXBCLElBQUEsQ0FBQ0osaUNBQWlDO01BQUNrQyxVQUFVLEVBQUVyQixJQUFLO01BQUNDLE1BQU0sRUFBRUE7SUFBTyxDQUFFLENBQUM7RUFBQSxDQUNwRSxDQUFDO0FBRVY7QUFFQSxlQUFlUCxxQkFBcUIifQ==