ordering-ui-admin-external 1.43.62 → 1.43.63

package/_modules/components/Stores/BusinessDeliveryPickupMore/index.js

@@ -59,7 +59,8 @@ var BusinessDeliveryPickupMore = exports.BusinessDeliveryPickupMore = function B
   };
   (0, _react.useEffect)(function () {
     var tab = query.get('tab');
-    if (tab) {
+    var tabs = ['delivery', 'pickup', 'driver_delivery_group', 'advanced_eta'];
+    if (tab && tabs.includes(tab)) {
       handleTabClick(tab, true);
     } else {
       handleTabClick('delivery');

package/_modules/components/Stores/BusinessDetail/index.js

@@ -60,7 +60,8 @@ var BusinessDetail = exports.BusinessDetail = function BusinessDetail(props) {
   }, [selectedInfoItem]);
   (0, _react.useEffect)(function () {
     var tab = query.get('tab');
-    if (tab) {
+    var tabs = ['information', 'owner', 'categories', 'location', 'images', 'videos', 'seo_options'];
+    if (tab && tabs.includes(tab)) {
       setSelctedInfoItem(tab);
     } else {
       handleSelectInfoItem('information');

package/_modules/components/Stores/BusinessOrderingChannels/index.js

@@ -95,7 +95,8 @@ var BusinessOrderingChannels = exports.BusinessOrderingChannels = function Busin
   }, [business]);
   (0, _react.useEffect)(function () {
     var tab = query.get('tab');
-    if (tab) {
+    var tabs = ['custom_slug', 'widgets'];
+    if (tab && tabs.includes(tab)) {
       handleChangeOption(tab, true);
     } else {
       handleChangeOption('custom_slug');

package/_modules/components/Stores/ProductDesktopPreview/index.js

@@ -10,8 +10,6 @@ var _orderingComponentsAdminExternal = require("ordering-components-admin-extern
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styledComponents = require("styled-components");
 var _styles = require("../../../styles");
-var _MdRadioButtonChecked = _interopRequireDefault(require("@meronex/icons/md/MdRadioButtonChecked"));
-var _MdRadioButtonUnchecked = _interopRequireDefault(require("@meronex/icons/md/MdRadioButtonUnchecked"));
 var _BsDashCircle = _interopRequireDefault(require("@meronex/icons/bs/BsDashCircle"));
 var _BsPlusCircle = _interopRequireDefault(require("@meronex/icons/bs/BsPlusCircle"));
 var _BsCircleHalf = _interopRequireDefault(require("@meronex/icons/bs/BsCircleHalf"));
@@ -35,7 +33,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 _swiper.default.use([_swiper.Navigation, _swiper.Thumbs]);
 var ProductDesktopPreview = exports.ProductDesktopPreview = function ProductDesktopPreview(props) {
-  var _product$product, _product$product2, _theme$defaultLanguag, _product$ingredients, _product$extras, _product$ingredients2, _product$extras2, _product$ingredients3, _theme$defaultLanguag2, _product$extras3;
+  var _product$product, _product$product2, _theme$defaultLanguag, _product$ingredients, _product$extras, _product$ingredients2, _product$extras2, _product$ingredients3, _theme$defaultLanguag2, _product$extras3, _productCart$quantity;
   var product = props.product,
     productCart = props.productCart,
     showProductOption = props.showProductOption,
@@ -238,15 +236,19 @@ var ProductDesktopPreview = exports.ProductDesktopPreview = function ProductDesk
         var _productCart$options;
         var currentState = ((_productCart$options = productCart.options["id:".concat(option === null || option === void 0 ? void 0 : option.id)]) === null || _productCart$options === void 0 ? void 0 : _productCart$options.suboptions["id:".concat(suboption === null || suboption === void 0 ? void 0 : suboption.id)]) || {};
         var price = option !== null && option !== void 0 && option.with_half_option && suboption !== null && suboption !== void 0 && suboption.half_price && currentState.position !== 'whole' ? suboption === null || suboption === void 0 ? void 0 : suboption.half_price : suboption === null || suboption === void 0 ? void 0 : suboption.price;
+        var inputId = "".concat(suboption.id);
         return suboption !== null && suboption !== void 0 && suboption.enabled ? /*#__PURE__*/_react.default.createElement(_styles2.ProductSuboptionContainer, {
           key: suboption === null || suboption === void 0 ? void 0 : suboption.id
         }, /*#__PURE__*/_react.default.createElement(_styles2.IconControl, null, (option === null || option === void 0 ? void 0 : option.min) === 0 && (option === null || option === void 0 ? void 0 : option.max) === 1 || (option === null || option === void 0 ? void 0 : option.max) > 1 ? /*#__PURE__*/_react.default.createElement(_styles.Checkbox, {
+          id: inputId,
           defaultChecked: currentState === null || currentState === void 0 ? void 0 : currentState.selected
-        }) : currentState !== null && currentState !== void 0 && currentState.selected ? /*#__PURE__*/_react.default.createElement(_MdRadioButtonChecked.default, null) : /*#__PURE__*/_react.default.createElement(_MdRadioButtonUnchecked.default, {
-          disabled: true
+        }) : /*#__PURE__*/_react.default.createElement(_styles.RadioButton, {
+          id: inputId
         })), suboption.image && suboption.image !== '-' && /*#__PURE__*/_react.default.createElement(_styles2.SubOptionThumbnail, {
           src: suboption.image
-        }), /*#__PURE__*/_react.default.createElement(_styles2.SuoptionText, null, /*#__PURE__*/_react.default.createElement("div", null, suboption === null || suboption === void 0 ? void 0 : suboption.name)), (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && /*#__PURE__*/_react.default.createElement(_styles2.QuantityControl, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, null), currentState.quantity, /*#__PURE__*/_react.default.createElement(_BsPlusCircle.default, null)), (option === null || option === void 0 ? void 0 : option.with_half_option) && /*#__PURE__*/_react.default.createElement(_styles2.PositionControl, null, /*#__PURE__*/_react.default.createElement(_BsCircleHalf.default, {
+        }), /*#__PURE__*/_react.default.createElement(_styles2.SuoptionText, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+          htmlFor: inputId
+        }, suboption === null || suboption === void 0 ? void 0 : suboption.name))), (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && /*#__PURE__*/_react.default.createElement(_styles2.QuantityControl, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, null), currentState.quantity || 1, /*#__PURE__*/_react.default.createElement(_BsPlusCircle.default, null)), (option === null || option === void 0 ? void 0 : option.with_half_option) && /*#__PURE__*/_react.default.createElement(_styles2.PositionControl, null, /*#__PURE__*/_react.default.createElement(_BsCircleHalf.default, {
           className: ['reverse', currentState.selected && currentState.position === 'left' ? 'selected' : null].filter(function (classname) {
             return classname;
           }).join(' ')
@@ -273,7 +275,7 @@ var ProductDesktopPreview = exports.ProductDesktopPreview = function ProductDesk
     className: "incdec-control"
   }, /*#__PURE__*/_react.default.createElement(_FiMinusCircle.default, {
     className: "".concat(productCart.quantity === 1 || isSoldOut ? 'disabled' : '')
-  }), /*#__PURE__*/_react.default.createElement("span", null, productCart.quantity), /*#__PURE__*/_react.default.createElement(_FiPlusCircle.default, {
+  }), /*#__PURE__*/_react.default.createElement("span", null, (_productCart$quantity = productCart.quantity) !== null && _productCart$quantity !== void 0 ? _productCart$quantity : 1), /*#__PURE__*/_react.default.createElement(_FiPlusCircle.default, {
     className: "".concat(isSoldOut ? 'disabled' : '')
   })), productCart && !isSoldOut && /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "primary",

package/_modules/components/Stores/ProductDesktopPreview/styles.js

@@ -26,7 +26,7 @@ var DesktopBackground = exports.DesktopBackground = _styledComponents.default.di
     return props.theme.colors.gray;
   });
 });
-var ProductInfoModalPreview = exports.ProductInfoModalPreview = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  max-width: 500px;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  position: relative;\n  \n  ", "\n\n  ", "\n"])), function (_ref3) {
+var ProductInfoModalPreview = exports.ProductInfoModalPreview = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  max-width: 500px;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  position: relative;\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
   var isMobileView = _ref3.isMobileView;
   return !isMobileView && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background: ", ";\n  "])), function (props) {
     return props.theme.colors.backgroundPage;
@@ -109,7 +109,7 @@ var OptionWrapHeader = exports.OptionWrapHeader = _styledComponents.default.div(
   var _props$theme$colors2;
   return ((_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.backgroundPage) || '#FFF';
 });
-var OptionTitleContainer = exports.OptionTitleContainer = _styledComponents.default.div(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  margin: 0px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 70%;\n  display: flex;\n  align-items: center;  \n\n  *:first-child {\n    margin-right: 8px;\n  }\n"])));
+var OptionTitleContainer = exports.OptionTitleContainer = _styledComponents.default.div(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  margin: 0px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 70%;\n  display: flex;\n  align-items: center;\n\n  *:first-child {\n    margin-right: 8px;\n  }\n"])));
 var OptionTitle = exports.OptionTitle = _styledComponents.default.h3(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n\n  span {\n    &:not(:first-child) {\n      color: ", ";\n      font-size: 12px;\n      font-weight: 400;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.grayTextColor;
 });
@@ -130,11 +130,11 @@ var SubOptionThumbnail = exports.SubOptionThumbnail = _styledComponents.default.
   var src = _ref12.src;
   return src;
 });
-var SuoptionText = exports.SuoptionText = _styledComponents.default.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  display: flex;\n  font-weight: 300;\n  color: #555;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0 5px;\n  font-size: 12px;\n\n  div {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  span {\n    margin-left: 10px;\n    font-weight: 500;\n    color: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    ", "\n  }\n"])), function (props) {
+var SuoptionText = exports.SuoptionText = _styledComponents.default.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  display: flex;\n  font-weight: 300;\n  color: #555;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0 5px;\n  font-size: 12px;\n\n  div {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  span {\n    margin-left: 10px;\n    font-weight: 500;\n    color: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    ", "\n  }\n  label {\n    margin: 0;\n  }\n"])), function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme4;
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 10px;    \n    "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 10px;\n    "])));
 });
 var QuantityControl = exports.QuantityControl = _styledComponents.default.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n  display: flex;\n  color: #555;\n  align-items: center;\n  font-weight: 300;\n  font-size: 12px;\n  margin: 0 5px;\n\n  svg {\n    color: ", ";\n    font-size: 16px;\n    margin-right: 3px;\n    ", "\n  }\n\n  svg[disabled] {\n    color: #CBCBCB;\n  }\n\n  svg:last-child {\n    margin-left: 3px;\n    margin-right: 0;\n    ", "\n  }\n"])), function (props) {
   return props.theme.colors.primary;

package/_modules/components/Stores/ProductSummary/index.js

@@ -43,7 +43,8 @@ var ProductSummary = exports.ProductSummary = function ProductSummary(props) {
     showProductOption = props.showProductOption,
     isExpand = props.isExpand,
     setIsExpand = props.setIsExpand,
-    handleDuplicateProduct = props.handleDuplicateProduct;
+    handleDuplicateProduct = props.handleDuplicateProduct,
+    getProduct = props.getProduct;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -234,7 +235,13 @@ var ProductSummary = exports.ProductSummary = function ProductSummary(props) {
       setIsProductPreview(false);
       setSelectedView('desktop');
     }
-  }, /*#__PURE__*/_react.default.createElement(_styles2.ProductPreviewHeader, null, /*#__PURE__*/_react.default.createElement("h1", null, t('PREVIEW', 'Preview')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_styles2.ProductPreviewHeader, null, /*#__PURE__*/_react.default.createElement("h1", null, t('PREVIEW', 'Preview')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "primary",
+    borderRadius: "7.6px",
+    onClick: function onClick() {
+      return getProduct();
+    }
+  }, t('RELOAD', 'Reload')), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: selectedView === 'desktop' ? 'primary' : 'black',
     onClick: function onClick() {
       return setSelectedView('desktop');

package/_modules/styles/Checkbox/index.js

@@ -4,9 +4,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Checkbox = void 0;
+exports.RadioButton = exports.Checkbox = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -23,4 +23,18 @@ var Checkbox = exports.Checkbox = _styledComponents.default.input.attrs({
 }, function (props) {
   var _props$theme2;
   return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      right: 7px;\n    "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      left: 7px;\n    "])));
+});
+var RadioButton = exports.RadioButton = _styledComponents.default.input.attrs({
+  type: 'checkbox'
+})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: pointer;\n  width: 18px;\n  height: 18px;\n  border: none;\n  appearance: none;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 18px;\n    top: 0;\n    left: 0;\n    border: 1px solid #B1BCCC;\n    border-radius: 50%;\n    background: ", ";\n  }\n\n  &:checked:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 18px;\n    top: 0;\n    ", "\n    background-color: ", ";\n    border: none;\n  }\n\n  &:checked:after {\n    content: \"\";\n    display: block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: white;\n    position: absolute;\n    top: 5.2px;\n    ", "\n  }\n"])), function (props) {
+  var _props$theme$colors2;
+  return ((_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.backgroundPage) || '#FFF';
+}, function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      right: 0;\n    "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      left: 0;\n    "])));
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  var _props$theme4;
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      right: 5.1px;\n    "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      left: 5.1px;\n    "])));
 });

