ordering-ui-admin-external 1.28.1 → 1.29.3

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
-import { UsersList as UsersListController } from 'ordering-components-admin-external'
+import { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { getStorageItem, removeStorageItem, setStorageItem } from '../../../utils'
 
 import { UsersListingHeader } from '../UsersListingHeader'
@@ -10,7 +10,7 @@ import { UserActiveStateFilter } from '../UserActiveStateFilter'
 import { UserDetailsLateralBar } from '../UserDetailsLateralBar'
 import { UserAddForm } from '../UserAddForm'
 import { WizardDelivery } from '../WizardDelivery'
-import { SideBar } from '../../Shared'
+import { Alert, SideBar } from '../../Shared'
 
 import {
   UsersListingContainer
@@ -39,6 +39,7 @@ const DeliveryUsersListingUI = (props) => {
     handleChangeUserActiveState,
     handleChangeUserType,
     handleChangeActiveUser,
+    handleChangeAvailable,
     handleDeleteUser,
     selectedUsers,
     handleSelectedUsers,
@@ -50,15 +51,18 @@ const DeliveryUsersListingUI = (props) => {
     handleSuccessDeleteUser,
     actionDisabled,
     driversGroupsState,
-    setSelectedUsers
+    setSelectedUsers,
+    actionStatus
   } = props
 
+  const [, t] = useLanguage()
   const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
   const [openUser, setOpenUser] = useState(null)
   const [openUserAddForm, setOpenUserAddForm] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const [isTourOpen, setIsTourOpen] = useState(false)
   const [currentTourStep, setCurrentTourStep] = useState(isDriversManagersPage ? 2 : 0)
@@ -149,6 +153,14 @@ const DeliveryUsersListingUI = (props) => {
     getDataFromStorage()
   }, [usersList.loading])
 
+  useEffect(() => {
+    if (!actionStatus?.error) return
+    setAlertState({
+      open: true,
+      content: actionStatus?.error
+    })
+  }, [actionStatus?.error])
+
   return (
     <>
       <UsersListingContainer>
@@ -189,6 +201,7 @@ const DeliveryUsersListingUI = (props) => {
           paginationDetail={paginationDetail}
           handleChangeUserType={handleChangeUserType}
           handleChangeActiveUser={handleChangeActiveUser}
+          handleChangeAvailable={handleChangeAvailable}
           handleDeleteUser={handleDeleteUser}
           selectedUsers={selectedUsers}
           handleSelectedUsers={handleSelectedUsers}
@@ -240,6 +253,16 @@ const DeliveryUsersListingUI = (props) => {
           currentStep={currentTourStep}
         />
       )}
+
+      <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}
+      />
     </>
   )
 }

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

@@ -63,6 +63,12 @@ export const DriversGroupLogsUI = (props) => {
     getDriversGroupLogs(expectedPage, pageSize)
   }
 
