ordering-ui-admin-external 1.30.7 → 1.31.0

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

@@ -89,6 +89,7 @@ export const SLAControlsWrapper = styled.div`
 `
 
 export const WrapperSearchAndFilter = styled.div`
+  position: relative;
   display: flex;
   align-items: center;
   margin-top: 10px;
@@ -127,3 +128,56 @@ export const WrapperSearchAndFilter = styled.div`
     `}
   }
 `
+export const WarningMessage = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 2000;
+  top: 100%;
+  background: ${props => props.theme.colors.warning100};
+  border: 1px solid ${props => props.theme.colors.warning};
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 6px 15px;
+  box-sizing: border-box;
+  margin: 10px 0px 0px 0px !important;
+
+  right: 0px;
+  ${props => props.theme?.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  svg {
+    font-size: 20px;
+    color: ${props => props.theme.colors.warning};
+  }
+
+  span {
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0 10px;
+    flex: 1;
+  }
+
+  a {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    padding: 8px 20px;
+    font-size: 14px;
+    line-height: 24px;
+    right: 0px;
+    ${props => props.theme?.rtl && css`
+      left: 0px;
+      right: initial;
+    `}
+
+    span {
+      white-space: nowrap;
+    }
+  }
+`

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

@@ -6,7 +6,8 @@ export const OrdersDashboardList = (props) => {
   const {
     selectedSubOrderStatus,
     isMessagesView,
-    orderByOption
+    orderByOption,
+    setOrdersAmountByStatus
   } = props
 
   const OrdersCommonControlProps = {
@@ -40,24 +41,28 @@ export const OrdersDashboardList = (props) => {
             groupStatus='pending'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.pending}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, pending: total }))}
           />
 
           <OrdersListController
             groupStatus='inProgress'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.inProgress}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, inProgress: total }))}
           />
 
           <OrdersListController
             groupStatus='completed'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.completed}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, completed: total }))}
           />
 
           <OrdersListController
             groupStatus='cancelled'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.cancelled}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, cancelled: total }))}
           />
         </>
       )}

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

@@ -72,6 +72,11 @@ const OrdersFilterGroupUI = (props) => {
     { value: 4, content: <Option>{t('RESOLVED', 'Resolved')}<LogisticStatusDot status={4} /></Option> }
   ]
 
+  const assignedFilterOptions = [
+    { value: 0, content: <Option>{t('ASSIGNED', 'Assigned')}</Option> },
+    { value: 1, content: <Option>{t('UNASSIGNED', 'Unassigned')}</Option> }
+  ]
+
   const handleAcceptFilter = () => {
     handleChangeFilterValues(filterValues)
     handleCloseFilterModal()
@@ -203,6 +208,17 @@ const OrdersFilterGroupUI = (props) => {
             />
           </SelectWrapper>
         </WrapperRow>
+        <WrapperRow>
+          <SelectWrapper>
+            <Select
+              options={assignedFilterOptions}
+              className='select'
+              defaultValue={filterValues?.assigned ?? ''}
+              placeholder={t('SELECT_DRIVER_STATUS', 'Select a driver status')}
+              onChange={(value) => handleChangeChildFilterValue({ assigned: value })}
+            />
+          </SelectWrapper>
+        </WrapperRow>
         {filterValues?.metafield.map(item => (
           <WrapperRow key={item.id}>
             <Input

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

@@ -36,6 +36,7 @@ export const OrdersListing = (props) => {
     orderDetailId,
     filterValues,
     setFilterModalOpen,
+    setOrdersTotalAmount,
 
     isMessagesView,
     setSelectedOrderIds,
@@ -81,6 +82,12 @@ export const OrdersListing = (props) => {
     setFilterApplied(_filterApplied)
   }, [filterValues])
 
+  useEffect(() => {
+    if (!isNaN(pagination.total)) {
+      setOrdersTotalAmount && setOrdersTotalAmount(pagination.total)
+    }
+  }, [pagination.total])
+
   return (
     <>
       {((ordersStatusGroup === groupStatus) || isMessagesView) && (

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

@@ -45,7 +45,6 @@ const OrdersManagerUI = (props) => {
     handleSelectedSubOrderStatus,
     handleCustomOrderDetail,
     setSelectedOrderIds,
-    numberOfOrdersByStatus,
     allowColumns,
     setAllowColumns,
     timeStatus,
@@ -66,6 +65,12 @@ const OrdersManagerUI = (props) => {
   const [isTourFlag, setIsTourFlag] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
+  const [ordersAmountByStatus, setOrdersAmountByStatus] = useState({
+    pending: null,
+    inProgress: null,
+    completed: null,
+    cancelled: null
+  })
 
   const [totalSelectedOrder, setTotalSelectedOrder] = useState(0)
   const handleBackRedirect = () => {
@@ -189,7 +194,7 @@ const OrdersManagerUI = (props) => {
         <OrderStatusFilterBar
           selectedOrderStatus={ordersStatusGroup}
           changeOrderStatus={handleOrdersStatusGroupFilter}
-          numberOfOrdersByStatus={numberOfOrdersByStatus}
+          ordersAmountByStatus={ordersAmountByStatus}
         />
         <OrderSubFilterControls>
           <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
@@ -240,6 +245,7 @@ const OrdersManagerUI = (props) => {
                 slaSettingTime={slaSettingTime}
                 allowColumns={allowColumns}
                 setAllowColumns={setAllowColumns}
+                setOrdersAmountByStatus={setOrdersAmountByStatus}
               />
             </WrapItemView>
           </OrdersInnerContent>
@@ -263,7 +269,9 @@ const OrdersManagerUI = (props) => {
         />
       )}
 
-      <OrderNotification customerId={props.customerId} />
+      {!isSelectedOrders && (
+        <OrderNotification customerId={props.customerId} />
+      )}
 
       {totalSelectedOrder > 0 && (
         <WrapperIndicator>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useConfig, WebsocketStatus as WebsocketStatusController } from 'ordering-components-admin-external'
 import { InfoCircle } from 'react-bootstrap-icons'
 import { Alert, Modal } from '../../Shared'
 import { Button, IconButton } from '../../../styles'
@@ -24,6 +24,9 @@ const SocketStatusUI = (props) => {
 
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
+
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [openModal, setOpenModal] = useState(false)
 
@@ -54,7 +57,7 @@ const SocketStatusUI = (props) => {
         </IconButton>
         <InfoContent>
           {t('WEBSOCKET_STATUS_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh you dashboard and update the status as well. Need help? Contact our Customer support team here:')}
-          <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>
+          {!isEnabledWhiteLabelModule && <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>}
         </InfoContent>
       </InfoWrapper>
       <Button

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

@@ -26,7 +26,9 @@ export const WebhookListSelector = (props) => {
     { value: 'orders_pickup_completed_driver', content: <Option>{t('ORDERS_PICKUP_COMPLETED_DRIVER', 'Order pickup completed by driver')}</Option> },
     { value: 'orders_pickup_failed_driver', content: <Option>{t('ORDERS_PICKUP_FAILED_DRIVER', 'Order pickup failed by driver')}</Option> },
     { value: 'orders_delivery_completed_driver', content: <Option>{t('ORDERS_DELIVERY_COMPLETED_DRIVER', 'Order delivery completed by driver')}</Option> },
-    { value: 'orders_delivery_failed_driver', content: <Option>{t('ORDERS_DELIVERY_FAILED_DRIVER', 'Order delivery failed by driver')}</Option> }
+    { value: 'orders_delivery_failed_driver', content: <Option>{t('ORDERS_DELIVERY_FAILED_DRIVER', 'Order delivery failed by driver')}</Option> },
+    { value: 'preorder_updated', content: <Option>{t('PREORDER_UPDATED', 'Preorder updated')}</Option> },
+    { value: 'drivers_changes', content: <Option>{t('DRIVERS_CHANGES', 'Driver changes')}</Option> }
   ]
 
   const placeholder = <Option>{t('SELECT_HOOK', 'Select a hook')}</Option>

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

@@ -12,8 +12,7 @@ export const InputPhoneNumber = (props) => {
     setValue,
     handleIsValid,
     disabled,
-    isUser,
-    defaultCountry
+    isUser
   } = props
 
   const [, t] = useLanguage()
@@ -44,7 +43,7 @@ export const InputPhoneNumber = (props) => {
         <PhoneInput
           disabled={disabled}
           placeholder={t('PHONE_NUMBER', 'Phone number')}
-          defaultCountry={defaultCountry ?? findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
+          defaultCountry={findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
           value={value}
           displayInitialValueAsLocalNumber
           onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}

package/src/components/Stores/BusinessAdd/ReceiveOrders/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useSession } from 'ordering-components-admin-external'
+import { useLanguage, useSession, useConfig } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { Input } from '../../../../styles'
 import {
@@ -16,6 +16,8 @@ export const ReceiveOrders = (props) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ configs }] = useConfig()
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
 
   useEffect(() => {
     if (user?.email) changeFormState({ email: user?.email })
@@ -34,17 +36,19 @@ export const ReceiveOrders = (props) => {
             placeholder={t('ADD_EMAIL', 'Add email')}
           />
         </FormControl>
-        <DownloadWrapper>
-          <label>{t('DOWNLOADS_APPS', 'Downloads apps')}</label>
-          <DownloadIconWrapper>
-            <a href='https://apps.apple.com/us/app/store-app-2-0/id1608192050' target='_blank' rel='noopener noreferrer'>
-              <img src={theme.images.general.appStore} alt='' />
-            </a>
-            <a href='https://play.google.com/store/apps/details?id=com.ordering.storeappv5&hl=en&gl=US' target='_blank' rel='noopener noreferrer'>
-              <img src={theme.images.general.googlePlay} alt='' />
-            </a>
-          </DownloadIconWrapper>
-        </DownloadWrapper>
+        {!isEnabledWhiteLabelModule && (
+          <DownloadWrapper>
+            <label>{t('DOWNLOADS_APPS', 'Downloads apps')}</label>
+            <DownloadIconWrapper>
+              <a href='https://apps.apple.com/us/app/store-app-2-0/id1608192050' target='_blank' rel='noopener noreferrer'>
+                <img src={theme.images.general.appStore} alt='' />
+              </a>
+              <a href='https://play.google.com/store/apps/details?id=com.ordering.storeappv5&hl=en&gl=US' target='_blank' rel='noopener noreferrer'>
+                <img src={theme.images.general.googlePlay} alt='' />
+              </a>
+            </DownloadIconWrapper>
+          </DownloadWrapper>
+        )}
       </ContentWrapper>
     </ReceiveOrdersContainer>
   )

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

@@ -216,7 +216,7 @@ export const BusinessDeviceDetail = (props) => {
   const businessDeviceDetailProps = {
     ...props,
     UIComponent: BusinessDeviceDetailUI,
-    propsToFetch: ['id', 'name', 'logo', 'owners']
+    propsToFetch: ['id', 'name', 'logo', 'owners', 'address']
   }
   return <BusinessDeviceDetailController {...businessDeviceDetailProps} />
 }

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

@@ -77,6 +77,8 @@ const BusinessProductsListingUI = (props) => {
     getBusiness,
     businessTypes,
     setBusinessTypes,
+    categoryState,
+    handleUpdateCategoryState,
     siteState
   } = props
 
@@ -510,6 +512,8 @@ const BusinessProductsListingUI = (props) => {
           setTaxes={setTaxes}
           fees={fees}
           setFees={setFees}
+          categoryState={categoryState}
+          handleUpdateCategoryState={handleUpdateCategoryState}
         />
       )}
       {openSidebar === 'business_details' && (

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

@@ -55,6 +55,8 @@ export const BusinessSummary = (props) => {
   const [selectedView, setSelectedView] = useState('desktop')
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
+
   const handleOpenCategory = () => {
     events.emit('go_to_page', { page: 'store', params: { store: businessState?.business?.slug } })
   }
@@ -219,11 +221,13 @@ export const BusinessSummary = (props) => {
                 >
                   {t('DUPLICATE', 'Duplicate')}
                 </Dropdown.Item>
-                <Dropdown.Item
-                  onClick={() => handleSelectedItem('personalization')}
-                >
-                  {t('PERSONALIZATION', 'Personalization')}
-                </Dropdown.Item>
+                {!isEnabledWhiteLabelModule && (
+                  <Dropdown.Item
+                    onClick={() => handleSelectedItem('personalization')}
+                  >
+                    {t('PERSONALIZATION', 'Personalization')}
+                  </Dropdown.Item>
+                )}
                 <Dropdown.Item
                   onClick={() => handleSelectedItem('custom_fields')}
                 >
@@ -266,15 +270,17 @@ export const BusinessSummary = (props) => {
             >
               {t('CATEGORIES_AND_PRODUCTS', 'Categories & products')}
             </Button>
-            <Button
-              color='primary'
-              outline
-              borderRadius='8px'
-              onClick={handleOpenSite}
-              disabled={businessState?.loading}
-            >
-              {t('STORE_WEBSITE', 'Store website')}
-            </Button>
+            {!isEnabledWhiteLabelModule && (
+              <Button
+                color='primary'
+                outline
+                borderRadius='8px'
+                onClick={handleOpenSite}
+                disabled={businessState?.loading}
+              >
+                {t('STORE_WEBSITE', 'Store website')}
+              </Button>
+            )}
           </ButtonWrapper>
           <BusinessDescription>
             {businessState?.loading ? (
@@ -289,7 +295,7 @@ export const BusinessSummary = (props) => {
                 ? businessConfigs
                 : businessConfigs.filter(configs => configs.key !== 'spoonity_key')
               : businessConfigs.filter(c => !itemsExcluded.includes(c.key))
-            ).map(config => (
+            ).filter(item => isEnabledWhiteLabelModule ? item.key !== 'personalization' : true).map(config => (
               <BusinessConfigItem
                 key={config.key}
                 active={selectedItem === config.key}

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

@@ -47,7 +47,9 @@ const BusinessWebhooksUI = (props) => {
     { value: 'orders_pickup_completed_driver', content: t('ORDERS_PICKUP_COMPLETED_DRIVER') },
     { value: 'orders_pickup_failed_driver', content: t('ORDERS_PICKUP_FAILED_DRIVER') },
     { value: 'orders_delivery_completed_driver', content: t('ORDERS_DELIVERY_COMPLETED_DRIVER') },
-    { value: 'orders_delivery_failed_driver', content: t('ORDERS_DELIVERY_FAILED_DRIVER') }
+    { value: 'orders_delivery_failed_driver', content: t('ORDERS_DELIVERY_FAILED_DRIVER') },
+    { value: 'preorder_updated', content: t('PREORDER_UPDATED', 'Preorder updated') },
+    { value: 'drivers_changes', content: t('DRIVERS_CHANGES', 'Driver changes') },
   ]
 
   const timeList = [

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

@@ -71,6 +71,8 @@ const ProductExtraOptionDetailsUI = (props) => {
     handleChangeItem,
     isAddForm,
     setIsAddForm,
+    handleDuplicateOption,
+    handleDuplicateSubOption,
 
     dragoverSubOptionId,
     isSubOptionsBottom,
@@ -197,6 +199,11 @@ const ProductExtraOptionDetailsUI = (props) => {
             >
               {t('CUSTOM_FIELDS', 'Custom Fields')}
             </Dropdown.Item>
+            <Dropdown.Item
+              onClick={handleDuplicateOption}
+            >
+              {t('DUPLICATE', 'Duplicate')}
+            </Dropdown.Item>
             <Dropdown.Item
               onClick={() => setOpenModal({ ...openModal, externalId: true })}
             >
@@ -285,6 +292,7 @@ const ProductExtraOptionDetailsUI = (props) => {
               hanldeDragOver={hanldeDragOver}
               handleDrop={handleDrop}
               handleDragEnd={handleDragEnd}
+              handleDuplicateSubOption={handleDuplicateSubOption}
             />
           )
         })}

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

@@ -61,7 +61,9 @@ const ProductExtraOptionsUI = (props) => {
     hanldeDragOver,
     handleDrop,
     handleDragEnd,
-    handleUpdateExtraState
+    handleUpdateExtraState,
+    handleDuplicateExtra,
+    setExtraState
   } = props
 
   const theme = useTheme()
@@ -240,6 +242,11 @@ const ProductExtraOptionsUI = (props) => {
                 >
                   {t('CUSTOM_FIELDS', 'Custom Fields')}
                 </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={handleDuplicateExtra}
+                >
+                  {t('DUPLICATE', 'Duplicate')}
+                </Dropdown.Item>
                 <Dropdown.Item
                   onClick={() => setOpenModal({ ...openModal, externalId: true })}
                 >
@@ -435,6 +442,8 @@ const ProductExtraOptionsUI = (props) => {
             handleUpdateBusinessState={handleUpdateBusinessState}
             handleSucccessDeleteOption={handleSucccessDeleteOption}
             isMaxError={isMaxError}
+            parentExtraState={extraState}
+            setParentExtraState={setExtraState}
           />
         </Modal>
       )}

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

@@ -43,7 +43,8 @@ export const ProductExtraSuboption = (props) => {
     handleDragStart,
     hanldeDragOver,
     handleDrop,
-    handleDragEnd
+    handleDragEnd,
+    handleDuplicateSubOption
   } = props
 
   const theme = useTheme()
@@ -326,6 +327,11 @@ export const ProductExtraSuboption = (props) => {
               >
                 {t('CUSTOM_FIELDS', 'Custom fields')}
               </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => handleDuplicateSubOption(subOption?.id)}
+              >
+                {t('DUPLICATE', 'Duplicate')}
+              </Dropdown.Item>
               <Dropdown.Item
                 onClick={() => setExternalIdOpen(true)}
               >

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

@@ -39,7 +39,8 @@ const ProductExtrasUI = (props) => {
     hanldeDragOver,
     handleDrop,
     handleDragEnd,
-    handleUpdateExtraState
+    handleUpdateExtraState,
+    setExtrasState
   } = props
   const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
@@ -218,6 +219,8 @@ const ProductExtrasUI = (props) => {
               handleChangeExtraName={handleChangeExtraInput}
               handleUpdateBusinessState={handleUpdateBusinessState}
               handleUpdateExtraState={handleUpdateExtraState}
+              extrasState={extrasState}
+              setExtrasState={setExtrasState}
             />
           )}
         </>
@@ -238,6 +241,8 @@ const ProductExtrasUI = (props) => {
                 handleChangeExtraName={handleChangeExtraInput}
                 handleUpdateBusinessState={handleUpdateBusinessState}
                 handleUpdateExtraState={handleUpdateExtraState}
+                extrasState={extrasState}
+                setExtrasState={setExtrasState}
               />
             </Modal>
           )}

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

@@ -44,7 +44,8 @@ export const ProductSummary = (props) => {
     handleDeleteProduct,
     showProductOption,
     isExpand,
-    setIsExpand
+    setIsExpand,
+    handleDuplicateProduct
   } = props
 
   const [, t] = useLanguage()
@@ -170,6 +171,11 @@ export const ProductSummary = (props) => {
                 >
                   {t('PREVIEW', 'Preview')}
                 </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={handleDuplicateProduct}
+                >
+                  {t('DUPLICATE', 'Duplicate')}
+                </Dropdown.Item>
                 <Dropdown.Item
                   onClick={() => handleShowOption('custom_fields')}
                 >

package/src/components/Users/UserAddForm/index.js

@@ -40,7 +40,6 @@ const UserAddFormUI = (props) => {
     handleChangeUserType,
     handlechangeImage,
     handleChangeSwtich,
-    defaultCountry,
     defaultPhoneNumber,
     isFromCustomOrder,
     hideUserTypeSelector
@@ -287,7 +286,6 @@ const UserAddFormUI = (props) => {
               )}
               {!!showInputPhoneNumber && (
                 <InputPhoneNumber
-                  defaultCountry={defaultCountry}
                   value={userPhoneNumber}
                   setValue={handleChangePhoneNumber}
                   handleIsValid={setIsValidPhoneNumber}

package/template/config.json

@@ -11,5 +11,5 @@
   "socket": {
     "url": "https://socket.ordering.co"
   },
-  "use_project_domain": false
+  "use_project_domain": true
 }