merchi_product_form/lib/components/VariationOptionImage.js

A React component for Merchi product forms

'use client';

import * as React from 'react';
import TooltipElement from './TooltipElement';
import { optionImageUrl, 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 VariationOptionImage(_ref) {
  var doClick = _ref.doClick,
    isChecked = _ref.isChecked,
    option = _ref.option,
    sellerProductEditable = _ref.sellerProductEditable;
  var _useMerchiFormContext = useMerchiFormContext(),
    classNameOptionImage = _useMerchiFormContext.classNameOptionImage,
    classNameOptionImageContainer = _useMerchiFormContext.classNameOptionImageContainer;
  var available = option.available,
    isVisible = option.isVisible,
    optionId = option.optionId;
  var isActive = available && isVisible;
  var containerClass = "merchi-embed-form_image-select-option-item ".concat(isChecked ? 'image-checked' : '', " ").concat(isActive ? 'cursor-pointer' : 'option-no-inventory');
  var optionCost = variationFieldOptionCostDetail(option);
  var tooltip = "".concat(option.value).concat(!isVisible ? ' - disabled' : !available ? ' - insufficient stock' : '');
  return /*#__PURE__*/_jsx("div", {
    className: classNameOptionImageContainer,
    onClick: isActive ? doClick : undefined,
    children: /*#__PURE__*/_jsxs("div", {
      className: containerClass,
      children: [/*#__PURE__*/_jsx(IconCheckedOrNoStock, {
        isChecked: isChecked,
        noStock: !isActive
      }), /*#__PURE__*/_jsx("span", {
        className: classNameOptionImage,
        style: {
          backgroundImage: "url(".concat(optionImageUrl(option), ")")
        }
      }), /*#__PURE__*/_jsx(TooltipElement, {
        id: "merchi-image-option-tooltip-".concat(optionId),
        tooltip: tooltip,
        children: /*#__PURE__*/_jsx("div", {
          className: "image-select-title",
          children: option.value
        })
      }), sellerProductEditable && /*#__PURE__*/_jsx("small", {
        className: "d-block",
        children: optionCost
      })]
    })
  });
}
export default VariationOptionImage;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlRvb2x0aXBFbGVtZW50Iiwib3B0aW9uSW1hZ2VVcmwiLCJ2YXJpYXRpb25GaWVsZE9wdGlvbkNvc3REZXRhaWwiLCJJY29uQ2hlY2tlZE9yTm9TdG9jayIsInVzZU1lcmNoaUZvcm1Db250ZXh0IiwianN4IiwiX2pzeCIsImpzeHMiLCJfanN4cyIsIlZhcmlhdGlvbk9wdGlvbkltYWdlIiwiX3JlZiIsImRvQ2xpY2siLCJpc0NoZWNrZWQiLCJvcHRpb24iLCJzZWxsZXJQcm9kdWN0RWRpdGFibGUiLCJfdXNlTWVyY2hpRm9ybUNvbnRleHQiLCJjbGFzc05hbWVPcHRpb25JbWFnZSIsImNsYXNzTmFtZU9wdGlvbkltYWdlQ29udGFpbmVyIiwiYXZhaWxhYmxlIiwiaXNWaXNpYmxlIiwib3B0aW9uSWQiLCJpc0FjdGl2ZSIsImNvbnRhaW5lckNsYXNzIiwiY29uY2F0Iiwib3B0aW9uQ29zdCIsInRvb2x0aXAiLCJ2YWx1ZSIsImNsYXNzTmFtZSIsIm9uQ2xpY2siLCJ1bmRlZmluZWQiLCJjaGlsZHJlbiIsIm5vU3RvY2siLCJzdHlsZSIsImJhY2tncm91bmRJbWFnZSIsImlkIl0sInNvdXJjZXMiOlsiLi4vLi4vc3JjL2NvbXBvbmVudHMvVmFyaWF0aW9uT3B0aW9uSW1hZ2UudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50JztcclxuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgVG9vbHRpcEVsZW1lbnQgZnJvbSAnLi9Ub29sdGlwRWxlbWVudCc7XHJcbmltcG9ydCB7IG9wdGlvbkltYWdlVXJsLCB2YXJpYXRpb25GaWVsZE9wdGlvbkNvc3REZXRhaWwgfSBmcm9tICcuL3V0aWxzJztcclxuaW1wb3J0IEljb25DaGVja2VkT3JOb1N0b2NrIGZyb20gJy4vaWNvbnMvSWNvbkNoZWNrZWRPck5vU3RvY2snO1xyXG5pbXBvcnQgeyB1c2VNZXJjaGlGb3JtQ29udGV4dCB9IGZyb20gJy4uL2NvbnRleHQvTWVyY2hpUHJvZHVjdEZvcm1Qcm92aWRlcic7XHJcblxyXG5pbnRlcmZhY2UgUHJvcHMge1xyXG4gIGRvQ2xpY2s6ICgpID0+IHZvaWQ7XHJcbiAgaXNDaGVja2VkOiBib29sZWFuO1xyXG4gIG9wdGlvbjogYW55O1xyXG4gIHNlbGxlclByb2R1Y3RFZGl0YWJsZT86IGJvb2xlYW47XHJcbn1cclxuXHJcbmZ1bmN0aW9uIFZhcmlhdGlvbk9wdGlvbkltYWdlKHtcclxuICBkb0NsaWNrLFxyXG4gIGlzQ2hlY2tlZCxcclxuICBvcHRpb24sXHJcbiAgc2VsbGVyUHJvZHVjdEVkaXRhYmxlLFxyXG59OiBQcm9wcykge1xyXG4gIGNvbnN0IHtcclxuICAgIGNsYXNzTmFtZU9wdGlvbkltYWdlLFxyXG4gICAgY2xhc3NOYW1lT3B0aW9uSW1hZ2VDb250YWluZXIsXHJcbiAgfSA9IHVzZU1lcmNoaUZvcm1Db250ZXh0KCk7XHJcbiAgY29uc3QgeyBhdmFpbGFibGUsIGlzVmlzaWJsZSwgb3B0aW9uSWQgfSA9IG9wdGlvbjtcclxuICBjb25zdCBpc0FjdGl2ZSA9IGF2YWlsYWJsZSAmJiBpc1Zpc2libGU7XHJcbiAgY29uc3QgY29udGFpbmVyQ2xhc3MgPSBgbWVyY2hpLWVtYmVkLWZvcm1faW1hZ2Utc2VsZWN0LW9wdGlvbi1pdGVtICR7XHJcbiAgICBpc0NoZWNrZWQgPyAnaW1hZ2UtY2hlY2tlZCcgOiAnJ1xyXG4gIH0gJHtpc0FjdGl2ZSA/ICdjdXJzb3ItcG9pbnRlcicgOiAnb3B0aW9uLW5vLWludmVudG9yeSd9YDtcclxuICBjb25zdCBvcHRpb25Db3N0ID0gdmFyaWF0aW9uRmllbGRPcHRpb25Db3N0RGV0YWlsKG9wdGlvbik7XHJcbiAgY29uc3QgdG9vbHRpcCA9IGAke29wdGlvbi52YWx1ZX0keyFpc1Zpc2libGUgPyAnIC0gZGlzYWJsZWQnIDogIWF2YWlsYWJsZSA/ICcgLSBpbnN1ZmZpY2llbnQgc3RvY2snIDogJyd9YDtcclxuICByZXR1cm4gKFxyXG4gICAgPGRpdlxyXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZU9wdGlvbkltYWdlQ29udGFpbmVyfVxyXG4gICAgICBvbkNsaWNrPXtpc0FjdGl2ZSA/IGRvQ2xpY2sgOiB1bmRlZmluZWR9XHJcbiAgICA+XHJcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtjb250YWluZXJDbGFzc30+XHJcbiAgICAgICAgPEljb25DaGVja2VkT3JOb1N0b2NrIGlzQ2hlY2tlZD17aXNDaGVja2VkfSBub1N0b2NrPXshaXNBY3RpdmV9IC8+XHJcbiAgICAgICAgPHNwYW5cclxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lT3B0aW9uSW1hZ2V9XHJcbiAgICAgICAgICBzdHlsZT17e1xyXG4gICAgICAgICAgICBiYWNrZ3JvdW5kSW1hZ2U6IGB1cmwoJHtvcHRpb25JbWFnZVVybChvcHRpb24pfSlgLFxyXG4gICAgICAgICAgfX1cclxuICAgICAgICAvPlxyXG4gICAgICAgIDxUb29sdGlwRWxlbWVudFxyXG4gICAgICAgICAgaWQ9e2BtZXJjaGktaW1hZ2Utb3B0aW9uLXRvb2x0aXAtJHtvcHRpb25JZH1gfVxyXG4gICAgICAgICAgdG9vbHRpcD17dG9vbHRpcH1cclxuICAgICAgICA+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0naW1hZ2Utc2VsZWN0LXRpdGxlJz57b3B0aW9uLnZhbHVlfTwvZGl2PlxyXG4gICAgICAgIDwvVG9vbHRpcEVsZW1lbnQ+XHJcbiAgICAgICAge3NlbGxlclByb2R1Y3RFZGl0YWJsZSAmJiAoXHJcbiAgICAgICAgICA8c21hbGwgY2xhc3NOYW1lPSdkLWJsb2NrJz57b3B0aW9uQ29zdH08L3NtYWxsPlxyXG4gICAgICAgICl9XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgKTtcclxufVxyXG5cclxuZXhwb3J0IGRlZmF1bHQgVmFyaWF0aW9uT3B0aW9uSW1hZ2U7XHJcbiJdLCJtYXBwaW5ncyI6IkFBQUEsWUFBWTs7QUFDWixPQUFPLEtBQUtBLEtBQUssTUFBTSxPQUFPO0FBQzlCLE9BQU9DLGNBQWMsTUFBTSxrQkFBa0I7QUFDN0MsU0FBU0MsY0FBYyxFQUFFQyw4QkFBOEIsUUFBUSxTQUFTO0FBQ3hFLE9BQU9DLG9CQUFvQixNQUFNLDhCQUE4QjtBQUMvRCxTQUFTQyxvQkFBb0IsUUFBUSxzQ0FBc0M7QUFBQyxTQUFBQyxHQUFBLElBQUFDLElBQUEsRUFBQUMsSUFBQSxJQUFBQyxLQUFBO0FBUzVFLFNBQVNDLG9CQUFvQkEsQ0FBQUMsSUFBQSxFQUtuQjtFQUFBLElBSlJDLE9BQU8sR0FBQUQsSUFBQSxDQUFQQyxPQUFPO0lBQ1BDLFNBQVMsR0FBQUYsSUFBQSxDQUFURSxTQUFTO0lBQ1RDLE1BQU0sR0FBQUgsSUFBQSxDQUFORyxNQUFNO0lBQ05DLHFCQUFxQixHQUFBSixJQUFBLENBQXJCSSxxQkFBcUI7RUFFckIsSUFBQUMscUJBQUEsR0FHSVgsb0JBQW9CLENBQUMsQ0FBQztJQUZ4Qlksb0JBQW9CLEdBQUFELHFCQUFBLENBQXBCQyxvQkFBb0I7SUFDcEJDLDZCQUE2QixHQUFBRixxQkFBQSxDQUE3QkUsNkJBQTZCO0VBRS9CLElBQVFDLFNBQVMsR0FBMEJMLE1BQU0sQ0FBekNLLFNBQVM7SUFBRUMsU0FBUyxHQUFlTixNQUFNLENBQTlCTSxTQUFTO0lBQUVDLFFBQVEsR0FBS1AsTUFBTSxDQUFuQk8sUUFBUTtFQUN0QyxJQUFNQyxRQUFRLEdBQUdILFNBQVMsSUFBSUMsU0FBUztFQUN2QyxJQUFNRyxjQUFjLGlEQUFBQyxNQUFBLENBQ2xCWCxTQUFTLEdBQUcsZUFBZSxHQUFHLEVBQUUsT0FBQVcsTUFBQSxDQUM5QkYsUUFBUSxHQUFHLGdCQUFnQixHQUFHLHFCQUFxQixDQUFFO0VBQ3pELElBQU1HLFVBQVUsR0FBR3RCLDhCQUE4QixDQUFDVyxNQUFNLENBQUM7RUFDekQsSUFBTVksT0FBTyxNQUFBRixNQUFBLENBQU1WLE1BQU0sQ0FBQ2EsS0FBSyxFQUFBSCxNQUFBLENBQUcsQ0FBQ0osU0FBUyxHQUFHLGFBQWEsR0FBRyxDQUFDRCxTQUFTLEdBQUcsdUJBQXVCLEdBQUcsRUFBRSxDQUFFO0VBQzFHLG9CQUNFWixJQUFBO0lBQ0VxQixTQUFTLEVBQUVWLDZCQUE4QjtJQUN6Q1csT0FBTyxFQUFFUCxRQUFRLEdBQUdWLE9BQU8sR0FBR2tCLFNBQVU7SUFBQUMsUUFBQSxlQUV4Q3RCLEtBQUE7TUFBS21CLFNBQVMsRUFBRUwsY0FBZTtNQUFBUSxRQUFBLGdCQUM3QnhCLElBQUEsQ0FBQ0gsb0JBQW9CO1FBQUNTLFNBQVMsRUFBRUEsU0FBVTtRQUFDbUIsT0FBTyxFQUFFLENBQUNWO01BQVMsQ0FBRSxDQUFDLGVBQ2xFZixJQUFBO1FBQ0VxQixTQUFTLEVBQUVYLG9CQUFxQjtRQUNoQ2dCLEtBQUssRUFBRTtVQUNMQyxlQUFlLFNBQUFWLE1BQUEsQ0FBU3RCLGNBQWMsQ0FBQ1ksTUFBTSxDQUFDO1FBQ2hEO01BQUUsQ0FDSCxDQUFDLGVBQ0ZQLElBQUEsQ0FBQ04sY0FBYztRQUNia0MsRUFBRSxpQ0FBQVgsTUFBQSxDQUFpQ0gsUUFBUSxDQUFHO1FBQzlDSyxPQUFPLEVBQUVBLE9BQVE7UUFBQUssUUFBQSxlQUVqQnhCLElBQUE7VUFBS3FCLFNBQVMsRUFBQyxvQkFBb0I7VUFBQUcsUUFBQSxFQUFFakIsTUFBTSxDQUFDYTtRQUFLLENBQU07TUFBQyxDQUMxQyxDQUFDLEVBQ2hCWixxQkFBcUIsaUJBQ3BCUixJQUFBO1FBQU9xQixTQUFTLEVBQUMsU0FBUztRQUFBRyxRQUFBLEVBQUVOO01BQVUsQ0FBUSxDQUMvQztJQUFBLENBQ0U7RUFBQyxDQUNILENBQUM7QUFFVjtBQUVBLGVBQWVmLG9CQUFvQiIsImlnbm9yZUxpc3QiOltdfQ==