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 IconCheckedOrNoStock from './icons/IconCheckedOrNoStock';
import { useMerchiFormContext } from '../context/MerchiProductFormProvider';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function VariationOptionColour(_ref) {
  var doClick = _ref.doClick,
    isChecked = _ref.isChecked,
    option = _ref.option,
    sellerProductEditable = _ref.sellerProductEditable;
  var _useMerchiFormContext = useMerchiFormContext(),
    classNameOptionColour = _useMerchiFormContext.classNameOptionColour,
    classNameOptionColourContainer = _useMerchiFormContext.classNameOptionColourContainer;
  var available = option.available,
    color = option.colour,
    isVisible = option.isVisible,
    optionId = option.optionId,
    value = option.value;
  var isActive = available && isVisible;
  var optionCost = variationFieldOptionCostDetail(option);
  return /*#__PURE__*/_jsxs("div", {
    className: classNameOptionColourContainer,
    onClick: isActive ? doClick : undefined,
    children: [/*#__PURE__*/_jsx("div", {
      className: "".concat(classNameOptionColour, " ").concat(isChecked ? 'image-checked' : '', " ").concat(isActive ? 'cursor-pointer' : 'option-no-inventory'),
      style: {
        backgroundColor: color
      },
      children: /*#__PURE__*/_jsx(IconCheckedOrNoStock, {
        isChecked: isChecked,
        noStock: !isActive
      })
    }), /*#__PURE__*/_jsx(TooltipElement, {
      id: "variation-option-".concat(optionId, "-tooltip"),
      tooltip: "".concat(value).concat(!isVisible ? ' - disabled' : !available ? ' - insufficient stock' : ''),
      children: /*#__PURE__*/_jsx("p", {
        className: "merchi-embed-form_color-select-description",
        children: value
      })
    }), sellerProductEditable && /*#__PURE__*/_jsx("small", {
      className: "d-block",
      children: optionCost
    })]
  });
}
export default VariationOptionColour;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlRvb2x0aXBFbGVtZW50IiwidmFyaWF0aW9uRmllbGRPcHRpb25Db3N0RGV0YWlsIiwiSWNvbkNoZWNrZWRPck5vU3RvY2siLCJ1c2VNZXJjaGlGb3JtQ29udGV4dCIsImpzeCIsIl9qc3giLCJqc3hzIiwiX2pzeHMiLCJWYXJpYXRpb25PcHRpb25Db2xvdXIiLCJfcmVmIiwiZG9DbGljayIsImlzQ2hlY2tlZCIsIm9wdGlvbiIsInNlbGxlclByb2R1Y3RFZGl0YWJsZSIsIl91c2VNZXJjaGlGb3JtQ29udGV4dCIsImNsYXNzTmFtZU9wdGlvbkNvbG91ciIsImNsYXNzTmFtZU9wdGlvbkNvbG91ckNvbnRhaW5lciIsImF2YWlsYWJsZSIsImNvbG9yIiwiY29sb3VyIiwiaXNWaXNpYmxlIiwib3B0aW9uSWQiLCJ2YWx1ZSIsImlzQWN0aXZlIiwib3B0aW9uQ29zdCIsImNsYXNzTmFtZSIsIm9uQ2xpY2siLCJ1bmRlZmluZWQiLCJjaGlsZHJlbiIsImNvbmNhdCIsInN0eWxlIiwiYmFja2dyb3VuZENvbG9yIiwibm9TdG9jayIsImlkIiwidG9vbHRpcCJdLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL1ZhcmlhdGlvbk9wdGlvbkNvbG91ci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xyXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XHJcbmltcG9ydCBUb29sdGlwRWxlbWVudCBmcm9tICcuL1Rvb2x0aXBFbGVtZW50JztcclxuaW1wb3J0IHsgdmFyaWF0aW9uRmllbGRPcHRpb25Db3N0RGV0YWlsIH0gZnJvbSAnLi91dGlscyc7XHJcbmltcG9ydCBJY29uQ2hlY2tlZE9yTm9TdG9jayBmcm9tICcuL2ljb25zL0ljb25DaGVja2VkT3JOb1N0b2NrJztcclxuaW1wb3J0IHsgdXNlTWVyY2hpRm9ybUNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0L01lcmNoaVByb2R1Y3RGb3JtUHJvdmlkZXInO1xyXG5cclxuaW50ZXJmYWNlIFByb3BzIHtcclxuICBkb0NsaWNrOiAoKSA9PiB2b2lkO1xyXG4gIGlzQ2hlY2tlZDogYm9vbGVhbjtcclxuICBvcHRpb246IGFueTtcclxuICBzZWxsZXJQcm9kdWN0RWRpdGFibGU/OiBib29sZWFuO1xyXG59XHJcblxyXG5mdW5jdGlvbiBWYXJpYXRpb25PcHRpb25Db2xvdXIoe1xyXG4gIGRvQ2xpY2ssXHJcbiAgaXNDaGVja2VkLFxyXG4gIG9wdGlvbixcclxuICBzZWxsZXJQcm9kdWN0RWRpdGFibGUsXHJcbn06IFByb3BzKSB7XHJcbiAgY29uc3Qge1xyXG4gICAgY2xhc3NOYW1lT3B0aW9uQ29sb3VyLFxyXG4gICAgY2xhc3NOYW1lT3B0aW9uQ29sb3VyQ29udGFpbmVyLFxyXG4gIH0gPSB1c2VNZXJjaGlGb3JtQ29udGV4dCgpO1xyXG4gIGNvbnN0IHsgYXZhaWxhYmxlLCBjb2xvdXI6IGNvbG9yLCBpc1Zpc2libGUsIG9wdGlvbklkLCB2YWx1ZSB9ID0gb3B0aW9uO1xyXG4gIGNvbnN0IGlzQWN0aXZlID0gYXZhaWxhYmxlICYmIGlzVmlzaWJsZTtcclxuICBjb25zdCBvcHRpb25Db3N0ID0gdmFyaWF0aW9uRmllbGRPcHRpb25Db3N0RGV0YWlsKG9wdGlvbik7XHJcbiAgcmV0dXJuIChcclxuICAgIDxkaXZcclxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVPcHRpb25Db2xvdXJDb250YWluZXJ9XHJcbiAgICAgIG9uQ2xpY2s9e2lzQWN0aXZlID8gZG9DbGljayA6IHVuZGVmaW5lZH1cclxuICAgID5cclxuICAgICAgPGRpdlxyXG4gICAgICAgIGNsYXNzTmFtZT17YCR7Y2xhc3NOYW1lT3B0aW9uQ29sb3VyfSAke2lzQ2hlY2tlZCA/ICdpbWFnZS1jaGVja2VkJyA6ICcnfSAke2lzQWN0aXZlID8gJ2N1cnNvci1wb2ludGVyJyA6ICdvcHRpb24tbm8taW52ZW50b3J5J31gfVxyXG4gICAgICAgIHN0eWxlPXt7IGJhY2tncm91bmRDb2xvcjogY29sb3IgfX1cclxuICAgICAgPlxyXG4gICAgICAgIDxJY29uQ2hlY2tlZE9yTm9TdG9jayBpc0NoZWNrZWQ9e2lzQ2hlY2tlZH0gbm9TdG9jaz17IWlzQWN0aXZlfSAvPlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPFRvb2x0aXBFbGVtZW50XHJcbiAgICAgICAgaWQ9e2B2YXJpYXRpb24tb3B0aW9uLSR7b3B0aW9uSWR9LXRvb2x0aXBgfVxyXG4gICAgICAgIHRvb2x0aXA9e2Ake3ZhbHVlfSR7IWlzVmlzaWJsZSA/ICcgLSBkaXNhYmxlZCcgOiAhYXZhaWxhYmxlID8gJyAtIGluc3VmZmljaWVudCBzdG9jaycgOiAnJ31gfVxyXG4gICAgICA+XHJcbiAgICAgICAgPHAgY2xhc3NOYW1lPSdtZXJjaGktZW1iZWQtZm9ybV9jb2xvci1zZWxlY3QtZGVzY3JpcHRpb24nPnt2YWx1ZX08L3A+XHJcbiAgICAgIDwvVG9vbHRpcEVsZW1lbnQ+XHJcbiAgICAgIHtzZWxsZXJQcm9kdWN0RWRpdGFibGUgJiYgPHNtYWxsIGNsYXNzTmFtZT0nZC1ibG9jayc+e29wdGlvbkNvc3R9PC9zbWFsbD59XHJcbiAgICA8L2Rpdj5cclxuICApO1xyXG59XHJcblxyXG5leHBvcnQgZGVmYXVsdCBWYXJpYXRpb25PcHRpb25Db2xvdXI7XHJcbiJdLCJtYXBwaW5ncyI6IkFBQUEsWUFBWTs7QUFDWixPQUFPLEtBQUtBLEtBQUssTUFBTSxPQUFPO0FBQzlCLE9BQU9DLGNBQWMsTUFBTSxrQkFBa0I7QUFDN0MsU0FBU0MsOEJBQThCLFFBQVEsU0FBUztBQUN4RCxPQUFPQyxvQkFBb0IsTUFBTSw4QkFBOEI7QUFDL0QsU0FBU0Msb0JBQW9CLFFBQVEsc0NBQXNDO0FBQUMsU0FBQUMsR0FBQSxJQUFBQyxJQUFBLEVBQUFDLElBQUEsSUFBQUMsS0FBQTtBQVM1RSxTQUFTQyxxQkFBcUJBLENBQUFDLElBQUEsRUFLcEI7RUFBQSxJQUpSQyxPQUFPLEdBQUFELElBQUEsQ0FBUEMsT0FBTztJQUNQQyxTQUFTLEdBQUFGLElBQUEsQ0FBVEUsU0FBUztJQUNUQyxNQUFNLEdBQUFILElBQUEsQ0FBTkcsTUFBTTtJQUNOQyxxQkFBcUIsR0FBQUosSUFBQSxDQUFyQkkscUJBQXFCO0VBRXJCLElBQUFDLHFCQUFBLEdBR0lYLG9CQUFvQixDQUFDLENBQUM7SUFGeEJZLHFCQUFxQixHQUFBRCxxQkFBQSxDQUFyQkMscUJBQXFCO0lBQ3JCQyw4QkFBOEIsR0FBQUYscUJBQUEsQ0FBOUJFLDhCQUE4QjtFQUVoQyxJQUFRQyxTQUFTLEdBQWdETCxNQUFNLENBQS9ESyxTQUFTO0lBQVVDLEtBQUssR0FBaUNOLE1BQU0sQ0FBcERPLE1BQU07SUFBU0MsU0FBUyxHQUFzQlIsTUFBTSxDQUFyQ1EsU0FBUztJQUFFQyxRQUFRLEdBQVlULE1BQU0sQ0FBMUJTLFFBQVE7SUFBRUMsS0FBSyxHQUFLVixNQUFNLENBQWhCVSxLQUFLO0VBQzVELElBQU1DLFFBQVEsR0FBR04sU0FBUyxJQUFJRyxTQUFTO0VBQ3ZDLElBQU1JLFVBQVUsR0FBR3ZCLDhCQUE4QixDQUFDVyxNQUFNLENBQUM7RUFDekQsb0JBQ0VMLEtBQUE7SUFDRWtCLFNBQVMsRUFBRVQsOEJBQStCO0lBQzFDVSxPQUFPLEVBQUVILFFBQVEsR0FBR2IsT0FBTyxHQUFHaUIsU0FBVTtJQUFBQyxRQUFBLGdCQUV4Q3ZCLElBQUE7TUFDRW9CLFNBQVMsS0FBQUksTUFBQSxDQUFLZCxxQkFBcUIsT0FBQWMsTUFBQSxDQUFJbEIsU0FBUyxHQUFHLGVBQWUsR0FBRyxFQUFFLE9BQUFrQixNQUFBLENBQUlOLFFBQVEsR0FBRyxnQkFBZ0IsR0FBRyxxQkFBcUIsQ0FBRztNQUNqSU8sS0FBSyxFQUFFO1FBQUVDLGVBQWUsRUFBRWI7TUFBTSxDQUFFO01BQUFVLFFBQUEsZUFFbEN2QixJQUFBLENBQUNILG9CQUFvQjtRQUFDUyxTQUFTLEVBQUVBLFNBQVU7UUFBQ3FCLE9BQU8sRUFBRSxDQUFDVDtNQUFTLENBQUU7SUFBQyxDQUMvRCxDQUFDLGVBQ05sQixJQUFBLENBQUNMLGNBQWM7TUFDYmlDLEVBQUUsc0JBQUFKLE1BQUEsQ0FBc0JSLFFBQVEsYUFBVztNQUMzQ2EsT0FBTyxLQUFBTCxNQUFBLENBQUtQLEtBQUssRUFBQU8sTUFBQSxDQUFHLENBQUNULFNBQVMsR0FBRyxhQUFhLEdBQUcsQ0FBQ0gsU0FBUyxHQUFHLHVCQUF1QixHQUFHLEVBQUUsQ0FBRztNQUFBVyxRQUFBLGVBRTdGdkIsSUFBQTtRQUFHb0IsU0FBUyxFQUFDLDRDQUE0QztRQUFBRyxRQUFBLEVBQUVOO01BQUssQ0FBSTtJQUFDLENBQ3ZELENBQUMsRUFDaEJULHFCQUFxQixpQkFBSVIsSUFBQTtNQUFPb0IsU0FBUyxFQUFDLFNBQVM7TUFBQUcsUUFBQSxFQUFFSjtJQUFVLENBQVEsQ0FBQztFQUFBLENBQ3RFLENBQUM7QUFFVjtBQUVBLGVBQWVoQixxQkFBcUIiLCJpZ25vcmVMaXN0IjpbXX0=