ordering-ui-external 10.0.1 → 10.2.0

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

@@ -0,0 +1,251 @@
+import React, { useEffect, useState } from 'react'
+import {
+  useLanguage,
+  DriverListDashboard as CompanysController
+} from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import { Select } from '../../../styles/Select/DashboardSelect'
+import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
+import { MultiSelect } from '../../../styles'
+
+import {
+  Option,
+  OptionContent,
+  CompanyNameContainer,
+  WrapperCompanyImage,
+  CompanyImage,
+  CompanyName,
+  CompanyText,
+  PlaceholderTitle
+} from './styles'
+
+const CompanySelectorUI = (props) => {
+  const {
+    isFirstSelect,
+    order,
+    companysList,
+    defaultValue,
+    isPhoneView,
+    isFilterView,
+    small,
+    padding,
+    orderView,
+    handleAssignDriverCompany,
+    handleChangeCompany,
+    filterValues,
+    isTourOpen,
+    setCurrentTourStep,
+    handleOpenMessages
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [defaultOption, setDefaultOption] = useState(null)
+  const [companysOptionList, setCompanysOptionList] = useState([])
+  const [companyssMultiOptionList, setCompanysMultiOptionList] = useState([])
+  const [searchValue, setSearchValue] = useState(null)
+  const companysLoading = [{ value: 'default', content: <Option small={small}>{t('LOADING', 'loading')}...</Option> }]
+
+  useEffect(() => {
+    const _companysOptionList = [
+      {
+        value: 'default',
+        content: (
+          <Option
+            padding={orderView ? padding : '0px'}
+          >
+            {orderView ? (
+              <>
+                <WrapperCompanyImage small={small} className='driver-photo'>
+                  <CompanyImage bgimage={company.logo || theme?.images?.icons?.noDriver} small={small} />
+                </WrapperCompanyImage>
+                <OptionContent>
+                  <CompanyNameContainer className='driver-info'>
+                    <CompanyName small={small}>{t('NO_COMPANY', 'No Company')}</CompanyName>
+                  </CompanyNameContainer>
+                </OptionContent>
+              </>
+            ) : (
+              t('SELECT_COMPANY', 'Select company')
+            )}
+          </Option>
+        ),
+        color: 'primary',
+        disabled: !isFilterView,
+        showDisable: true
+      }
+    ]
+    if (!isFilterView) {
+      _companysOptionList.push({
+        value: 'remove',
+        content: (
+          <Option isRemove>{t('REMOVE_COMPANY', 'Remove assigned company')}</Option>
+        ),
+        disabled: defaultValue === 'default'
+      })
+    }
+    if (!companysList.loading) {
+      let _companysList
+      if (searchValue) {
+        _companysList = companysList.companys.filter(company => (company.name).toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      } else {
+        _companysList = companysList.companys
+      }
+      const _companysOptionListTemp = _companysList.map((company, i) => {
+        return {
+          value: company.id,
+          showDisable: isFilterView ? true : !(isFilterView || !company?.busy),
+          content: (
+            <Option small={small} isPhoneView={isPhoneView} padding={padding} isFilterView={isFilterView}>
+              <WrapperCompanyImage small={small} className='driver-photo'>
+                <CompanyImage bgimage={company.logo || theme.images.icons?.noDriver} small={small} />
+              </WrapperCompanyImage>
+              <OptionContent>
+                <CompanyNameContainer className='driver-info'>
+                  <CompanyName small={small}>{company.name}</CompanyName>
+                  <CompanyText small={small}>{t('COMPANY', 'Company')}</CompanyText>
+                </CompanyNameContainer>
+              </OptionContent>
+            </Option>
+          )
+        }
+      })
+
+      setCompanysMultiOptionList(_companysOptionListTemp)
+
+      for (const option of _companysOptionListTemp) {
+        _companysOptionList.push(option)
+      }
+    }
+    setCompanysOptionList(_companysOptionList)
+  }, [companysList, defaultValue, searchValue])
+
+  const changeCompany = (companyId) => {
+    if (isFilterView) {
+      if (companyId === 'default') {
+        handleChangeCompany(null)
+      } else {
+        handleChangeCompany(companyId)
+      }
+      return
+    }
+    if (companyId === 'default') return
+    if (companyId === 'remove') {
+      companyId = null
+    }
+    handleAssignDriverCompany({ orderId: order.id, companyId: companyId })
+    if (isTourOpen && setCurrentTourStep) {
+      handleOpenMessages('chat')
+      setTimeout(() => {
+        isTourOpen && setCurrentTourStep && setCurrentTourStep(3)
+      }, 50)
+    }
+  }
+
+  useEffect(() => {
+    setDefaultOption(defaultValue)
+  }, [defaultValue])
+
+  const Placeholder = <PlaceholderTitle>{t('SELECT_COMPANY', 'Select company')}</PlaceholderTitle>
+
+  const handleSearch = (val) => {
+    setSearchValue(val)
+  }
+
+  if (isFilterView) {
+    return (
+      <>
+        {!companysList.loading ? (
+          <MultiSelect
+            defaultValue={filterValues.companyIds}
+            placeholder={Placeholder}
+            options={companyssMultiOptionList}
+            optionInnerMargin='10px'
+            optionInnerMaxHeight='150px'
+            onChange={(company) => handleChangeCompany(company)}
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
+          />
+        ) : (
+          <MultiSelect
+            defaultValue='default'
+            options={companysLoading}
+            optionInnerMargin='10px'
+            optionInnerMaxHeight='150px'
+            className='driver-select'
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
+          />
+        )}
+      </>
+    )
+  } else {
+    return (
+      <>
+        {!companysList.loading ? (
+          <>
+            {isFirstSelect ? (
+              <FirstSelect
+                defaultValue={defaultOption || 'default'}
+                options={companysOptionList}
+                optionInnerMaxHeight='200px'
+                onChange={(companyId) => changeCompany(companyId)}
+                isShowSearchBar
+                searchBarPlaceholder={t('SEARCH', 'Search')}
+                searchBarIsCustomLayout
+                searchBarIsNotLazyLoad
+                searchValue={searchValue}
+                handleChangeSearch={handleSearch}
+                className='driver-select'
+              />
+            ) : (
+              <Select
+                defaultValue={defaultOption || 'default'}
+                options={companysOptionList}
+                optionInnerMaxHeight='200px'
+                onChange={(companyId) => changeCompany(companyId)}
+                isShowSearchBar
+                searchBarIsNotLazyLoad
+                searchBarPlaceholder={t('SEARCH', 'Search')}
+                searchBarIsCustomLayout
+                searchValue={searchValue}
+                handleChangeSearch={handleSearch}
+                className='driver-select'
+              />
+            )}
+          </>
+        ) : (
+          <>
+            <Select
+              placeholder={t('SELECT_COMPANY', 'Select company')}
+              defaultValue='default'
+              options={companysLoading}
+              optionInnerMargin='10px'
+              optionInnerMaxHeight='200px'
+              className='driver-select'
+            />
+          </>
+        )}
+      </>
+    )
+  }
+}
+
+export const CompanySelector = (props) => {
+  const CompanysControlProps = {
+    ...props,
+    UIComponent: CompanySelectorUI,
+    propsToFetch: ['id', 'name', 'lastname', 'cellphone', 'photo']
+  }
+  return (
+    <>
+      <CompanysController {...CompanysControlProps} />
+    </>
+  )
+}

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

@@ -0,0 +1,142 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors?.headingColor};
+  padding: ${({ padding }) => padding || '5px 10px'};
+  white-space: nowrap;
+  ${({ isPhoneView }) => isPhoneView && css`
+    width: 100%;
+  `}
+  ${({ isRemove }) => isRemove && css`
+    color: ${props => props.theme.colors.danger};
+    padding: 3px 10px;
+    font-size: 14px;
+  `}
+
+  img {
+    width: 45px;
+    border-radius: 8px;
+  }
+
+  ${({ small }) => small && css`
+    padding: ${({ padding }) => padding || '5px 0px'};
+    img {
+      width: 25px;
+    }
+  `}
+
+  @media (max-width: 576px) {
+    padding: ${({ padding }) => padding || '5px 0px'};
+    ${({ isFilterView }) => isFilterView && css`
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    `}
+  }
+`
+
+export const OptionContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const CompanyNameContainer = styled.div`
+  line-height: 1.3;
+  color: #263238;
+`
+
+export const CompanyName = styled.p`
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: ${props => props.theme.colors.headingColor};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  margin: 0px;
+
+  ${({ small }) => small && css`
+    font-weight: 400;
+  `}
+
+  @media (max-width: 576px) {
+    max-width: 90px;
+  }
+`
+export const CompanyText = styled.span`
+  font-size: 12px;
+  color: ${props => props.theme.colors.lightGray};
+  ${({ small }) => small && css`
+    display: none;
+  `}
+`
+
+export const WrapperCompanyImage = styled.div`
+  width: 45px;
+  height: 45px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  display: flex;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  ${({ small }) => small && css`
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    svg {
+      padding: 3px;
+    }
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 8px;
+  ` : css`
+    margin-right: 8px;
+  `}
+`
+const CompanyImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 8px;
+`
+export const CompanyImage = (props) => {
+  return (
+    <CompanyImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </CompanyImageStyled>
+  )
+}
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+
+  ${({ isSingle }) => isSingle && css`
+    padding: 0px;
+    font-size: 14px;
+  `}
+`

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

@@ -13,32 +13,35 @@ const CountryFilterUI = (props) => {
 
   const [, t] = useLanguage()
 
+  const [searchValue, setSearchValue] = useState('')
+  const [countryTypes, setCountryTypes] = useState([])
+
   const placeholder = (
     <PlaceholderTitle>
       {t('SELECT_A_COUNTRY', 'Select a country')}
     </PlaceholderTitle>
   )
 
-  const [countryTypes, setCountryTypes] = useState([])
-
   useEffect(() => {
     const _countryList = []
     if (!countriesState.loading) {
-      const _groupsOption = countriesState.countries.map((country) => {
-        return {
-          value: country.code,
-          content: (
-            <Option>{country.name}</Option>
-          )
-        }
-      })
+      const _groupsOption = countriesState.countries
+        .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+        .map((country) => {
+          return {
+            value: country.code,
+            content: (
+              <Option>{country.name}</Option>
+            )
+          }
+        })
 
       for (const option of _groupsOption) {
         _countryList.push(option)
       }
     }
     setCountryTypes(_countryList)
-  }, [countriesState])
+  }, [countriesState, searchValue])
 
   return (
     <>
@@ -49,6 +52,11 @@ const CountryFilterUI = (props) => {
           options={countryTypes}
           onChange={(code) => handleChangeCountryCode(code)}
           optionInnerMaxHeight='200px'
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       ) : (
         <SkeletonWrapper>

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

@@ -0,0 +1,135 @@
+import React from 'react'
+import { CardCvcElement, CardElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js'
+import { CardForm as CardFormController, useLanguage, useValidationFields } from 'ordering-components-external'
+import { Button } from '../../../../styles'
+import {
+  FormStripe,
+  FormRow,
+  ErrorMessage,
+  FormActions,
+  CardNumberField,
+  CardExpiryCvcField,
+  CardExpiryField,
+  CardCvcField,
+  CardZipcodeField,
+  ZipcodeField
+} from './styles'
+
+const CARD_ELEMENT_OPTIONS = {
+  style: {
+    base: {
+      color: '#32325d',
+      fontSmoothing: 'antialiased',
+      fontSize: '16px',
+      '::placeholder': {
+        color: '#aab7c4'
+      }
+    },
+    invalid: {
+      color: '#fa755a',
+      iconColor: '#fa755a'
+    }
+  },
+  showIcon: true
+}
+
+const CardFormUI = (props) => {
+  const {
+    error,
+    errorExpiry,
+    errorCvc,
+    loading,
+    handleSubmit,
+    handleChange,
+    isSplitForm,
+    handleChangeExpiry,
+    handleChangeCvc,
+    errorZipcode
+  } = props
+
+  const [, t] = useLanguage()
+  const [validationFields] = useValidationFields()
+  const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
+  const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
+
+  return (
+    <>
+      <FormStripe onSubmit={handleSubmit}>
+        <FormRow>
+          {!isSplitForm ? (
+            <>
+              <CardElement
+                options={CARD_ELEMENT_OPTIONS}
+                onChange={handleChange}
+              />
+              <ErrorMessage>{error}</ErrorMessage>
+            </>
+          ) : (
+            <>
+              <CardNumberField>
+                <label>{t('CARD_NUMBER', 'Card number')}</label>
+                <CardNumberElement
+                  options={CARD_ELEMENT_OPTIONS}
+                  onChange={handleChange}
+                />
+                <ErrorMessage>{error}</ErrorMessage>
+              </CardNumberField>
+              <CardExpiryCvcField>
+                <CardExpiryField>
+                  <label>{t('EXPIRE_DATE', 'Expire date')}</label>
+                  <CardExpiryElement
+                    options={CARD_ELEMENT_OPTIONS}
+                    onChange={handleChangeExpiry}
+                  />
+                  <ErrorMessage>{errorExpiry}</ErrorMessage>
+                </CardExpiryField>
+                <CardCvcField>
+                  <label>{t('CVC', 'CVC')}</label>
+                  <CardCvcElement
+                    options={CARD_ELEMENT_OPTIONS}
+                    onChange={handleChangeCvc}
+                  />
+                  <ErrorMessage>{errorCvc}</ErrorMessage>
+                </CardCvcField>
+              </CardExpiryCvcField>
+              {zipCodeEnabled && (
+                <CardZipcodeField>
+                  <label>{t('ZIPCODE', 'Zipcode')}</label>
+                  <ZipcodeField
+                    name='zipcode'
+                    placeholder={`${t('ZIPCODE', 'Zipcode')}${zipCodeRequired ? '*' : ''}`}
+                    options={CARD_ELEMENT_OPTIONS}
+                    onChange={handleChange}
+                    pattern='[0-9]'
+                    type='number'
+                  />
+                  {errorZipcode && (
+                    <ErrorMessage>{t('ZIPCODE_IS_INCOMPLETED', 'The zipcode is incompleted.')}</ErrorMessage>
+                  )}
+                </CardZipcodeField>
+              )}
+            </>
+          )}
+        </FormRow>
+        <FormActions>
+          <Button
+            borderRadius='8px'
+            color='primary'
+            type='submit'
+            disabled={loading}
+          >
+            {loading ? t('LOADING', 'Loading...') : t('ADD_CARD', 'Add card')}
+          </Button>
+        </FormActions>
+      </FormStripe>
+    </>
+  )
+}
+
+export const CardForm = (props) => {
+  const cardFormProps = {
+    ...props,
+    UIComponent: CardFormUI
+  }
+  return <CardFormController {...cardFormProps} />
+}