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 InputHiddenStatic from './InputHiddenStatic';
import VariationFieldOptionDefaultInputs from './VariationFieldOptionDefaultInputs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var defaultOptionImage = require('../images/product-not-found.png')["default"];
function VariationOptionImage(_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(),
    classNameOptionImage = _useMerchiFormContext.classNameOptionImage,
    classNameOptionImageContainer = _useMerchiFormContext.classNameOptionImageContainer;
  var containerClass = "merchi-embed-form_image-select-option-item ".concat(isChecked ? 'image-checked' : '', " ").concat(isAvailable ? 'cursor-pointer' : 'option-no-inventory');
  var optionCost = variationFieldOptionCostDetail(option);
  var tooltip = String(option.value) + "".concat(!isAvailable ? ' - insufficient stock' : '');
  return /*#__PURE__*/_jsx("div", {
    className: classNameOptionImageContainer,
    onClick: isAvailable ? doClick : undefined,
    children: /*#__PURE__*/_jsxs("div", {
      className: containerClass,
      children: [/*#__PURE__*/_jsx(IconCheckedOrNoStock, {
        isChecked: isChecked,
        noStock: !isAvailable
      }), /*#__PURE__*/_jsx("span", {
        className: classNameOptionImage,
        style: {
          backgroundImage: "url(".concat(optionImageUrl(option), ")")
        }
      }), /*#__PURE__*/_jsx(TooltipElement, {
        id: "merchi-image-option-tooltip-".concat(option.id),
        tooltip: tooltip,
        children: /*#__PURE__*/_jsx("div", {
          className: "image-select-title",
          children: option.value
        })
      }), sellerProductEditable && /*#__PURE__*/_jsx("small", {
        className: "d-block",
        children: optionCost
      }), /*#__PURE__*/_jsx(InputHiddenStatic, {
        name: "".concat(name, ".linkedFile.viewUrl"),
        value: option.linkedFile && option.linkedFile.viewUrl ? option.linkedFile.viewUrl : defaultOptionImage.src
      }), /*#__PURE__*/_jsx(VariationFieldOptionDefaultInputs, {
        optionName: name,
        option: option
      })]
    })
  });
}
export default VariationOptionImage;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlRvb2x0aXBFbGVtZW50Iiwib3B0aW9uSW1hZ2VVcmwiLCJ2YXJpYXRpb25GaWVsZE9wdGlvbkNvc3REZXRhaWwiLCJJY29uQ2hlY2tlZE9yTm9TdG9jayIsInVzZU1lcmNoaUZvcm1Db250ZXh0IiwiSW5wdXRIaWRkZW5TdGF0aWMiLCJWYXJpYXRpb25GaWVsZE9wdGlvbkRlZmF1bHRJbnB1dHMiLCJqc3giLCJfanN4IiwianN4cyIsIl9qc3hzIiwiZGVmYXVsdE9wdGlvbkltYWdlIiwicmVxdWlyZSIsIlZhcmlhdGlvbk9wdGlvbkltYWdlIiwiX3JlZiIsImRvQ2xpY2siLCJfcmVmJGlzQXZhaWxhYmxlIiwiaXNBdmFpbGFibGUiLCJpc0NoZWNrZWQiLCJuYW1lIiwib3B0aW9uIiwic2VsbGVyUHJvZHVjdEVkaXRhYmxlIiwiX3VzZU1lcmNoaUZvcm1Db250ZXh0IiwiY2xhc3NOYW1lT3B0aW9uSW1hZ2UiLCJjbGFzc05hbWVPcHRpb25JbWFnZUNvbnRhaW5lciIsImNvbnRhaW5lckNsYXNzIiwiY29uY2F0Iiwib3B0aW9uQ29zdCIsInRvb2x0aXAiLCJTdHJpbmciLCJ2YWx1ZSIsImNsYXNzTmFtZSIsIm9uQ2xpY2siLCJ1bmRlZmluZWQiLCJjaGlsZHJlbiIsIm5vU3RvY2siLCJzdHlsZSIsImJhY2tncm91bmRJbWFnZSIsImlkIiwibGlua2VkRmlsZSIsInZpZXdVcmwiLCJzcmMiLCJvcHRpb25OYW1lIl0sInNvdXJjZXMiOlsiLi4vLi4vc3JjL2NvbXBvbmVudHMvVmFyaWF0aW9uT3B0aW9uSW1hZ2UudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBUb29sdGlwRWxlbWVudCBmcm9tICcuL1Rvb2x0aXBFbGVtZW50JztcbmltcG9ydCB7IG9wdGlvbkltYWdlVXJsLCB2YXJpYXRpb25GaWVsZE9wdGlvbkNvc3REZXRhaWwgfSBmcm9tICcuL3V0aWxzJztcbmltcG9ydCBJY29uQ2hlY2tlZE9yTm9TdG9jayBmcm9tICcuL2ljb25zL0ljb25DaGVja2VkT3JOb1N0b2NrJztcbmltcG9ydCB7IHVzZU1lcmNoaUZvcm1Db250ZXh0IH0gZnJvbSAnLi4vY29udGV4dC9NZXJjaGlQcm9kdWN0Rm9ybVByb3ZpZGVyJztcbmltcG9ydCBJbnB1dEhpZGRlblN0YXRpYyBmcm9tICcuL0lucHV0SGlkZGVuU3RhdGljJztcbmltcG9ydCBWYXJpYXRpb25GaWVsZE9wdGlvbkRlZmF1bHRJbnB1dHMgZnJvbSAnLi9WYXJpYXRpb25GaWVsZE9wdGlvbkRlZmF1bHRJbnB1dHMnO1xuXG5jb25zdCBkZWZhdWx0T3B0aW9uSW1hZ2UgPSByZXF1aXJlKCcuLi9pbWFnZXMvcHJvZHVjdC1ub3QtZm91bmQucG5nJykuZGVmYXVsdDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgZG9DbGljazogKCkgPT4gdm9pZDtcbiAgaXNBdmFpbGFibGU6IGJvb2xlYW47XG4gIGlzQ2hlY2tlZDogYm9vbGVhbjtcbiAgbmFtZTogc3RyaW5nO1xuICBvcHRpb246IGFueTtcbiAgc2VsbGVyUHJvZHVjdEVkaXRhYmxlPzogYm9vbGVhbjtcbn1cblxuZnVuY3Rpb24gVmFyaWF0aW9uT3B0aW9uSW1hZ2Uoe1xuICBkb0NsaWNrLFxuICBpc0F2YWlsYWJsZSA9IHRydWUsXG4gIGlzQ2hlY2tlZCxcbiAgbmFtZSxcbiAgb3B0aW9uLFxuICBzZWxsZXJQcm9kdWN0RWRpdGFibGUsXG59OiBQcm9wcykge1xuICBjb25zdCB7XG4gICAgY2xhc3NOYW1lT3B0aW9uSW1hZ2UsXG4gICAgY2xhc3NOYW1lT3B0aW9uSW1hZ2VDb250YWluZXIsXG4gIH0gPSB1c2VNZXJjaGlGb3JtQ29udGV4dCgpO1xuICBjb25zdCBjb250YWluZXJDbGFzcyA9IGBtZXJjaGktZW1iZWQtZm9ybV9pbWFnZS1zZWxlY3Qtb3B0aW9uLWl0ZW0gJHtcbiAgICBpc0NoZWNrZWQgPyAnaW1hZ2UtY2hlY2tlZCcgOiAnJ1xuICB9ICR7aXNBdmFpbGFibGUgPyAnY3Vyc29yLXBvaW50ZXInIDogJ29wdGlvbi1uby1pbnZlbnRvcnknfWA7XG4gIGNvbnN0IG9wdGlvbkNvc3QgPSB2YXJpYXRpb25GaWVsZE9wdGlvbkNvc3REZXRhaWwob3B0aW9uKTtcbiAgY29uc3QgdG9vbHRpcCA9XG4gICAgU3RyaW5nKG9wdGlvbi52YWx1ZSkgKyBgJHshaXNBdmFpbGFibGUgPyAnIC0gaW5zdWZmaWNpZW50IHN0b2NrJyA6ICcnfWA7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVPcHRpb25JbWFnZUNvbnRhaW5lcn1cbiAgICAgIG9uQ2xpY2s9e2lzQXZhaWxhYmxlID8gZG9DbGljayA6IHVuZGVmaW5lZH1cbiAgICA+XG4gICAgICA8ZGl2IGNsYXNzTmFtZT17Y29udGFpbmVyQ2xhc3N9PlxuICAgICAgICA8SWNvbkNoZWNrZWRPck5vU3RvY2sgaXNDaGVja2VkPXtpc0NoZWNrZWR9IG5vU3RvY2s9eyFpc0F2YWlsYWJsZX0gLz5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZU9wdGlvbkltYWdlfVxuICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kSW1hZ2U6IGB1cmwoJHtvcHRpb25JbWFnZVVybChvcHRpb24pfSlgLFxuICAgICAgICAgIH19XG4gICAgICAgIC8+XG4gICAgICAgIDxUb29sdGlwRWxlbWVudFxuICAgICAgICAgIGlkPXtgbWVyY2hpLWltYWdlLW9wdGlvbi10b29sdGlwLSR7b3B0aW9uLmlkfWB9XG4gICAgICAgICAgdG9vbHRpcD17dG9vbHRpcH1cbiAgICAgICAgPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSdpbWFnZS1zZWxlY3QtdGl0bGUnPntvcHRpb24udmFsdWV9PC9kaXY+XG4gICAgICAgIDwvVG9vbHRpcEVsZW1lbnQ+XG4gICAgICAgIHtzZWxsZXJQcm9kdWN0RWRpdGFibGUgJiYgKFxuICAgICAgICAgIDxzbWFsbCBjbGFzc05hbWU9J2QtYmxvY2snPntvcHRpb25Db3N0fTwvc21hbGw+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEhpZGRlblN0YXRpY1xuICAgICAgICAgIG5hbWU9e2Ake25hbWV9LmxpbmtlZEZpbGUudmlld1VybGB9XG4gICAgICAgICAgdmFsdWU9e1xuICAgICAgICAgICAgb3B0aW9uLmxpbmtlZEZpbGUgJiYgb3B0aW9uLmxpbmtlZEZpbGUudmlld1VybFxuICAgICAgICAgICAgICA/IG9wdGlvbi5saW5rZWRGaWxlLnZpZXdVcmxcbiAgICAgICAgICAgICAgOiBkZWZhdWx0T3B0aW9uSW1hZ2Uuc3JjXG4gICAgICAgICAgfVxuICAgICAgICAvPlxuICAgICAgICA8VmFyaWF0aW9uRmllbGRPcHRpb25EZWZhdWx0SW5wdXRzIG9wdGlvbk5hbWU9e25hbWV9IG9wdGlvbj17b3B0aW9ufSAvPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFZhcmlhdGlvbk9wdGlvbkltYWdlO1xuIl0sIm1hcHBpbmdzIjoiQUFBQSxZQUFZOztBQUNaLE9BQU8sS0FBS0EsS0FBSyxNQUFNLE9BQU87QUFDOUIsT0FBT0MsY0FBYyxNQUFNLGtCQUFrQjtBQUM3QyxTQUFTQyxjQUFjLEVBQUVDLDhCQUE4QixRQUFRLFNBQVM7QUFDeEUsT0FBT0Msb0JBQW9CLE1BQU0sOEJBQThCO0FBQy9ELFNBQVNDLG9CQUFvQixRQUFRLHNDQUFzQztBQUMzRSxPQUFPQyxpQkFBaUIsTUFBTSxxQkFBcUI7QUFDbkQsT0FBT0MsaUNBQWlDLE1BQU0scUNBQXFDO0FBQUMsU0FBQUMsR0FBQSxJQUFBQyxJQUFBO0FBQUEsU0FBQUMsSUFBQSxJQUFBQyxLQUFBO0FBRXBGLElBQU1DLGtCQUFrQixHQUFHQyxPQUFPLENBQUMsaUNBQWlDLENBQUMsV0FBUTtBQVc3RSxTQUFTQyxvQkFBb0JBLENBQUFDLElBQUEsRUFPbkI7RUFBQSxJQU5SQyxPQUFPLEdBQUFELElB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