package/_modules/styles/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "MultiSelect", {
     return _MultiSelect.MultiSelect;
   }
 });
+Object.defineProperty(exports, "RadioButton", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.RadioButton;
+  }
+});
 Object.defineProperty(exports, "SecondSelect", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.43.62",
+  "version": "1.43.63",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.43.39",
+    "ordering-components-admin-external": "1.43.40",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Stores/BusinessDeliveryPickupMore/index.js

@@ -43,7 +43,8 @@ export const BusinessDeliveryPickupMore = (props) => {
 
   useEffect(() => {
     const tab = query.get('tab')
-    if (tab) {
+    const tabs = ['delivery', 'pickup', 'driver_delivery_group', 'advanced_eta']
+    if (tab && tabs.includes(tab)) {
       handleTabClick(tab, true)
     } else {
       handleTabClick('delivery')

package/src/components/Stores/BusinessDetail/index.js

@@ -49,7 +49,8 @@ export const BusinessDetail = (props) => {
 
   useEffect(() => {
     const tab = query.get('tab')
-    if (tab) {
+    const tabs = ['information', 'owner', 'categories', 'location', 'images', 'videos', 'seo_options']
+    if (tab && tabs.includes(tab)) {
       setSelctedInfoItem(tab)
     } else {
       handleSelectInfoItem('information')

package/src/components/Stores/BusinessOrderingChannels/index.js

@@ -76,7 +76,8 @@ export const BusinessOrderingChannels = (props) => {
 
   useEffect(() => {
     const tab = query.get('tab')
-    if (tab) {
+    const tabs = ['custom_slug', 'widgets']
+    if (tab && tabs.includes(tab)) {
       handleChangeOption(tab, true)
     } else {
       handleChangeOption('custom_slug')

package/src/components/Stores/ProductDesktopPreview/index.js

@@ -2,9 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useLanguage, useUtils } from 'ordering-components-admin-external'
 import { XLg } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
-import { Checkbox, TextArea, Button } from '../../../styles'
-import MdRadioButtonChecked from '@meronex/icons/md/MdRadioButtonChecked'
-import MdRadioButtonUnchecked from '@meronex/icons/md/MdRadioButtonUnchecked'
+import { Checkbox, TextArea, Button, RadioButton } from '../../../styles'
 import BsDashCircle from '@meronex/icons/bs/BsDashCircle'
 import BsPlusCircle from '@meronex/icons/bs/BsPlusCircle'
 import BsCircleHalf from '@meronex/icons/bs/BsCircleHalf'
@@ -311,31 +309,28 @@ export const ProductDesktopPreview = (props) => {
                                       option.suboptions.map(suboption => {
                                         const currentState = productCart.options[`id:${option?.id}`]?.suboptions[`id:${suboption?.id}`] || {}
                                         const price = option?.with_half_option && suboption?.half_price && currentState.position !== 'whole' ? suboption?.half_price : suboption?.price
+                                        const inputId = `${suboption.id}`
                                         return suboption?.enabled ? (
                                           <ProductSuboptionContainer
                                             key={suboption?.id}
                                           >
                                             <IconControl>
                                               {((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
-                                                <Checkbox defaultChecked={currentState?.selected} />
+                                                <Checkbox id={inputId} defaultChecked={currentState?.selected} />
                                               ) : (
-                                                currentState?.selected ? (
-                                                  <MdRadioButtonChecked />
-                                                ) : (
-                                                  <MdRadioButtonUnchecked disabled />
-                                                )
+                                                <RadioButton id={inputId} />
                                               )}
                                             </IconControl>
                                             {suboption.image && suboption.image !== '-' && (
                                               <SubOptionThumbnail src={suboption.image} />
                                             )}
                                             <SuoptionText>
-                                              <div>{suboption?.name}</div>
+                                              <div><label htmlFor={inputId}>{suboption?.name}</label></div>
                                             </SuoptionText>
                                             {option?.allow_suboption_quantity && (
                                               <QuantityControl>
                                                 <BsDashCircle />
-                                                {currentState.quantity}
+                                                {currentState.quantity || 1}
                                                 <BsPlusCircle />
                                               </QuantityControl>
                                             )}
@@ -388,7 +383,7 @@ export const ProductDesktopPreview = (props) => {
                       <FiMinusCircle
                         className={`${productCart.quantity === 1 || isSoldOut ? 'disabled' : ''}`}
                       />
-                      <span>{productCart.quantity}</span>
+                      <span>{productCart.quantity ?? 1}</span>
                       <FiPlusCircle
                         className={`${isSoldOut ? 'disabled' : ''}`}
                       />

package/src/components/Stores/ProductDesktopPreview/styles.js

@@ -38,7 +38,7 @@ export const ProductInfoModalPreview = styled.div`
   height: 100%;
   border-radius: 8px;
   position: relative;
-  
+
   ${({ isMobileView }) => !isMobileView && css`
     background: ${props => props.theme.colors.backgroundPage};
   `}
@@ -314,7 +314,7 @@ export const OptionTitleContainer = styled.div`
   white-space: nowrap;
   width: 70%;
   display: flex;
-  align-items: center;  
+  align-items: center;
 
   *:first-child {
     margin-right: 8px;
@@ -434,9 +434,12 @@ export const SuoptionText = styled.div`
     text-overflow: ellipsis;
     ${props => props.theme?.rtl && css`
       margin-left: 0;
-      margin-right: 10px;    
+      margin-right: 10px;
     `}
   }
+  label {
+    margin: 0;
+  }
 `
 
 export const QuantityControl = styled.div`

package/src/components/Stores/ProductSummary/index.js

@@ -4,7 +4,7 @@ import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
 import BiImage from '@meronex/icons/bi/BiImage'
 import { XLg, ThreeDots, Laptop, Phone, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { Switch } from '../../../styles/Switch'
-import { IconButton } from '../../../styles'
+import { IconButton, Button } from '../../../styles'
 import { DropdownButton, Dropdown } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { Confirm, Modal, ProgressRing } from '../../Shared'
@@ -45,7 +45,8 @@ export const ProductSummary = (props) => {
     showProductOption,
     isExpand,
     setIsExpand,
-    handleDuplicateProduct
+    handleDuplicateProduct,
+    getProduct
   } = props
 
   const [, t] = useLanguage()
@@ -318,6 +319,13 @@ export const ProductSummary = (props) => {
         <ProductPreviewHeader>
           <h1>{t('PREVIEW', 'Preview')}</h1>
           <div>
+            <Button
+              color='primary'
+              borderRadius='7.6px'
+              onClick={() => getProduct()}
+            >
+              {t('RELOAD', 'Reload')}
+            </Button>
             <IconButton
               color={selectedView === 'desktop' ? 'primary' : 'black'}
               onClick={() => setSelectedView('desktop')}

package/src/styles/Checkbox/index.js

@@ -54,3 +54,56 @@ export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
     `}
   }
 `
+export const RadioButton = styled.input.attrs({ type: 'checkbox' })`
+  position: relative;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  border: none;
+  appearance: none;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    top: 0;
+    left: 0;
+    border: 1px solid #B1BCCC;
+    border-radius: 50%;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  }
+
+  &:checked:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    top: 0;
+    ${props => props.theme?.rtl ? css`
+      right: 0;
+    ` : css`
+      left: 0;
+    `}
+    background-color: ${props => props.theme.colors.primary};
+    border: none;
+  }
+
+  &:checked:after {
+    content: "";
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: white;
+    position: absolute;
+    top: 5.2px;
+    ${props => props.theme?.rtl ? css`
+      right: 5.1px;
+    ` : css`
+      left: 5.1px;
+    `}
+  }
+`

package/src/styles/index.js

@@ -1,5 +1,5 @@
 import { Button, IconButton, LinkButton } from './Buttons'
-import { Checkbox } from './Checkbox'
+import { Checkbox, RadioButton } from './Checkbox'
 import { Input, TextArea } from './Inputs'
 import { MultiSelect } from './MultiSelect'
 import { Select as SecondSelect } from './Select'
@@ -12,6 +12,7 @@ export {
   IconButton,
   LinkButton,
   Checkbox,
+  RadioButton,
   Input,
   MultiSelect,
   Switch,