ordering-ui-admin-external 1.43.86 → 1.43.88

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

@@ -78,7 +78,8 @@ const OrderDetailsUI = (props) => {
     handleRefundPaymentsStripe,
     handleOrderRefund,
     isServiceOrder,
-    handleUpdateComment
+    handleUpdateComment,
+    disableSocketRoomDriver
   } = props
 
   const {
@@ -419,6 +420,7 @@ const OrderDetailsUI = (props) => {
           )}
           <div data-tour='tour_driver'>
             <OrderContactInformation
+              disableSocketRoomDriver={disableSocketRoomDriver}
               isServiceOrder={isServiceOrder}
               customerInfoState={customerInfoState}
               handleChangeCustomerInfoState={handleChangeCustomerInfoState}

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

@@ -44,7 +44,8 @@ export const OrdersContentHeader = (props) => {
     setTimeStatus,
     setSlaSettingTime,
     isShowMapsKeySettingButton,
-    adminsList
+    adminsList,
+    disableSocketRoomDriver
   } = props
 
   const { width } = useWindowSize()
@@ -104,6 +105,7 @@ export const OrdersContentHeader = (props) => {
               searchValue={searchValue}
               handleChangeFilterValues={handleChangeFilterValues}
               handleChangeSearch={handleChangeSearch}
+              disableSocketRoomDriver={disableSocketRoomDriver}
             />
           </WrapperHeaderFilterGroup>
           <WebsocketStatus />

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

@@ -6,9 +6,7 @@ import { useLanguage, useConfig, OrdersFilter as OrdersFilterController } from '
 import { BusinessesSelector } from '../BusinessesSelector'
 import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
 import { DateTypeSelector } from '../DateTypeSelector'
-import { DriverMultiSelector } from '../DriverMultiSelector'
 import { CitySelector, Modal } from '../../Shared'
-// import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 import { DeliveryTypeSelector } from '../DeliveryTypeSelector'
 import { PaymethodTypeSelector } from '../PaymethodTypeSelector'
 import { CountryFilter } from '../CountryFilter'

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

@@ -18,7 +18,8 @@ const OrdersHeaderFilterGroupUI = (props) => {
     handleChangeExternalId,
     handleChangeGroup,
     isSelectedOrders,
-    assignableDriverGroupList
+    assignableDriverGroupList,
+    disableSocketRoomDriver
   } = props
 
   const [{ dictionary }] = useLanguage()
@@ -72,6 +73,7 @@ const OrdersHeaderFilterGroupUI = (props) => {
             driversList={driversList}
             filterValues={filterValues}
             handleChangeDriver={handleChangeDriver}
+            disableSocketRoomDriver={disableSocketRoomDriver}
           />
         )}
         {!loading && configFilter.includes('driver_group') && assignableDriverGroupList && (

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

@@ -53,7 +53,10 @@ const OrdersManagerUI = (props) => {
     timeStatus,
     setTimeStatus,
     isUseQuery,
-    disableDriverLocationsSockets
+    disableDriverLocationsSockets,
+    detailsOrder,
+    setDetailsOrder,
+    disableSocketRoomDriver
   } = props
 
   const [, t] = useLanguage()
@@ -63,7 +66,6 @@ const OrdersManagerUI = (props) => {
   const query = new URLSearchParams(useLocation().search)
   const [isOpenOrderDetail, setIsOpenOrderDetail] = useState(false)
   const [orderDetailId, setOrderDetailId] = useState(null)
-  const [detailsOrder, setDetailsOrder] = useState(null)
   const [filterModalOpen, setFilterModalOpen] = useState(false)
 
   const [isTourOpen, setIsTourOpen] = useState(false)
@@ -199,6 +201,7 @@ const OrdersManagerUI = (props) => {
           setSlaSettingTime={setSlaSettingTime}
           isLateralBar={isLateralBar}
           disableDriverLocationsSockets={disableDriverLocationsSockets}
+          disableSocketRoomDriver={disableSocketRoomDriver}
         />
         <OrderStatusFilterBar
           isUseQuery={isUseQuery}
@@ -264,6 +267,7 @@ const OrdersManagerUI = (props) => {
                 ordersAmountByStatus={ordersAmountByStatus}
                 setOrdersAmountByStatus={setOrdersAmountByStatus}
                 franchisesList={props.franchisesList}
+                disableSocketRoomDriver={disableSocketRoomDriver}
               />
             </WrapItemView>
           </OrdersInnerContent>
@@ -284,6 +288,7 @@ const OrdersManagerUI = (props) => {
           setIsTourFlag={setIsTourFlag}
           setIsTourOpen={setIsTourOpen}
           drivers={driversList.drivers}
+          disableSocketRoomDriver={disableSocketRoomDriver}
         />
       )}
 

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

@@ -13,6 +13,7 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Modal, SearchBar, Alert } from '../../Shared'
 import { Button } from '../../../styles'
 import { PaymentOptionStripeDirect } from '../PaymentOptionStripeDirect'
+import { PaymentOptionStripeLink } from '../PaymentOptionStripeLink'
 import { PaymentOption } from '../PaymentOption'
 import { PaymethodOptionPaypalExpress } from '../PaymethodOptionPaypalExpress'
 import { PaymethodOptionStripeRedirect } from '../PaymethodOptionStripeRedirect'
@@ -269,6 +270,7 @@ const BusinessPaymentMethodsUI = (props) => {
             <>
               {
                 !['stripe_direct',
+                  'stripe_link',
                   'paypal',
                   'paypal_express',
                   'stripe_redirect',
@@ -351,6 +353,25 @@ const BusinessPaymentMethodsUI = (props) => {
                   handleDeletePaymethod={handleDeleteBusinessPaymethodOption}
                 />
               )}
+              {selectedPaymethodGateway === 'stripe_link' && (
+                <PaymentOptionStripeLink
+                  business={business}
+                  sitesState={sitesState}
+                  open={isEdit}
+                  onClose={() => handleCloseEdit()}
+                  businessPaymethod={selectedBusinessPaymethod}
+                  changesState={changesState}
+                  orderTypes={orderTypes}
+                  handleChangeBusinessPaymentState={handleChangeBusinessPaymentState}
+                  cleanChangesState={cleanChangesState}
+                  actionState={actionState}
+                  handleChangeSandbox={handleChangeSandbox}
+                  handleChangeInput={handleChangeInput}
+                  handleSaveClick={handleSaveClick}
+                  handleDeletePaymethod={handleDeleteBusinessPaymethodOption}
+                  handleSuccessUpdate={handleSuccessUpdate}
+                />
+              )}
               {selectedPaymethodGateway === 'paypal' && (
                 <PaymentOptionPaypal
                   open={isEdit}
@@ -466,6 +487,7 @@ const BusinessPaymentMethodsUI = (props) => {
               >
                 {
                   !['stripe_direct',
+                    'stripe_link',
                     'paypal',
                     'paypal_express',
                     'stripe_redirect',
@@ -507,6 +529,25 @@ const BusinessPaymentMethodsUI = (props) => {
                     handleDeletePaymethod={handleDeleteBusinessPaymethodOption}
                   />
                 )}
+                {selectedPaymethodGateway === 'stripe_link' && (
+                  <PaymentOptionStripeLink
+                    business={business}
+                    sitesState={sitesState}
+                    open={isEdit}
+                    onClose={() => handleCloseEdit()}
+                    businessPaymethod={selectedBusinessPaymethod}
+                    changesState={changesState}
+                    orderTypes={orderTypes}
+                    handleChangeBusinessPaymentState={handleChangeBusinessPaymentState}
+                    cleanChangesState={cleanChangesState}
+                    actionState={actionState}
+                    handleChangeSandbox={handleChangeSandbox}
+                    handleChangeInput={handleChangeInput}
+                    handleSaveClick={handleSaveClick}
+                    handleDeletePaymethod={handleDeleteBusinessPaymethodOption}
+                    handleSuccessUpdate={handleSuccessUpdate}
+                  />
+                )}
                 {selectedPaymethodGateway === 'paypal' && (
                   <PaymentOptionPaypal
                     open={isEdit}

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

@@ -0,0 +1,357 @@
+import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useLanguage, PaymentOptionStripeLink as PaymentOptionStripeLinkController } from 'ordering-components-admin-external'
+import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
+import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
+import { Button, Input, IconButton, Checkbox, DefaultSelect as Select } from '../../../styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { useTheme } from 'styled-components'
+import { ThreeDots, XLg } from 'react-bootstrap-icons'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+import { Confirm } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
+
+import {
+  Container,
+  SandboxWrapper,
+  FieldName,
+  Header,
+  CloseButton,
+  TabOption,
+  TabOptionName,
+  ActionSelectorWrapper,
+  Option
+} from './styles'
+import { Tab, TabsContainer } from '../BusinessMenu/styles'
+
+const PaymentOptionStripeLinkUI = (props) => {
+  const {
+    open,
+    onClose,
+    orderTypes,
+    sitesState,
+    configsState,
+    changesState,
+    handleChangeBusinessPaymentState,
+    cleanChangesState,
+    actionState,
+    handleChangeSandbox,
+    handleChangeInput,
+    handleSaveClick,
+    businessPaymethod,
+    handleDeletePaymethod,
+    handleUpdateConfigs
+  } = props
+
+  const query = new URLSearchParams(useLocation().search)
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [paymentTabs, setPaymentTabs] = useState(0)
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
+
+  const configsToShow = {
+    allow_text_messages_sms: true,
+    allow_text_messages_whatsapp: true
+  }
+
+  const setPaymethodInfo = (values) => {
+    const data = {}
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
+
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
+
+    handleChangeBusinessPaymentState(data)
+  }
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      props.onClose()
+    }
+    setIsMenuOpen(value)
+  }
+  const onClickDeletePaymethod = () => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ITEM', 'Are you sure to delete this _item_?').replace('_item_', t('PAYMETHOD_ID', 'Paymethod')),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeletePaymethod(businessPaymethod?.paymethod?.id)
+      }
+    })
+  }
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('stripe_link').style.width = '100%'
+      } else {
+        document.getElementById('stripe_link').style.width = '500px'
+      }
+    }
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  useEffect(() => {
+    const initState = {
+      sandbox: businessPaymethod?.sandbox,
+      allowed_order_types: businessPaymethod?.allowed_order_types || [1, 2, 3, 4, 5]
+    }
+    if (businessPaymethod?.data) {
+      initState.data = businessPaymethod.data
+    }
+    if (businessPaymethod?.data_sandbox) {
+      initState.data_sandbox = businessPaymethod.data_sandbox
+    }
+    cleanChangesState(initState)
+  }, [])
+
+  useEffect(() => {
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
+  }, [changesState?.sites, changesState?.allowed_order_types])
+
+  const handleTabClick = (tab, isInitialRender) => {
+    setPaymentTabs(tab)
+    if (!isInitialRender) {
+      addQueryToUrl({ payemthod_tab: tab })
+    }
+  }
+
+  useEffect(() => {
+    const payemthodTab = query.get('payemthod_tab')
+    if (payemthodTab) {
+      handleTabClick(Number(payemthodTab), true)
+    } else {
+      handleTabClick(0)
+    }
+  }, [])
+
+  return (
+    <>
+      <Container id='stripe_link'>
+        <Header>
+          <h1>{t('STRIPE_LINK', 'Stripe link (Only for callcenter)')}</h1>
+          <ActionSelectorWrapper>
+            <DropdownButton
+              menuAlign={theme?.rtl ? 'left' : 'right'}
+              title={<ThreeDots />}
+              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+            >
+              <Dropdown.Item
+                onClick={() => onClickDeletePaymethod()}
+              >
+                {t('DELETE', 'Delete')}
+              </Dropdown.Item>
+            </DropdownButton>
+          </ActionSelectorWrapper>
+          <CloseButton>
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </CloseButton>
+        </Header>
+        <p className='message'>{t('STRIPE_AND_TWILIO_CONFIGS_REQUIERED', 'Stripe and Twilio keys are requiered to use this Payment Method')}</p>
+        <TabsContainer>
+          <Tab
+            active={paymentTabs === 0}
+            onClick={() => handleTabClick(0)}
+          >
+            {t('GENERAL', 'General')}
+          </Tab>
+          {sitesState?.sites?.length > 0 && (
+            <Tab
+              active={paymentTabs === 1}
+              onClick={() => handleTabClick(1)}
+            >
+              {t('CHANNELS', 'Channels')}
+            </Tab>
+          )}
+          <Tab
+            active={paymentTabs === 2}
+            onClick={() => handleTabClick(2)}
+          >
+            {t('ORDER_TYPE', 'Order type')}
+          </Tab>
+        </TabsContainer>
+
+        {paymentTabs === 0 && (
+          <>
+            <SandboxWrapper>
+              <Checkbox
+                checked={changesState?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                onChange={e => handleChangeSandbox(e.target.checked)}
+              />
+              <span>{t('SANDBOX', 'Sandbox')}</span>
+            </SandboxWrapper>
+            <FieldName>{t('PUBLISHABLE_KEY', 'Publishable key')}</FieldName>
+            <Input
+              name='publishable'
+              defaultValue={
+                changesState?.data?.publishable
+                  ? changesState?.data?.publishable
+                  : businessPaymethod?.data?.publishable
+              }
+              placeholder={t('PUBLISHABLE_KEY', 'Publishable key')}
+              onChange={e => handleChangeInput(e, false)}
+            />
+            <FieldName>{t('SECRET_KEY', 'Secret key')}</FieldName>
+            <Input
+              name='secret'
+              defaultValue={
+                changesState?.data?.secret
+                  ? changesState?.data?.secret
+                  : businessPaymethod?.data?.secret
+              }
+              placeholder={t('SECRET_KEY', 'Secret key')}
+              onChange={e => handleChangeInput(e, false)}
+            />
+            <FieldName>{t('PUBLISHABLE_KEY', 'Publishable key')} ({t('SANDBOX', 'Sandbox')})</FieldName>
+            <Input
+              name='publishable'
+              defaultValue={
+                changesState?.data_sandbox?.publishable
+                  ? changesState?.data_sandbox?.publishable
+                  : businessPaymethod?.data_sandbox?.publishable
+              }
+              placeholder={`${t('PUBLISHABLE_KEY', 'Publishable key')} (${t('SANDBOX', 'Sandbox')})`}
+              onChange={e => handleChangeInput(e, true)}
+            />
+            <FieldName>{t('SECRECT_KEY', 'Secret key')} ({t('SANDBOX', 'Sandbox')})</FieldName>
+            <Input
+              name='secret'
+              defaultValue={
+                changesState?.data_sandbox?.secret
+                  ? changesState?.data_sandbox?.secret
+                  : businessPaymethod?.data_sandbox?.secret
+              }
+              placeholder={`${t('SECRECT_KEY', 'Secret key')} (${t('SANDBOX', 'Sandbox')})`}
+              onChange={e => handleChangeInput(e, true)}
+            />
+            <p className='alert-message'>{t('TWILIO_CONFIGURATION_MESSAGE', '*Enable these options after twilio configuration')}</p>
+            {!configsState?.loading && configsState?.configs?.filter(config => configsToShow[config?.key]).map(config => {
+              const options = config?.options?.map(item => {
+                return { value: item.value, content: <Option>{t(item.text.toUpperCase())}</Option> }
+              })
+              return (
+                <>
+                  <FieldName>{config?.name}</FieldName>
+                  {config?.type === 2 && options && (
+                    <Select
+                      notAsync
+                      defaultValue={config?.value}
+                      options={options}
+                      onChange={(typeValue) => handleUpdateConfigs(config?.id, { value: typeValue })}
+                      placeholder={t('SELECT_A_OPTION', 'Select a option')}
+                    />
+                  )}
+                </>
+              )
+            })}
+          </>
+        )}
+
+        {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
+          <>
+            <TabOption
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
+            >
+              {all ? (
+                <RiCheckboxFill className='fill' />
+              ) : (
+                <RiCheckboxBlankLine />
+              )}
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
+            </TabOption>
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
+        )}
+
+        {paymentTabs === 2 && (
+          orderTypes.map(type => (
+            <TabOption
+              key={type.value}
+              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+            >
+              {(localState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
+                <RiCheckboxFill className='fill' />
+              ) : (
+                <RiCheckboxBlankLine />
+              )}
+              <TabOptionName>{type.text}</TabOptionName>
+            </TabOption>
+          ))
+        )}
+
+        <Button
+          borderRadius='5px'
+          color='primary'
+          disabled={actionState.loading || Object.keys(changesState).length === 0}
+          onClick={() => handleSaveClick(businessPaymethod.id)}
+        >
+          {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
+        </Button>
+      </Container>
+      <Confirm
+        width='700px'
+        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}
+      />
+    </>
+  )
+}
+
+export const PaymentOptionStripeLink = (props) => {
+  const paymentOptionStripeLinkProps = {
+    ...props,
+    UIComponent: PaymentOptionStripeLinkUI
+  }
+  return <PaymentOptionStripeLinkController {...paymentOptionStripeLinkProps} />
+}