ordering-ui-admin-external 1.11.1 → 1.12.0

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductOptionExternalId = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _styles = require("./styles");
+var _styles2 = require("../../../styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var ProductOptionExternalId = function ProductOptionExternalId(props) {
+  var value = props.value,
+    handleChange = props.handleChange,
+    handleUpdate = props.handleUpdate;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.FormControl, null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "externalId"
+  }, t('EXTERNAL_ID', 'External Id')), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
+    defaultValue: value || '',
+    placeholder: t('EXTERNAL_ID', 'External Id'),
+    onChange: function onChange(e) {
+      return handleChange(e.target.value);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Button, {
+    color: "primary",
+    borderRadius: "8px",
+    onClick: handleUpdate
+  }, t('UPDATE', 'Update')));
+};
+exports.ProductOptionExternalId = ProductOptionExternalId;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormControl = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  button {\n    height: 44px;\n    text-transform: lowercase;\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n"])));
+exports.Container = Container;
+var FormControl = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 25px;\n  label {\n    margin-bottom: 10px;\n  }\n  input {\n    height: 44px;\n    width: 100%;\n  }\n"])));
+exports.FormControl = FormControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "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.11.1",
+    "ordering-components-admin-external": "1.12.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Delivery/DriversGroupDeliveryDetails/index.js

@@ -8,7 +8,7 @@ import { Button } from '../../../styles'
 import { Alert } from '../../Shared'
 
 import {
-  Container,
+  Container
 } from './styles'
 
 const DriverGroupDeliveryDetailsUI = (props) => {

package/src/components/Delivery/DriversGroupDeliveryZoneInformation/index.js

@@ -213,17 +213,19 @@ export const DriverGroupDeliveryZoneInformation = (props) => {
                 name='distance'
                 maxLength={2}
                 value={formState.changes?.data?.distance ?? zone?.data?.distance ?? ''}
-                onInput={(e) => {
-                  e.target.value = e.target.value.match('^[1-9]{1,2}$')
-                }}
                 onChange={e => handleChangeInput(e, configState?.configs?.distance_unit?.value)}
                 ref={register({
                   required: t('DISTANCE_FROM_STORE', 'Distance from store')
                 })}
+                onKeyPress={(e) => {
+                  if (!/^[0-9]$/.test(e.key)) {
+                    e.preventDefault()
+                  }
+                }}
               />
             </FormControl>
           </Row>}
-        {zoneType !== 4 && isShowMap && (
+        {zoneType !== 4 && zoneType !== 5 && isShowMap && (
           configState?.configs?.google_maps_api_key?.value ? (
             <WrapperMap>
               <button
@@ -254,7 +256,7 @@ export const DriverGroupDeliveryZoneInformation = (props) => {
             <ErrorText>{t('REQUIRED_GOOGLE_MAP_API_KEY', 'Google Maps api key is required')}</ErrorText>
           )
         )}
-        {!zone && (
+        {!zone && zoneType !== 5 && (
           <KmlButtonWrapper>
             <Button
               color='primary'

package/src/components/Delivery/DriversGroupDeliveryZoneList/index.js

@@ -65,7 +65,7 @@ export const DriverGroupDeliveryZoneList = (props) => {
               </InfoBlock>
             </DeliveryZonesTableWrapper>
           ))
-        ) :
+        ) : (
           <DeliveryZonesTable>
             <thead>
               <tr>
@@ -106,7 +106,7 @@ export const DriverGroupDeliveryZoneList = (props) => {
               </ZoneTbody>
             ))}
           </DeliveryZonesTable>
-        }
+        )}
         <AddDeliveryZoneButton
           onClick={(e) => handleOpenZone(e, null)}
         >

package/src/components/Delivery/DriversGroupDetails/index.js

@@ -73,7 +73,7 @@ const DriversGroupDetailsUI = (props) => {
           { key: 'logs', value: t('LOGS', 'Logs') }
         ]
     setDriversGroupMenus(_driversGroupMenus)
-  }, [useAdvanced])
+  }, [useAdvanced, driversGroupState?.driversGroup])
 
   const onDeleteGroup = () => {
     setConfirm({

package/src/components/Delivery/DriversGroupDetails/styles.js

@@ -28,6 +28,7 @@ export const Header = styled.div`
       font-size: 20px;
       font-weight: 700;
       margin: 0px;
+      flex: 1;
     }
   
     label {

package/src/components/Delivery/DriversGroupGeneralForm/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useConfig } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, useSession } from 'ordering-components-admin-external'
 import { useForm } from 'react-hook-form'
 import { Input, Checkbox, Button, SecondSelect as DefaultSelect } from '../../../styles'
 import { Alert } from '../../Shared'
@@ -31,6 +31,7 @@ export const DriversGroupGeneralForm = (props) => {
   const { handleSubmit, register, errors } = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [configState] = useConfig()
+  const [{ user }] = useSession()
 
   const autoAssignType = configState?.configs?.autoassign_type?.value
 
@@ -75,7 +76,7 @@ export const DriversGroupGeneralForm = (props) => {
       }
       handleUpdateDriversGroup(changesState)
     } else {
-      if (!changesState?.administrator_id) {
+      if (user?.level !== 5 && !changesState?.administrator_id) {
         setAlertState({
           open: true,
           content: [t('VALIDATION_ERROR_REQUIRED', 'The manager is required.').replace('_attribute_', t('DRIVER_MANAGER', 'Driver manager'))]
@@ -142,17 +143,19 @@ export const DriversGroupGeneralForm = (props) => {
           autoComplete='off'
         />
       </InputWrapper>
-      <InputWrapper>
-        <label>{t('DRIVER_MANAGER', 'Driver manager')}</label>
-        <DefaultSelect
-          isSecondIcon
-          placeholder={t('SELECT_MANAGER', 'Select driver manager')}
-          options={driversManagersOptions}
-          defaultValue={changesState?.administrator_id ?? driversGroupState.driversGroup?.administrator_id}
-          optionInnerMaxHeight='60vh'
-          onChange={val => handleChangesState({ administrator_id: val })}
-        />
-      </InputWrapper>
+      {user?.level !== 5 && (
+        <InputWrapper>
+          <label>{t('DRIVER_MANAGER', 'Driver manager')}</label>
+          <DefaultSelect
+            isSecondIcon
+            placeholder={t('SELECT_MANAGER', 'Select driver manager')}
+            options={driversManagersOptions}
+            defaultValue={changesState?.administrator_id ?? driversGroupState.driversGroup?.administrator_id}
+            optionInnerMaxHeight='60vh'
+            onChange={val => handleChangesState({ administrator_id: val })}
+          />
+        </InputWrapper>
+      )}
       <InputWrapper>
         <label>{t('TYPE', 'Type')}</label>
         <DefaultSelect

package/src/components/Marketing/EnterprisePromotionGeneralDetails/index.js

@@ -125,8 +125,8 @@ export const EnterprisePromotionGeneralDetails = (props) => {
 
   const handleChangeDates = (item) => {
     handleChangeItem({
-      start: moment(item.selection.startDate).format('YYYY-MM-DD'),
-      end: item.selection.endDate ? moment(item.selection.endDate).format('YYYY-MM-DD') : null
+      start: moment(item.selection.startDate).format('YYYY-MM-DD 00:00:00'),
+      end: item.selection.endDate ? moment(item.selection.endDate).format('YYYY-MM-DD 23:59:59') : null
     })
     setDateRange([item.selection])
   }

package/src/components/Shared/Confirm/index.js

@@ -45,7 +45,17 @@ const ConfirmUI = (props) => {
         {content && typeof content === 'object' && Array.isArray(content) && (
           <ul>
             {content.map((item, i) => (
-              <li key={i}>{t(item.toUpperCase(), errors[item])}</li>
+              <React.Fragment key={i}>
+                {Array.isArray(item) ? (
+                  item.map((err, index) => (
+                    typeof err === 'string' && (
+                      <li key={index}>{t(err.toUpperCase(), errors[err] || err)}</li>
+                    )
+                  ))
+                ) : (
+                  typeof item === 'string' && <li>{t(item.toUpperCase(), errors[item] || item)}</li>
+                )}
+              </React.Fragment>
             ))}
           </ul>
         )}

package/src/components/SidebarMenu/index.js

@@ -19,7 +19,6 @@ import {
   Cart3,
   Cash,
   BagCheck,
-  CloudDownload,
   X as CloseIcon
 } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
@@ -73,18 +72,27 @@ const SidebarMenuUI = (props) => {
     {
       id: 2,
       title: t('DELIVERY_DASHBOARD', 'Deliveries dashboard'),
-      pageName: 'deliveries'
+      pageName: 'deliveries',
+      url: '/deliveries'
     },
     {
       id: 3,
       title: t('DRIVERS_DASHBOARD', 'Drivers Dashboard'),
-      pageName: 'drivers'
+      pageName: 'drivers',
+      url: '/drivers'
+    },
+    {
+      id: 4,
+      title: t('APPOINTMENTS', 'Appointments'),
+      pageName: 'appointments',
+      url: '/appointments'
+    },
+    {
+      id: 5,
+      title: t('GIFT_CARD_MANAGER', 'Gift card manager'),
+      pageName: 'giftCards',
+      url: '/gift-cards'
     }
-    // {
-    //   id: 4,
-    //   title: t('APPOINTMENTS', 'Appointments'),
-    //   pageName: 'appointments'
-    // }
   ]
 
   const loyaltySubMenus = [
@@ -669,7 +677,8 @@ const SidebarMenuUI = (props) => {
                         eventKey='8'
                         active={
                           location.pathname === '/marketing/promotions-enterprise' ||
-                          location.pathname === '/marketing/campaign'
+                          location.pathname === '/marketing/campaign' ||
+                          location.pathname === '/marketing/ad-banners'
                         }
                       >
                         <GraphUp />
@@ -794,6 +803,7 @@ const SidebarMenuUI = (props) => {
                         active={
                           location.pathname === '/settings/basic' ||
                           location.pathname === '/settings/operation' ||
+                          location.pathname === '/settings/plugin' ||
                           location.pathname === '/settings/pages' ||
                           location.pathname === '/settings/integrations' ||
                           location.pathname === '/settings/places' ||

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

@@ -30,7 +30,8 @@ const BusinessDeliveryZoneDetailsUI = (props) => {
     handleAddBusinessDeliveryZone,
     handleDeleteBusinessDeliveryZone,
     kmlData,
-    handleUploadKmlFiles
+    handleUploadKmlFiles,
+    handleSuccessUpdate
   } = props
 
   const theme = useTheme()
@@ -106,7 +107,7 @@ const BusinessDeliveryZoneDetailsUI = (props) => {
           <BusinessDeliveryZoneShare
             business={business}
             zone={zoneState.zone}
-            handleUpdateBusinessDeliveryZone={handleUpdateBusinessDeliveryZone}
+            handleSuccessUpdate={handleSuccessUpdate}
           />
         )}
       </Container>

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

@@ -37,6 +37,11 @@ const BusinessWalletsListUI = (props) => {
     wallet_credit_point_enabled: isWalletPointsEnabled && loyaltyPlanState.created
   }
 
+  const walletsLangs = {
+    wallet_cash_enabled: t('WALLET_CASH_ENABLED', 'Wallet cash enabled'),
+    wallet_credit_point_enabled: t('WALLET_CREDIT_POINT_ENABLED', 'Wallet credit point enabled')
+  }
+
   const handleOpenWallet = (config) => {
     setIsOpenWalletDetails(true)
     handleClosePaymethodDetails()
@@ -83,7 +88,7 @@ const BusinessWalletsListUI = (props) => {
                   active={config.id === currentConfig?.id}
                   onClick={() => handleOpenWallet(config)}
                 >
-                  <WalletName>{config.name}</WalletName>
+                  <WalletName>{walletsLangs[config.key]}</WalletName>
                   <ChevronRight />
                 </WalletOption>
               ))}

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

@@ -21,6 +21,7 @@ import {
 import { useForm, Controller } from 'react-hook-form'
 import { ProductExtraSuboption } from '../ProductExtraSuboption'
 import { ProductExtraOptionForm } from '../ProductExtraOptionForm'
+import { ProductOptionExternalId } from '../ProductOptionExternalId'
 
 import {
   MainContainer,
@@ -87,6 +88,7 @@ const ProductExtraOptionDetailsUI = (props) => {
   const [selectedSubOptionId, setSelectedSubOptionId] = useState(null)
   const { handleSubmit, register, errors, control, setValue } = useForm()
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+  const [externalId, setExternalId] = useState()
 
   const handleClickSubOptionImage = (id) => {
     document.getElementById(id).click()
@@ -149,6 +151,11 @@ const ProductExtraOptionDetailsUI = (props) => {
     }
   }
 
+  const handleUpdateExternalId = () => {
+    handleUpdateOption({ external_id: externalId })
+    setOpenModal({ ...openModal, externalId: false })
+  }
+
   useEffect(() => {
     if (Object.keys(errors).length > 0) {
       setAlertState({
@@ -158,6 +165,10 @@ const ProductExtraOptionDetailsUI = (props) => {
     }
   }, [errors])
 
+  useEffect(() => {
+    setExternalId(optionState?.option?.external_id)
+  }, [optionState?.option?.external_id])
+
   return (
     <MainContainer>
       <Header>
@@ -174,6 +185,11 @@ const ProductExtraOptionDetailsUI = (props) => {
             >
               {t('CUSTOM_FIELDS', 'Custom Fields')}
             </Dropdown.Item>
+            <Dropdown.Item
+              onClick={() => setOpenModal({ ...openModal, externalId: true })}
+            >
+              {t('EXTERNAL_ID', 'External ID')}
+            </Dropdown.Item>
             <Dropdown.Item
               onClick={() => handleDeleteOption()}
             >
@@ -446,6 +462,18 @@ const ProductExtraOptionDetailsUI = (props) => {
           />
         </Modal>
       )}
+      <Modal
+        width='70%'
+        title={t('PRODUCT_SUBOPTION', 'Product suboption')}
+        open={openModal?.externalId}
+        onClose={() => setOpenModal({ ...openModal, externalId: false })}
+      >
+        <ProductOptionExternalId
+          value={externalId}
+          handleChange={setExternalId}
+          handleUpdate={handleUpdateExternalId}
+        />
+      </Modal>
       <Modal
         width='700px'
         height='80vh'

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

@@ -13,6 +13,7 @@ import { Alert, Confirm, Modal, ImageCrop } from '../../Shared'
 import { IconButton } from '../../../styles'
 import { ProductExtraMetaFields } from '../ProductExtraMetaFields'
 import { ProductExtraOptionDetails } from '../ProductExtraOptionDetails'
+import { ProductOptionExternalId } from '../ProductOptionExternalId'
 
 import {
   MainContainer,
@@ -59,7 +60,8 @@ const ProductExtraOptionsUI = (props) => {
     handleDragStart,
     hanldeDragOver,
     handleDrop,
-    handleDragEnd
+    handleDragEnd,
+    handleUpdateExtraState
   } = props
 
   const theme = useTheme()
@@ -76,6 +78,7 @@ const ProductExtraOptionsUI = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isMaxError, setIsMaxError] = useState(false)
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+  const [externalId, setExternalId] = useState()
 
   const closeAlert = () => {
     setAlertState({
@@ -182,6 +185,11 @@ const ProductExtraOptionsUI = (props) => {
     setTimer(_timer)
   }
 
+  const handleUpdateExternalId = () => {
+    handleUpdateExtraState(extraState.extra?.id, { external_id: externalId })
+    setOpenModal({ ...openModal, externalId: false })
+  }
+
   useEffect(() => {
     if (!addChangesState?.name && addChangesState?.min === 1 && addChangesState?.max === 1) {
       setValue('name', addChangesState?.name || '')
@@ -194,6 +202,10 @@ const ProductExtraOptionsUI = (props) => {
     setExtraName(extraState.extra?.name)
   }, [extraState.extra?.name])
 
+  useEffect(() => {
+    setExternalId(extraState?.extra?.external_id)
+  }, [extraState?.extra?.external_id])
+
   return (
     <MainContainer id='extra_options'>
       <OptionsContainer>
@@ -217,6 +229,11 @@ const ProductExtraOptionsUI = (props) => {
                 >
                   {t('CUSTOM_FIELDS', 'Custom Fields')}
                 </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setOpenModal({ ...openModal, externalId: true })}
+                >
+                  {t('EXTERNAL_ID', 'External ID')}
+                </Dropdown.Item>
                 <Dropdown.Item
                   onClick={() => handleDeleteExtraClick()}
                 >
@@ -418,6 +435,18 @@ const ProductExtraOptionsUI = (props) => {
           extraId={extraState.extra.id}
         />
       </Modal>
+      <Modal
+        width='70%'
+        title={t('PRODUCT_EXTRA', 'Product extra')}
+        open={openModal?.externalId}
+        onClose={() => setOpenModal({ ...openModal, externalId: false })}
+      >
+        <ProductOptionExternalId
+          value={externalId}
+          handleChange={setExternalId}
+          handleUpdate={handleUpdateExternalId}
+        />
+      </Modal>
       <Modal
         width='700px'
         height='80vh'

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

@@ -21,6 +21,7 @@ import {
   ActionSelectorWrapper,
   DragImageWrapper
 } from './styles'
+import { ProductOptionExternalId } from '../ProductOptionExternalId'
 
 export const ProductExtraSuboption = (props) => {
   const {
@@ -54,6 +55,8 @@ export const ProductExtraSuboption = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
   const [formState, setFormState] = useState({ })
+  const [externalIdOpen, setExternalIdOpen] = useState(false)
+  const [externalId, setExternalId] = useState()
 
   const handleClickSubOptionImage = (id) => {
     document.getElementById(id).click()
@@ -119,6 +122,14 @@ export const ProductExtraSuboption = (props) => {
     })
   }
 
+  const handleUpdateExternalId = () => {
+    handleUpdateSubOption({
+      id: subOption.id,
+      external_id: externalId
+    })
+    setExternalIdOpen(false)
+  }
+
   useEffect(() => {
     if (Object.keys(errors).length > 0) {
       setAlertState({
@@ -137,6 +148,10 @@ export const ProductExtraSuboption = (props) => {
     setTimer(_timer)
   }, [formState])
 
+  useEffect(() => {
+    setExternalId(subOption?.external_id)
+  }, [subOption?.external_id])
+
   return (
     <SubOptionContainer
       onSubmit={handleSubmit(onSubmit)}
@@ -311,6 +326,11 @@ export const ProductExtraSuboption = (props) => {
               >
                 {t('CUSTOM_FIELDS', 'Custom fields')}
               </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => setExternalIdOpen(true)}
+              >
+                {t('EXTERNAL_ID', 'External ID')}
+              </Dropdown.Item>
               <Dropdown.Item onClick={() => handleDeteteClick(subOption.id)}>{t('DELETE', 'Delete')}</Dropdown.Item>
             </DropdownButton>
           </ActionSelectorWrapper>
@@ -352,6 +372,18 @@ export const ProductExtraSuboption = (props) => {
           handleChangePhoto={handleChangePhoto}
         />
       </Modal>
+      <Modal
+        width='70%'
+        title={t('MODIFIER_OPTION', 'Modifier option')}
+        open={externalIdOpen}
+        onClose={() => setExternalIdOpen(false)}
+      >
+        <ProductOptionExternalId
+          value={externalId}
+          handleChange={setExternalId}
+          handleUpdate={handleUpdateExternalId}
+        />
+      </Modal>
     </SubOptionContainer>
   )
 }

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

@@ -39,7 +39,8 @@ const ProductExtrasUI = (props) => {
     handleDragStart,
     hanldeDragOver,
     handleDrop,
-    handleDragEnd
+    handleDragEnd,
+    handleUpdateExtraState
   } = props
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -195,6 +196,7 @@ const ProductExtrasUI = (props) => {
               extra={currentExtra}
               handleChangeExtraName={handleChangeExtraInput}
               handleUpdateBusinessState={handleUpdateBusinessState}
+              handleUpdateExtraState={handleUpdateExtraState}
             />
           )}
         </>
@@ -214,6 +216,7 @@ const ProductExtrasUI = (props) => {
                 extra={currentExtra}
                 handleChangeExtraName={handleChangeExtraInput}
                 handleUpdateBusinessState={handleUpdateBusinessState}
+                handleUpdateExtraState={handleUpdateExtraState}
               />
             </Modal>
           )}

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Container, FormControl } from './styles'
+import { Button, Input } from '../../../styles'
+
+export const ProductOptionExternalId = (props) => {
+  const { value, handleChange, handleUpdate } = props
+  const [, t] = useLanguage()
+
+  return (
+    <Container>
+      <FormControl>
+        <label htmlFor='externalId'>{t('EXTERNAL_ID', 'External Id')}</label>
+        <Input
+          defaultValue={value || ''}
+          placeholder={t('EXTERNAL_ID', 'External Id')}
+          onChange={(e) => handleChange(e.target.value)}
+        />
+      </FormControl>
+      <Button
+        color='primary'
+        borderRadius='8px'
+        onClick={handleUpdate}
+      >
+        {t('UPDATE', 'Update')}
+      </Button>
+    </Container>
+  )
+}

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  button {
+    height: 44px;
+    text-transform: lowercase;
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+`
+
+export const FormControl = styled.div`
+  margin-bottom: 25px;
+  label {
+    margin-bottom: 10px;
+  }
+  input {
+    height: 44px;
+    width: 100%;
+  }
+`