ordering-ui-admin-external 1.26.1 → 1.27.1

package/_modules/components/Settings/IntegrationListing/index.js

@@ -256,11 +256,19 @@ var IntegrationListing = function IntegrationListing(props) {
     style: {
       order: selectedTab === 5 ? 1 : selectedTab
     }
-  }, /*#__PURE__*/_react.default.createElement(_PaymentGateway.PaymentGateway, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_PaymentGateway.PaymentGateway, {
+    showOption: showOption,
+    setShowOption: setShowOption,
+    handleCloseSettings: handleCloseSettings,
+    handleOpenBasicSetting: handleOpenSetting
+  })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       order: selectedTab === 6 ? 1 : selectedTab
     }
-  }, /*#__PURE__*/_react.default.createElement(_Analytics.Analytics, null)))), showOption === 'plugins' && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+  }, /*#__PURE__*/_react.default.createElement(_Analytics.Analytics, {
+    showOption: showOption,
+    setShowOption: setShowOption
+  })))), showOption === 'plugins' && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
     sidebarId: "plugins-integrations",
     defaultSideBarWidth: 600,
     open: showOption === 'plugins',

package/_modules/components/Settings/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ApiKeysList", {
     return _ApiKeysList.ApiKeysList;
   }
 });
+Object.defineProperty(exports, "BacCredomatic", {
+  enumerable: true,
+  get: function get() {
+    return _BacCredomatic.BacCredomatic;
+  }
+});
 Object.defineProperty(exports, "CardFieldsSetting", {
   enumerable: true,
   get: function get() {
@@ -218,6 +224,7 @@ var _NotificationSetting = require("./NotificationSetting");
 var _SettingsSelectUI = require("./SettingsSelectUI");
 var _SettingsCountryFilter = require("./SettingsCountryFilter");
 var _ApiKeysList = require("./ApiKeysList");
+var _BacCredomatic = require("./BacCredomatic");
 var _WebhookList = require("./WebhookList");
 var _PluginList = require("./PluginList");
 var _WebhookDelaySelector = require("./WebhookDelaySelector");

package/_modules/components/Shared/ImageCrop/index.js

@@ -13,6 +13,8 @@ var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styledComponents = require("styled-components");
 require("cropperjs/dist/cropper.css");
 var _styles2 = require("./styles");
+var _Checkbox = require("../../../styles/Checkbox");
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -157,7 +159,11 @@ var ImageCrop = function ImageCrop(props) {
     }
     setCropper(_cropper);
   }, [photo, aspectRatio]);
-  return /*#__PURE__*/_react.default.createElement(_styles2.Container, null, /*#__PURE__*/_react.default.createElement(_styles2.ImageCropWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+  return /*#__PURE__*/_react.default.createElement(_styles2.Container, null, loading ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    style: {
+      height: 400
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_styles2.ImageCropWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
     ref: cropperRef,
     src: photo
   })), /*#__PURE__*/_react.default.createElement(_styles2.ImageCropActionWrapper, null, /*#__PURE__*/_react.default.createElement(_styles2.RangeWrapper, null, /*#__PURE__*/_react.default.createElement("span", {

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

@@ -74,7 +74,7 @@ var BusinessQRCodeOption = function BusinessQRCodeOption(props) {
       return;
     }
     var storeUrl = siteState !== null && siteState !== void 0 && (_siteState$site = siteState.site) !== null && _siteState$site !== void 0 && _siteState$site.domain && (siteState === null || siteState === void 0 ? void 0 : (_siteState$site2 = siteState.site) === null || _siteState$site2 === void 0 ? void 0 : _siteState$site2.ssl_process_status) === 'ended' ? "https://".concat(siteState === null || siteState === void 0 ? void 0 : (_siteState$site3 = siteState.site) === null || _siteState$site3 === void 0 ? void 0 : _siteState$site3.domain, "/store/").concat(business === null || business === void 0 ? void 0 : business.slug) : "https://".concat(ordering.project, ".tryordering.com/store/").concat(business === null || business === void 0 ? void 0 : business.slug);
-    var tsNumber = (item === null || item === void 0 ? void 0 : item.key) !== 'pick_up' ? (item === null || item === void 0 ? void 0 : item.key) === 'eat_in' ? "&table_numer=".concat(numberRef === null || numberRef === void 0 ? void 0 : (_numberRef$current2 = numberRef.current) === null || _numberRef$current2 === void 0 ? void 0 : _numberRef$current2.value) : "&spot_numer=".concat(numberRef === null || numberRef === void 0 ? void 0 : (_numberRef$current3 = numberRef.current) === null || _numberRef$current3 === void 0 ? void 0 : _numberRef$current3.value) : '';
+    var tsNumber = (item === null || item === void 0 ? void 0 : item.key) !== 'pick_up' ? (item === null || item === void 0 ? void 0 : item.key) === 'eat_in' ? "&table_number=".concat(numberRef === null || numberRef === void 0 ? void 0 : (_numberRef$current2 = numberRef.current) === null || _numberRef$current2 === void 0 ? void 0 : _numberRef$current2.value) : "&spot_number=".concat(numberRef === null || numberRef === void 0 ? void 0 : (_numberRef$current3 = numberRef.current) === null || _numberRef$current3 === void 0 ? void 0 : _numberRef$current3.value) : '';
     var compltedUrl = "".concat(storeUrl, "?order_type=").concat(item.value).concat(tsNumber);
     setCode(compltedUrl);
   };
@@ -121,10 +121,15 @@ var BusinessQRCodeOption = function BusinessQRCodeOption(props) {
     },
     value: code,
     viewBox: "0 0 256 256"
-  })), (item === null || item === void 0 ? void 0 : item.key) === 'pick_up' ? /*#__PURE__*/_react.default.createElement("p", null, t('GENERATE_QR_CODE', 'Generate QR Code')) : /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, (item === null || item === void 0 ? void 0 : item.key) === 'eat_in' ? t('TABLE_NUMBER', 'Table number') : t('SPOT_NUMBER', 'Spot number')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
+  })), (item === null || item === void 0 ? void 0 : item.key) === 'pick_up' ? /*#__PURE__*/_react.default.createElement("h4", null, t('GENERATE_QR_CODE', 'Generate QR Code')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (item === null || item === void 0 ? void 0 : item.key) === 'eat_in' && code && /*#__PURE__*/_react.default.createElement(_styles2.TableNumberHintText, null, t('TO_GENERATE_NEW_QR_CODE_UPDATE_TABLE_NUMBER', 'To generate new QR codes, update the table number and regenerate the code.')), /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, (item === null || item === void 0 ? void 0 : item.key) === 'eat_in' ? t('TABLE_NUMBER', 'Table number') : t('SPOT_NUMBER', 'Spot number')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
     placeholder: "0",
-    ref: numberRef
-  })), /*#__PURE__*/_react.default.createElement(_styles2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    ref: numberRef,
+    onKeyPress: function onKeyPress(e) {
+      if (!/^[0-9.]$/.test(e.key)) {
+        e.preventDefault();
+      }
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_styles2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "primary",
     outline: true,
     onClick: generateQRCode

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

@@ -4,13 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QRCodeLayout = exports.Header = exports.FormControl = exports.Container = exports.CloseButton = exports.ButtonGroup = void 0;
+exports.TableNumberHintText = exports.QRCodeLayout = exports.Header = exports.FormControl = exports.Container = exports.CloseButton = exports.ButtonGroup = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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  padding: 20px;\n  overflow: auto;\n  transition: 0.3s;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  > button {\n    margin-top: 20px;\n    position: sticky;\n    top: 100%;\n    width: fit-content;\n    height: 42px;\n    margin-bottom: 20px;\n  }\n\n  @media (min-width: 1000px) {\n    width: 0;\n    ", "\n  }\n  > p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin: 0;\n  }\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  overflow: auto;\n  transition: 0.3s;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  > button {\n    margin-top: 20px;\n    position: sticky;\n    top: 100%;\n    width: fit-content;\n    height: 42px;\n    margin-bottom: 20px;\n  }\n\n  @media (min-width: 1000px) {\n    width: 0;\n    ", "\n  }\n  > h4 {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin: 0;\n  }\n"])), function (props) {
   var _props$theme;
   return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-right: 1px solid #E9ECEF;\n    "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-left: 1px solid #E9ECEF;\n    "])));
 });
