ordering-ui-external 10.0.0 → 10.1.0

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/StripeMethodForm/index.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'
+import { PaymentRequestButtonElement, useStripe } from '@stripe/react-stripe-js'
+import { CardForm as CardFormController, useConfig, useLanguage } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { Container } from './styles'
+export const StripeMethodFormUI = (props) => {
+  const {
+    cart,
+    handleSource,
+    handleCancel,
+    paymethod,
+    cartGroup
+  } = props
+
+  const [, t] = useLanguage()
+  const stripe = useStripe()
+  const [{ configs }] = useConfig()
+  const [paymentRequest, setPaymentRequest] = useState(null)
+  const [methodUnavailable, setMethodUnavailable] = useState(false)
+
+  const googlePayMethods = ['google_pay', 'global_google_pay']
+
+  useEffect(() => {
+    if (stripe) {
+      let cartNames = ''
+      if (cartGroup) {
+        // eslint-disable-next-line no-unused-expressions
+        cartGroup?.carts.map((cart, i) => (
+          cartNames = `${cart?.business?.name} ${i !== cartNames?.carts?.length && ', '}`
+        ))
+      }
+      const pr = stripe.paymentRequest({
+        country: 'US',
+        currency: configs?.stripe_currency?.value?.toLowerCase?.() || 'usd',
+        total: {
+          label: cartNames || cart?.business?.name,
+          amount: Math.floor((cartGroup?.balance || cartGroup?.total || cart?.balance || cart?.total) * 100)
+        },
+        requestPayerName: true,
+        requestPayerEmail: true
+      })
+      pr.canMakePayment().then(result => {
+        if (result) {
+          setPaymentRequest(pr)
+        } else {
+          setMethodUnavailable(true)
+        }
+      })
+      pr.on('paymentmethod', async (e) => {
+        const data = {
+          ...e?.paymentMethod?.card,
+          id: e.paymentMethod.id,
+          type: e.paymentMethod.type,
+          source_id: e?.paymentMethod?.id,
+          card: {
+            brand: e.paymentMethod.card.brand,
+            last4: e.paymentMethod.card.last4
+          }
+        }
+        e.complete('success')
+        handleCancel()
+        handleSource(cartGroup ? JSON.stringify(data) : data)
+      })
+    }
+  }, [stripe])
+
+  return (
+    <Container>
+      {methodUnavailable ? (
+        <h2>{googlePayMethods.includes(paymethod) ? t('GOOGLE_PAY_UNAVAILABLE', 'Google pay unavailable') : t('APPLE_PAY_UNAVAILABLE', 'Apple pay unavailable')}</h2>
+      ) : (
+        <>
+          {paymentRequest ? (
+            <PaymentRequestButtonElement options={{ paymentRequest }} />
+          ) : (
+            <Skeleton />
+          )}
+        </>
+      )}
+    </Container>
+  )
+}
+
+export const StripeMethodForm = (props) => {
+  const propsController = {
+    ...props,
+    UIComponent: StripeMethodFormUI
+  }
+  return <CardFormController {...propsController} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/StripeMethodForm/styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  span {
+    width: 100%;
+    height: 35px;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/StripeRedirectForm/index.js

@@ -0,0 +1,96 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { StripeRedirectForm as StripeRedirectFormController, useSession, useLanguage } from 'ordering-components-external'
+import { Button, Input } from '../../../../styles'
+
+import {
+  FormRedirect,
+  FormGroup,
+  ErrorMessage
+} from './styles'
+
+const StripeRedirectFormUI = (props) => {
+  const {
+    paymethods,
+    handleSubmitPaymentMethod
+  } = props
+
+  const [{ user }] = useSession()
+  const { handleSubmit, register, errors, formState } = useForm()
+  const [, t] = useLanguage()
+
+  return (
+    <>
+      <FormRedirect onSubmit={handleSubmit(handleSubmitPaymentMethod)}>
+
+        <FormGroup>
+          <label>{t('SELECT_A_PAYMENT_METHOD', 'Select a payment method')}</label>
+          <select
+            name='type'
+            ref={
+              register({
+                required: true
+              })
+            }
+          >
+            <option value=''>{t('SELECT_A_PAYMENT_METHOD', 'Select a payment method')}</option>
+            {paymethods?.length > 0 && paymethods.map((paymethod, i) => (
+              <option key={i} value={paymethod.value}>{paymethod.name}</option>
+            ))}
+          </select>
+          {errors.type && errors.type.type === 'required' && (
+            <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
+          )}
+        </FormGroup>
+
+        <FormGroup>
+          <label>{t('ACCOUNT_HOLDER', 'Account holder')}</label>
+          <Input
+            name='name'
+            defaultValue={user?.name}
+            placeholder={t('TYPE_ACCOUNT_HOLDER', 'Type an Account holder')}
+            ref={
+              register({
+                required: true
+              })
+            }
+            autoComplete='off'
+          />
+          {errors.name && errors.name.type === 'required' && (
+            <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
+          )}
+        </FormGroup>
+
+        <FormGroup>
+          <label>{t('EMAIL', 'Email')}</label>
+          <Input
+            name='email'
+            type='email'
+            defaultValue={user?.email}
+            placeholder={t('TYPE_AN_EMAIL', 'Type an email')}
+            ref={
+              register({
+                required: true
+              })
+            }
+            autoComplete='off'
+          />
+          {errors.email && errors.email.type === 'required' && (
+            <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
+          )}
+        </FormGroup>
+        <Button borderRadius='8px' color='primary' type='submit' disabled={formState.isSubmitting}>
+          {formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
+        </Button>
+      </FormRedirect>
+    </>
+  )
+}
+
+export const StripeRedirectForm = (props) => {
+  const stripeRedirectFormProps = {
+    ...props,
+    UIComponent: StripeRedirectFormUI
+  }
+  return <StripeRedirectFormController {...stripeRedirectFormProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/StripeRedirectForm/styles.js

@@ -0,0 +1,73 @@
+import styled, { css } from 'styled-components'
+
+export const FormRedirect = styled.form`
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  ${props => props.theme?.rtl && css`
+    padding-right: 10px;
+    padding-left: 0px;
+  `}
+  button {
+    width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    margin-top: 10px;
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .StripeElement,
+  .StripeElementIdeal {
+    display: block;
+    margin: 0 10px;
+    padding: 10px 14px;
+    box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
+      rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
+    border-radius: 4px;
+    background: white;
+  }
+
+  .StripeElement--focus,
+  .StripeElementIdeal--focus {
+    box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
+      rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
+    -webkit-transition: all 150ms ease;
+    transition: all 150ms ease;
+  }
+
+  .StripeElement.loading {
+    height: 41.6px;
+    opacity: 0.6;
+  }
+
+  .StripeElementIdeal {
+    padding: 0;
+  }
+`
+
+export const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  label {
+    margin-bottom: 5px;
+  }
+
+  select {
+    padding: 7px 5px;
+    margin-top: 8px;
+    font-size: 16px;
+    border-radius: 7.6px;
+    border: 1px solid #DBDCDB;
+  }
+`
+
+export const ErrorMessage = styled.p`
+  color: #D81212;
+  margin: 10px 0 0 0;
+  font-weight: bold;
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/TaxInformation/index.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { SingleProductCard } from '../SingleProductCard'
+import { TaxInformationContainer, ProductContainer } from './styles'
+
+export const TaxInformation = (props) => {
+  const {
+    data,
+    products,
+    type
+  } = props
+
+  const [, t] = useLanguage()
+
+  const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
+  const offersHideArray = ['offer_target_2', 'offer_target_3']
+  const hideProductsSectionOffers = offersHideArray.includes(type)
+  const dataHideArray = ['platform', 'business']
+  const hideProductsSectionData = dataHideArray.includes(data.type)
+
+  const getFilterValidation = (product) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).find(code => code.includes(product?.code))
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
+  return (
+    <TaxInformationContainer>
+      {data?.description ? (
+        <h2>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type.includes('offer') && includedOnPriceString}
+        </h2>
+      ) : (
+        <h2>
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
+        </h2>
+      )}
+      {!hideProductsSectionOffers && !hideProductsSectionData && (
+        <>
+          <h3>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</h3>
+          <ProductContainer>
+            {
+              products.filter(product => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
+    </TaxInformationContainer>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/TaxInformation/styles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+
+export const TaxInformationContainer = styled.div`
+  h2{
+    font-size: 22px;
+    margin: 10px;
+    text-align: center;
+  }
+  h3{
+    font-size: 18px;
+  }
+`
+
+export const ProductContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  > div{
+    border: 1px solid #E9ECEF;
+    cursor: initial;
+    @media (min-width: 681px){
+      width: calc(50% - 45px);
+    }
+
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/index.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { CustomOrderDetails } from './CustomOrderDetails'
+import { SideBar } from '../../Shared'
+import { Button } from '../../../styles'
+
+export const CreateCustomOrder = (props) => {
+  const {
+    handleOpenCustomOrderDetail
+  } = props
+
+  const [, t] = useLanguage()
+  const [openSidebar, setOpenSidebar] = useState(false)
+  const [moveDistance, setMoveDistance] = useState(0)
+
+  return (
+    <>
+      <Button
+        borderRadius='7.6px'
+        color='lightPrimary'
+        onClick={() => setOpenSidebar(true)}
+      >
+        {t('CREATE_CUSTOM_ORDER', 'Create custom order')}
+      </Button>
+      {openSidebar && (
+        <SideBar
+          sidebarId='custom_order_details'
+          open={openSidebar}
+          onClose={() => {
+            setMoveDistance(0)
+            setOpenSidebar(false)
+          }}
+          defaultSideBarWidth={500 + moveDistance}
+          moveDistance={moveDistance}
+        >
+          <CustomOrderDetails
+            handleParentSidebarMove={val => setMoveDistance(val)}
+            handleOpenCustomOrderDetail={handleOpenCustomOrderDetail}
+            onClose={() => setOpenSidebar(false)}
+          />
+        </SideBar>
+      )}
+    </>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CurrencyFilter/index.js

@@ -11,6 +11,7 @@ export const CurrencyFilter = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [searchValue, setSearchValue] = useState('')
 
   const placeholder = (
     <PlaceholderTitle>
@@ -22,20 +23,22 @@ export const CurrencyFilter = (props) => {
 
   useEffect(() => {
     const _countryList = []
-    const _groupsOption = currencyList.map((country) => {
-      return {
-        value: country.value,
-        content: (
-          <Option>{country.text}</Option>
-        )
-      }
-    })
+    const _groupsOption = currencyList
+      .filter(option => option?.text.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .map((country) => {
+        return {
+          value: country.value,
+          content: (
+            <Option>{country.text}</Option>
+          )
+        }
+      })
 
     for (const option of _groupsOption) {
       _countryList.push(option)
     }
     setCountryTypes(_countryList)
-  }, [currencyList])
+  }, [currencyList, searchValue])
 
   return (
     <MultiSelect
@@ -44,6 +47,11 @@ export const CurrencyFilter = (props) => {
       options={countryTypes}
       onChange={(code) => handleChangeCurrency(code)}
       optionInnerMaxHeight='200px'
+      isShowSearchBar
+      searchBarIsCustomLayout
+      searchBarIsNotLazyLoad
+      searchValue={searchValue}
+      handleChangeSearch={(val) => setSearchValue(val)}
     />
   )
 }

package/src/themes/callcenterOriginal/src/components/Orders/DateTypeSelector/index.js

@@ -61,7 +61,7 @@ export const DateTypeSelector = (props) => {
   const _handleChangeFromDate = (date) => {
     setStartDate(date)
     if (date !== null) {
-      handleChangeFromDate(dayjs(date).format('YYYY-MM-DD'))
+      handleChangeFromDate(dayjs(date).format('YYYY-MM-DD 00:00:00'))
     } else {
       handleChangeFromDate(null)
     }
@@ -70,7 +70,7 @@ export const DateTypeSelector = (props) => {
   const _handleChangeEndDate = (date) => {
     setEndDate(date)
     if (date !== null) {
-      handleChangeEndDate(dayjs(date).format('YYYY-MM-DD'))
+      handleChangeEndDate(dayjs(date).format('YYYY-MM-DD 23:59:59'))
     } else {
       handleChangeEndDate(null)
     }

package/src/themes/callcenterOriginal/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,6 +145,7 @@ export const DeliveriesLocation = (props) => {
   }, [interActionMapOrder])
 
   const handleMapChange = (data) => {
+    if (!data?.zoom) return
     setMapZoom(data?.zoom)
   }
 

package/src/themes/callcenterOriginal/src/components/Orders/DeliveriesManager/index.js

@@ -62,14 +62,13 @@ const DeliveriesManagerUI = (props) => {
     if (id === null) setIsOpenOrderDetail(false)
     else {
       setOrderDetailId(id)
-      onOrderRedirect(id)
       setIsOpenOrderDetail(true)
     }
   }, [])
 
   return (
     <>
-      <DeliveriesContainer>
+      <DeliveriesContainer id='deliveryDashboard'>
         <OrdersContentHeader
           isDisableControl
           title={t('DELIVERY_DASHBOARD', 'Delivery dashboard')}
@@ -116,7 +115,7 @@ const DeliveriesManagerUI = (props) => {
           open={isOpenOrderDetail}
           order={detailsOrder}
           orderId={orderDetailId}
-          driversList={driversList}
+          drivers={driversList.drivers}
           onClose={() => handleBackRedirect()}
         />
       )}
@@ -130,6 +129,7 @@ const DeliveriesManagerUI = (props) => {
 export const DeliveriesManager = (props) => {
   const OrdersListControlProps = {
     ...props,
+    isOnlyDelivery: true,
     UIComponent: DeliveriesManagerUI,
     driversPropsToFetch: ['id', 'name', 'lastname', 'location', 'enabled', 'available', 'busy', 'driver_groups', 'assigned_orders_count', 'last_order_assigned_at', 'last_location_at', 'cellphone', 'photo', 'qualification']
   }

package/src/themes/callcenterOriginal/src/components/Orders/DeliveryDashboard/index.js

@@ -58,6 +58,7 @@ export const DeliveryDashboard = (props) => {
             selectedOrderCard={interActionMapOrder}
             handleOrderCardClick={handleLocation}
             handleUpdateDriverLocation={handleUpdateDriverLocation}
+            isDelivery
           />
         </WrapperOrderlist>
       </OrdersContainer>

package/src/themes/callcenterOriginal/src/components/Orders/DeliveryDashboard/styles.js

@@ -11,7 +11,7 @@ export const DeliveryDashboardContainer = styled.div`
 
   @media (min-width: 1024px) {
     flex-direction: row;
-    height: calc(100vh - 100px);
+    height: calc(100vh - 122px);
   }
 `
 

package/src/themes/callcenterOriginal/src/components/Orders/DeliveryTypeSelector/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-external'
 import { MultiSelect } from '../../../styles/MultiSelect'
 
@@ -15,13 +15,31 @@ export const DeliveryTypeSelector = (props) => {
 
   const [, t] = useLanguage()
 
-  const deliveryTypes = [
-    { value: 1, content: <Option>{t('DELIVERY', 'Delivery')}</Option> },
-    { value: 2, content: <Option>{t('PICKUP', 'Pickup')}</Option> },
-    { value: 3, content: <Option>{t('EAT_IN', 'Eat in')}</Option> },
-    { value: 4, content: <Option>{t('CURBSIDE', 'Curbside')}</Option> },
-    { value: 5, content: <Option>{t('DRIVE_THRU', 'Drive thru')}</Option> }
+  const [searchValue, setSearchValue] = useState('')
+  const [deliveryTypes, setDeliveryTypes] = useState([])
+
+  const deliveryTypeList = [
+    { value: 1, name: t('DELIVERY', 'Delivery') },
+    { value: 2, name: t('PICKUP', 'Pickup') },
+    { value: 3, name: t('EAT_IN', 'Eat in') },
+    { value: 4, name: t('CURBSIDE', 'Curbside') },
+    { value: 5, name: t('DRIVE_THRU', 'Drive thru') }
   ]
+
+  useEffect(() => {
+    const _deliveryTypes = deliveryTypeList
+      .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .map((type) => {
+        return {
+          value: type.value,
+          content: (
+            <Option>{type.name}</Option>
+          )
+        }
+      })
+    setDeliveryTypes(_deliveryTypes)
+  }, [searchValue])
+
   const placeholder = <PlaceholderTitle>{t('SELECT_DELIVERY_TYPE', 'Select delivery type')}</PlaceholderTitle>
 
   return (
@@ -30,6 +48,11 @@ export const DeliveryTypeSelector = (props) => {
       defaultValue={filterValues.deliveryTypes}
       options={deliveryTypes}
       onChange={(deliveryType) => handleChangeDeliveryType(deliveryType)}
+      isShowSearchBar
+      searchBarIsCustomLayout
+      searchBarIsNotLazyLoad
+      searchValue={searchValue}
+      handleChangeSearch={(val) => setSearchValue(val)}
     />
   )
 }

package/src/themes/callcenterOriginal/src/components/Orders/DriverSelector/index.js

@@ -159,6 +159,11 @@ const DriverSelectorUI = (props) => {
             optionInnerMargin='10px'
             optionInnerMaxHeight='150px'
             onChange={(driver) => handleChangeDriver(driver)}
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
           />
         ) : (
           <MultiSelect
@@ -167,6 +172,11 @@ const DriverSelectorUI = (props) => {
             optionInnerMargin='10px'
             optionInnerMaxHeight='150px'
             className='driver-select'
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
           />
         )}
       </>

package/src/themes/callcenterOriginal/src/components/Orders/DriversBusyStatusFilter/styles.js

@@ -1,11 +1,17 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  dispaly: flex;
+  display: flex;
   button {
     margin: 10px;
     white-space: nowrap;
     font-size: 14px;
+    margin: 10px 0;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
 
     svg {
       font-size: 20px;

package/src/themes/callcenterOriginal/src/components/Orders/DriversDashboard/index.js

@@ -25,10 +25,10 @@ export const DriversDashboard = (props) => {
     handleOpenDriverOrders
   } = props
 
-  const numberOfonlineDrivers = onlineDrivers?.length
-  const numberOfofflineDrivers = offlineDrivers?.length
-  const numberOfbusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => ele.busy)?.length : offlineDrivers.filter(ele => ele.busy)?.length
-  const numberOfnotBusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => !ele.busy)?.length : offlineDrivers.filter(ele => !ele.busy)?.length
+  const numberOfonlineDrivers = onlineDrivers.length
+  const numberOfofflineDrivers = offlineDrivers.length
+  const numberOfbusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => ele.busy).length : offlineDrivers.filter(ele => ele.busy).length
+  const numberOfnotBusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => !ele.busy).length : offlineDrivers.filter(ele => !ele.busy).length
 
   return (
     <DriversDashboardContainer>