+  const getValidLogData = (data) => {
+    return typeof data === 'object'
+      ? Object.values(data)
+      : typeof data === 'string' ? JSON.parse(data) : data
+  }
+
   useEffect(() => {
     if (logsList.loading || logsList.logs.length > 0 || paginationProps.totalPages <= 1) return
     if (paginationProps.currentPage !== paginationProps.totalPages) {
@@ -133,12 +139,12 @@ export const DriversGroupLogsUI = (props) => {
                       </td>
                       <td>
                         <EventTypeContainer>
-                          <p>{t(log?.event)}</p>
+                          <p>{t((log?.event || '').toUpperCase())}</p>
                         </EventTypeContainer>
                       </td>
                       <td>
                         <DataListTable>
-                          {log?.data && (typeof log?.data === 'object' ? Object.values(log?.data) : log?.data).map((item, i) => (
+                          {log?.data && getValidLogData(log?.data).map((item, i) => (
                             <tbody key={i}>
                               <tr>
                                 <td>{getAttributeName(item?.attribute)}</td>

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

@@ -23,7 +23,8 @@ import {
   UsersBottomContainer,
   VerifiedItemsContainer,
   VerifiedItem,
-  UserIdWrapper
+  UserIdWrapper,
+  ActionsContainer
 } from './styles'
 
 export const UsersList = (props) => {
@@ -40,7 +41,8 @@ export const UsersList = (props) => {
     isDriversPage,
     isDriversManagersPage,
     actionDisabled,
-    setSelectedUsers
+    setSelectedUsers,
+    handleChangeAvailable
   } = props
 
   const [, t] = useLanguage()
@@ -50,7 +52,7 @@ export const UsersList = (props) => {
   const [isAllChecked, setIsAllChecked] = useState(false)
 
   const onChangeUserDetails = (e, user) => {
-    const isInvalid = e.target.closest('.user_checkbox') || e.target.closest('.user_type_selector') || e.target.closest('.user_enable_control') || e.target.closest('.user_action')
+    const isInvalid = e.target.closest('.user_checkbox') || e.target.closest('.user_type_selector') || e.target.closest('.user_enable_control') || e.target.closest('.user_action') || e.target.closest('.user_available_control')
     if (isInvalid) return
     handleOpenUserDetails(user)
   }
@@ -253,15 +255,28 @@ export const UsersList = (props) => {
                       </InfoBlock>
                     </td>
                     <td>
-                      <UserEnableWrapper className='user_enable_control'>
-                        <span>{t('ENABLE', 'Enable')}</span>
-                        <Switch
-                          disabled={actionDisabled}
-                          notAsync={user.level === 0}
-                          defaultChecked={user?.enabled}
-                          onChange={enabled => handleEnable(user, enabled)}
-                        />
-                      </UserEnableWrapper>
+                      <ActionsContainer>
+                        <UserEnableWrapper className='user_enable_control'>
+                          <span>{t('ENABLE', 'Enable')}</span>
+                          <Switch
+                            disabled={actionDisabled}
+                            notAsync={user.level === 0}
+                            defaultChecked={user?.enabled}
+                            onChange={enabled => handleEnable(user, enabled)}
+                          />
+                        </UserEnableWrapper>
+                        {isDriversPage && (
+                          <UserEnableWrapper className='user_available_control'>
+                            <span>{t('AVAILABLE', 'Available')}</span>
+                            <Switch
+                              disabled={actionDisabled}
+                              notAsync
+                              defaultChecked={user?.available}
+                              onChange={available => handleChangeAvailable({ id: user.id, available: available })}
+                            />
+                          </UserEnableWrapper>
+                        )}
+                      </ActionsContainer>
                     </td>
                   </tr>
                 </tbody>

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

@@ -17,6 +17,9 @@ export const UsersTable = styled.table`
   td, th {
     padding: 10px 0;
     font-size: 14px;
+    &:last-child {
+      width: 20%;
+    }
   }
 
   thead {
@@ -246,3 +249,16 @@ export const UserIdWrapper = styled.div`
   display: flex;
   align-items: center;
 `
+export const ActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  > div {
+    &:not(:first-child) {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 25px;
+      ` : css`
+        margin-left: 25px;
+      `}
+    }
+  }
+`

package/src/components/Home/HomePage/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useUtils, useEvent, useSession, useApi, Home as HomeController } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useEvent, useSession, useApi, Home as HomeController, useConfig } from 'ordering-components-admin-external'
 import { Line } from 'react-chartjs-2'
 import moment from 'moment'
 import { IconButton, Button } from '../../../styles/Buttons'
@@ -59,6 +59,7 @@ const HomeUI = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [timeAxes, setTimeAxes] = useState([])
   const [events] = useEvent()
@@ -280,7 +281,7 @@ const HomeUI = (props) => {
                     <Button
                       color='primary'
                       borderRadius='8px'
-                      onClick={() => window.open(`https://${ordering?.project}.tryordering.com`, '_blank')}
+                      onClick={() => window.open(configs?.site_url?.value || `https://${ordering?.project}.tryordering.com`, '_blank')}
                     >
                       {t('VISIT_MY_WEBSITE', 'Visit my Website')}
                     </Button>

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

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react'
-import { useLanguage, ExamineClick, DragAndDrop, useApi, OrderingWebsite as OrderingWebsiteController } from 'ordering-components-admin-external'
+import { useLanguage, ExamineClick, DragAndDrop, useConfig, useApi, OrderingWebsite as OrderingWebsiteController } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { useLocation } from 'react-router-dom'
 import { Button, IconButton, Input, TextArea } from '../../../styles'
@@ -75,6 +75,7 @@ const OrderingWebsiteUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const theme = useTheme()
   const [ordering] = useApi()
@@ -228,7 +229,7 @@ const OrderingWebsiteUI = (props) => {
               <Button
                 color='primary'
                 borderRadius='8px'
-                onClick={() => window.open(`https://${ordering?.project}.tryordering.com`, '_blank')}
+                onClick={() => window.open(configs?.site_url?.value || `https://${ordering?.project}.tryordering.com`, '_blank')}
               >
                 {t('VISIT_MY_WEBSITE', 'Visit My Website')}
               </Button>
@@ -345,14 +346,14 @@ const OrderingWebsiteUI = (props) => {
                   {orderingTheme?.loading ? (
                     <Skeleton height={40} style={{ width: '100%' }} />
                   ) : (
-                        <Button
-                          color='primary'
-                          outline
-                          borderRadius='8px'
+                    <Button
+                      color='primary'
+                      outline
+                      borderRadius='8px'
                       onClick={() => window.open('https://www.ordering.co/custom-domain-change', '_blank')}
-                        >
+                    >
                       {t('REQUEST_CUSTOM_DOMAIN', 'Request custom domain')}
-                        </Button>
+                    </Button>
                     // <>
                     //   {site?.domain && site?.ssl_status !== 'error' && (
                     //     <TemporalDomail isDisabled={site?.ssl_process_status === 'pending'} marginBottom={site?.ssl_process_status === 'ended'}>

package/src/components/OrderingProducts/SiteTheme/index.js

@@ -147,7 +147,7 @@ const SiteThemeUI = (props) => {
                     {!!themeStructure[selectedPage]?.components && (
                     Object.keys(themeStructure[selectedPage]?.components)?.map(block => {
                       const components = themeStructure[selectedPage].components
-                      return (
+                      return block !== 'birthday' && (
                         <BlockContainer key={block}>
                           <h3>{getTitle(block)}</h3>
                           {(block === 'image' || block === 'dummy_image') && components[block]?.value_type === 'string' && (

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

@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, 
-  DriversList as CompanysController
- } from 'ordering-components-admin-external'
+import { useLanguage, DriversList as CompanysController } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { Select } from '../../../styles/Select'
 import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
@@ -65,7 +63,7 @@ const CompanySelectorUI = (props) => {
                 </OptionContent>
               </>
             ) : (
-              t('SELECT_COMPANY', 'Select company')
+              <span>{t('SELECT_COMPANY', 'Select company')}</span>
             )}
           </Option>
         ),
@@ -78,7 +76,7 @@ const CompanySelectorUI = (props) => {
       _companysOptionList.push({
         value: 'remove',
         content: (
-          <Option isRemove>{t('REMOVE_COMPANY', 'Remove assigned company')}</Option>
+          <Option isRemove><span>{t('REMOVE_COMPANY', 'Remove assigned company')}</span></Option>
         ),
         disabled: defaultValue === 'default'
       })
@@ -173,7 +171,7 @@ const CompanySelectorUI = (props) => {
             defaultValue='default'
             options={companysLoading}
             optionInnerMargin='10px'
-            optionInnerMaxHeight='150px' 
+            optionInnerMaxHeight='150px'
             className='driver-select'
             isShowSearchBar
             searchBarIsCustomLayout

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

@@ -28,6 +28,13 @@ export const Option = styled.div`
     }
   `}
 
+  span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 350px;
+  }
+
   @media (max-width: 576px) {
     padding: ${({ padding }) => padding || '5px 0px'};
     ${({ isFilterView }) => isFilterView && css`
@@ -37,6 +44,9 @@ export const Option = styled.div`
         margin-left: 10px;
       `}
     `}
+    span {
+      max-width: 280px;
+    }
   }
 `
 

package/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-admin-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} />
+}

package/src/components/Orders/CreateCustomOrder/CardForm/styles.js

@@ -0,0 +1,135 @@
+import styled, { css } from 'styled-components'
+
+export const FormStripe = styled.form`
+  display: flex;
+  flex-direction: column;
+
+  .StripeElement,
+  .StripeElementIdeal {
+    display: block;
+    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 CardExpiryField = styled.div`
+  color: #ADB2B9;
+`
+
+export const CardCvcField = styled.div`
+  color: #ADB2B9;
+`
+
+export const CardZipcodeField = styled.div`
+  color: #ADB2B9;
+`
+
+export const CardNumberField = styled.div`
+  width: 100%;
+  color: #ADB2B9;
+`
+export const CardExpiryCvcField = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+`
+
+export const FormRow = styled.div`
+  input {
+    display: block;
+    border: none;
+    font-size: 18px;
+    margin: 10px 0 20px 0;
+    max-width: 100%;
+    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;
+    color: #424770;
+    letter-spacing: 0.025em;
+    width: 500px;
+  }
+
+  input::placeholder {
+    color: #aab7c4;
+  }
+`
+
+export const ErrorMessage = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  color: #D81212;
+  margin: 10px 0px 0px 10px;
+  ${props => props.theme?.rtl && css`
+    margin: 10px 10px 0px 0px
+  `}
+`
+
+export const FormActions = styled.div`
+  width: 100%;
+  margin-top: 20px;
+
+  button {
+    height: 44px;
+    width: 100%;
+    border-radius: 7.6px;
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+`
+
+export const ZipcodeField = styled.input`
+  font-weight: 500;
+  font-size: 16px;
+  box-sizing: border-box;
+  width: 100% !important;
+  &:-webkit-autofill {
+    color: '#fce883'
+  }
+  &::placeholder {
+    font-weight: 500
+  }
+  &: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;
+  }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  &[type=number] {
+    -moz-appearance: textfield;
+  }
+  
+`