@@ -36,4 +36,8 @@ var FormControl = _styledComponents.default.div(_templateObject10 || (_templateO
 });
 exports.FormControl = FormControl;
 var QRCodeLayout = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-bottom: 20px;\n"])));
-exports.QRCodeLayout = QRCodeLayout;
+exports.QRCodeLayout = QRCodeLayout;
+var TableNumberHintText = _styledComponents.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 18px;\n  margin-bottom: 15px;\n  color: ", ";\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.TableNumberHintText = TableNumberHintText;

package/index-template.js

@@ -297,7 +297,7 @@ if (!(window?.location?.hostname === 'localhost')) {
     integrations: [
       new Integrations.BrowserTracing()
     ],
-    release: process.env.npm_package_version ? 'ordering-ui-admin-release@' + process.env.npm_package_version : 'ordering-ui-admin-release@' + '1.0.1',
+    release: process.env.npm_package_version ? 'ordering-ui-admin-release@' + process.env.npm_package_version : 'ordering-ui-admin-release@' + '1.0.2',
     // Release health
     autoSessionTracking: true,
     ignoreErrors: [

package/package.json

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

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

@@ -3,10 +3,11 @@ import Skeleton from 'react-loading-skeleton'
 import { useLanguage, useCustomer } from 'ordering-components-admin-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
-import { Input, Button, Switch } from '../../../styles'
+import { Input, Button, Switch, DefaultSelect } from '../../../styles'
 import { Alert, InputPhoneNumber } from '../../Shared'
 import { sortInputFields } from '../../../utils'
 import { Eye, EyeSlash } from 'react-bootstrap-icons'
+import { timezones } from '../../../config/constants'
 
 import {
   FormInput,
@@ -14,7 +15,8 @@ import {
   SkeletonForm,
   DriverZoneRestrictionWrapper,
   WrapperPassword,
-  TogglePassword
+  TogglePassword,
+  InputWrapper
 } from './styles'
 
 export const UserFormDetailsUI = (props) => {
@@ -43,6 +45,8 @@ export const UserFormDetailsUI = (props) => {
 
   const [user, setUser] = useState(userData)
   const [passwordSee, setPasswordSee] = useState(false)
+  const [timezonesOptions, setTimezonesOptions] = useState([])
+  const [timezoneSearchValue, setTimezoneSearchValue] = useState('')
 
   useEffect(() => {
     setUser(userData)
@@ -214,6 +218,18 @@ export const UserFormDetailsUI = (props) => {
     }
   }, [user?.id])
 
+  useEffect(() => {
+    const _timezonesOptions = timezones
+      .filter(timezone => timezone.toLocaleLowerCase().includes(timezoneSearchValue.toLocaleLowerCase()))
+      .map(timezone => {
+        return {
+          value: timezone,
+          content: timezone
+        }
+      })
+    setTimezonesOptions(_timezonesOptions)
+  }, [timezoneSearchValue])
+
   return (
     <>
       <FormInput onSubmit={formMethods.handleSubmit(onSubmit)}>
@@ -257,6 +273,22 @@ export const UserFormDetailsUI = (props) => {
                 </React.Fragment>
               )
             )}
+            {isDriversPage && (
+              <InputWrapper isTimezone>
+                <DefaultSelect
+                  placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
+                  defaultValue={formState?.changes?.timezone ?? user?.timezone ?? ''}
+                  options={timezonesOptions}
+                  onChange={val => handleChangeSwtich('timezone', val)}
+                  optionInnerMaxHeight='300px'
+                  isShowSearchBar
+                  searchBarIsCustomLayout
+                  searchBarIsNotLazyLoad
+                  searchValue={timezoneSearchValue}
+                  handleChangeSearch={setTimezoneSearchValue}
+                />
+              </InputWrapper>
+            )}
             {!!showInputPhoneNumber && (
               <InputPhoneNumber
                 user={user}

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

@@ -141,3 +141,30 @@ export const TogglePassword = styled.span`
     right: 10px;
   `}
 `
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 20px;
+
+  .select {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    border: none;
+    background-color: ${props => props.theme.colors.secundary};
+    font-size: 14px;
+
+    ${({ isTimezone }) => isTimezone && css`
+      > div:first-child {
+        > div {
+          overflow: hidden;
+        }
+      }
+      .list-wrapper {
+        font-size: 12px;
+        max-height: 220px;
+      }
+    `}
+  }
+`

package/src/components/MyProducts/OrderingWebsite/index.js

@@ -154,6 +154,9 @@ const OrderingWebsiteUI = (props) => {
         setCropState({ name: name, data: reader.result, open: true })
       }
       reader.onerror = error => console.log(error)
+      logoRef.current.value = null
+      backgroundRef.current.value = null
+      mobileBackgroundRef.current.value = null
     }
   }
 

package/src/components/Orders/DeliveriesLocation/index.js

@@ -46,11 +46,6 @@ export const DeliveriesLocation = (props) => {
   const mapRef = useRef(null)
 
   const mapFit = () => {
-    const _onlineDrivers = driversList.drivers.filter(
-      (driver) => driver.enabled && driver.available && !driver.busy
-    )
-    setActiveDrivers(_onlineDrivers)
-
     const bounds = new window.google.maps.LatLngBounds()
 
     if (interActionMapOrder === null) {
@@ -129,6 +124,10 @@ export const DeliveriesLocation = (props) => {
   // Fit bounds on mount, and when the markers change
   useEffect(() => {
     if (driversList.loading || driversList.drivers.length === 0 || mapLoaded) return
+    const _onlineDrivers = driversList.drivers.filter(
+      (driver) => driver.enabled && driver.available && !driver.busy
+    )
+    setActiveDrivers(_onlineDrivers)
     if (interActionMapOrder !== null) {
       for (const driver of driversList.drivers) {
         if (driver.id === interActionMapOrder?.driver?.id) {
@@ -146,7 +145,7 @@ export const DeliveriesLocation = (props) => {
   }, [interActionMapOrder])
 
   const handleMapChange = (data) => {
-    if(!data?.zoom) return
+    if (!data?.zoom) return
     setMapZoom(data?.zoom)
   }
 

package/src/components/Orders/OrderDetailsHeader/index.js

@@ -182,6 +182,13 @@ export const OrderDetailsHeader = (props) => {
           </ButtonLink>
         </ButtonGroup>
       </div>
+      {order?.external_id && (
+        <div>
+          <h2>
+            {t('EXTERNAL_ID', 'External ID :')} {order?.external_id}
+          </h2>
+        </div>
+      )}
       <p>
         {order?.payment_events?.length > 0 ? (
           order?.payment_events?.filter(item => item.event === 'payment').map((event, i) => (

package/src/components/Orders/OrderDetailsHeader/styles.js

@@ -11,6 +11,12 @@ export const OrderDetailsHeaderContainer = styled.div`
       margin: 0px;
       font-weight: 700;
     }
+    h2 {
+      width: 100%;
+      font-size: 18px;
+      margin: 0px;
+      font-weight: 700;
+    }
     > div {
       display: flex;
       width: 100%;

package/src/components/Orders/OrderNotification/index.js

@@ -33,6 +33,7 @@ const OrderNotificationUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const handleNotification = (order) => {
+    if (order?.products?.[0]?.type === 'gift_card') return
     if (customerId && order?.customer_id !== customerId) return
     if (isOnlyDelivery && order?.delivery_type !== 1) return
     const _registerOrderIds = [...registerOrderIds]

package/src/components/Settings/BacCredomatic/index.js

@@ -0,0 +1,213 @@
+import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-components-admin-external'
+import { Button, IconButton } from '../../../styles'
+import { Alert, Confirm, Modal } from '../../Shared'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { ArrowsAngleContract, ArrowsAngleExpand, XLg } from 'react-bootstrap-icons'
+
+import {
+  Header,
+  Description,
+  CategoryExtraContent,
+  Container,
+  DescriptionHeader,
+  HeaderIcons,
+  DoordashConnectContainer,
+  Paragraph
+} from './styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+
+const BacCredomaticUI = (props) => {
+  const {
+    actionState,
+    onClose
+  } = props
+
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
+
+  const toggleMainContent = () => {
+    if (width <= 500) {
+      document.getElementById('catDescription').style.width = '100vw'
+    } else {
+      if ((settingsOpen) && width >= 1000) {
+        document.getElementById('catDescription').style.width = '1000px'
+      } else {
+        document.getElementById('catDescription').style.width = '500px'
+      }
+    }
+  }
+
+  const handleGoToLink = (link) => {
+    window.open(link, '_blank')
+  }
+
+  const expandSidebar = () => {
+    const element = document.getElementById('catDescription')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  useEffect(() => {
+    if (!actionState?.error) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState?.error])
+
+  useEffect(() => {
+    if (width < 1000) return
+    if (settingsOpen) {
+      document.getElementById('catDescription').style.width = '1000px'
+    } else {
+      toggleMainContent()
+    }
+  }, [settingsOpen])
+
+  useEffect(() => {
+    toggleMainContent()
+  }, [width])
+
+  const handleOpenMore = (isInitialRender) => {
+    setSettingsOpen(true)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&more=settings`)
+    }
+  }
+
+  const handleCloseDescription = () => {
+    setSettingsOpen(false)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
+  }
+
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleOpenMore(true)
+    }
+  }, [])
+
+  const DoordashConnectDescription = () => {
+    return (
+      <CategoryExtraContent>
+        <IconButton
+          color='black'
+          onClick={() => handleCloseDescription()}
+        >
+          <XLg />
+        </IconButton>
+        <div>
+          <Header>
+            <h1>{t('MORE_INFO', 'More Info')}</h1>
+          </Header>
+          <Paragraph>
+            <h3>{t('SUPPORT', 'Support')}</h3>
+            <p>
+              {t('BAC_CREDOMATIC_CONNECT_SUPPORT', 'Are you having trouble connecting this')}
+            </p>
+            <p>
+              <a onClick={() => handleGoToLink(t('BAC_CREDOMATIC_CONNECT_SUPPORT_LINK', 'https://www.ordering.co/contact-ordering'))}>{t('CONTACT_US', 'Contact us')}</a>; <span>{t('WE_ARE_HAPPY_TO_HELP', 'we are happy to help.')}</span>
+            </p>
+          </Paragraph>
+        </div>
+      </CategoryExtraContent>
+    )
+  }
+
+  return (
+    <Container
+      id='catDescription'
+    >
+      <DoordashConnectContainer>
+        <DescriptionHeader>
+          <HeaderIcons>
+            {width > 576 && !settingsOpen && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
+            <IconButton
+              color='black'
+              onClick={onClose}
+            >
+              <XLg />
+            </IconButton>
+          </HeaderIcons>
+        </DescriptionHeader>
+        <Header>
+          <h1>{t('BAC_CREDOMATIC', 'BAC Credomatic')}</h1>
+        </Header>
+        <Description>
+          {t('CONNECT_WITH_BAC_CREDOMATIC_DESCRIPTION', 'BAC Credomatic is a financial group in Central America, with operations in Guatemala, El Salvador, Honduras, Nicaragua, Costa Rica , Panama, Grand Cayman, The Bahamas, and the United States.')}
+        </Description>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => handleOpenMore()}>
+          <span>{t('SETTINGS', 'All settings')}</span>
+          <BsArrowRight />
+        </Button>
+      </DoordashConnectContainer>
+      {settingsOpen && (
+        <>
+          {width >= 1000 ? (
+            <DoordashConnectDescription />
+          ) : (
+            <>
+              <Modal
+                width='70%'
+                height='90vh'
+                open
+                padding='0px'
+                onClose={() => setSettingsOpen(false)}
+                hideCloseDefault
+              >
+                <DoordashConnectDescription />
+              </Modal>
+            </>
+          )}
+        </>
+      )}
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+      <Confirm
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+    </Container>
+  )
+}
+
+export const BacCredomatic = (props) => {
+  const bacCredomaticProps = {
+    ...props,
+    UIComponent: BacCredomaticUI
+  }
+
+  return <ApiKeysListController {...bacCredomaticProps} />
+}