ordering-ui-admin-external 1.28.1 → 1.29.3

package/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-admin-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/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/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-admin-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/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/components/Orders/CreateCustomOrder/TaxInformation/index.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-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/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/components/Orders/CreateCustomOrder/index.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-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/components/Orders/DriverSelector/index.js

@@ -62,7 +62,7 @@ const DriverSelectorUI = (props) => {
                 </OptionContent>
               </>
             ) : (
-              t('SELECT_DRIVER', 'Select driver')
+              <span>{t('SELECT_DRIVER', 'Select driver')}</span>
             )}
           </Option>
         ),
@@ -75,7 +75,7 @@ const DriverSelectorUI = (props) => {
       _driversOptionList.push({
         value: 'remove',
         content: (
-          <Option isRemove>{t('REMOVE_DRIVER', 'Remove assigned driver')}</Option>
+          <Option isRemove><span>{t('REMOVE_DRIVER', 'Remove assigned driver')}</span></Option>
         ),
         disabled: defaultValue === 'default'
       })

package/src/components/Orders/DriverSelector/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/OrderContactInformation/index.js

@@ -216,38 +216,38 @@ export const OrderContactInformation = (props) => {
       </Accordion>
       {order?.delivery_type === 1 && !isServiceOrder && (
         <>
-        {!order?.driver_id && (
-          <DriverSelectorContainer>
-            <p>{t('DRIVER_COMPANY', 'Driver company')}</p>
-            <CompanySelector
-              small
-              isPhoneView
-              defaultValue={order?.driver_company_id ?? 'default'}
-              order={order}
-              isTourOpen={isTourOpen}
-              setCurrentTourStep={setCurrentTourStep}
-              handleOpenMessages={handleOpenMessages}
-              isOrderDrivers
-              orderId={order?.id}
-            />
-          </DriverSelectorContainer>
-        )}
-        {!order?.driver_company_id && (
-          <DriverSelectorContainer>
-            <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
-            <DriverSelector
-              small
-              isPhoneView
-              defaultValue={order?.driver_id ?? 'default'}
-              order={order}
-              isTourOpen={isTourOpen}
-              setCurrentTourStep={setCurrentTourStep}
-              handleOpenMessages={handleOpenMessages}
-              isOrderDrivers
-              orderId={order?.id}
-            />
-          </DriverSelectorContainer>
-        )}
+          {!order?.driver_id && (
+            <DriverSelectorContainer>
+              <p>{t('DRIVER_COMPANY', 'Driver company')}</p>
+              <CompanySelector
+                small
+                isPhoneView
+                defaultValue={order?.driver_company_id ?? 'default'}
+                order={order}
+                isTourOpen={isTourOpen}
+                setCurrentTourStep={setCurrentTourStep}
+                handleOpenMessages={handleOpenMessages}
+                isOrderDrivers
+                orderId={order?.id}
+              />
+            </DriverSelectorContainer>
+          )}
+          {!order?.driver_company_id && (
+            <DriverSelectorContainer>
+              <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
+              <DriverSelector
+                small
+                isPhoneView
+                defaultValue={order?.driver_id ?? 'default'}
+                order={order}
+                isTourOpen={isTourOpen}
+                setCurrentTourStep={setCurrentTourStep}
+                handleOpenMessages={handleOpenMessages}
+                isOrderDrivers
+                orderId={order?.id}
+              />
+            </DriverSelectorContainer>
+          )}
           <DriverInfoContainer>
             <DriverInfo>
               <PhotoWrapper>

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

@@ -134,11 +134,6 @@ export const DriverSelectorContainer = styled.div`
     }
   }
 
-  @media (min-width: 768px) {
-    > div {
-      width: 50%;
-    }
-  }
   @media (max-width: 576px) {
     > div {
       p {

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

@@ -97,8 +97,7 @@ export const ButtonLink = styled.div`
 
 export const OrderStatus = styled.div`
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   margin: 20px 0;
 
   h2 {
@@ -117,6 +116,12 @@ export const OrderStatus = styled.div`
   ${({ isDisabled }) => isDisabled && css`
     pointer-events: none;
   `}
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 `
 export const OrderStatusSelectorWrapper = styled.div`
   min-width: 50%;

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

@@ -7,6 +7,15 @@ export const OrderStatusTypeSelectWrapper = styled.div`
 
   .orderStatus {
     width: 100%;
+
+    > div:first-child {
+      p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 200px;
+      }
+    }
   }
 
   .search-bar-container {

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

@@ -112,7 +112,7 @@ export const OrderToPrintTicket = forwardRef((props, ref) => {
         {!!order?.customer?.internal_number && (
           `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}`)}
         <br />
-        {!!order?.customer.zipcode && (
+        {!!order?.customer?.zipcode && (
         `${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}`
         )}
       </PrintTextContainer>

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

@@ -25,7 +25,7 @@ import {
 export const OrdersContentHeader = (props) => {
   const {
     isDisableTitle,
-    isDisableControl,
+    isSelectedOrders,
     title,
     handleChangeSearch,
     searchValue,
@@ -68,7 +68,7 @@ export const OrdersContentHeader = (props) => {
   return (
     <>
       <OrderContentHeaderContainer
-        isDisableControl={isDisableControl}
+        isDisableControl={isSelectedOrders}
       >
         {!isDisableTitle && (
           <HeaderSection>
@@ -104,7 +104,7 @@ export const OrdersContentHeader = (props) => {
 
           </HeaderSection>
         )}
-        <TopRightSection>
+        <TopRightSection isCustomLayout={isSelectedOrders}>
           <WebsocketStatus />
           {isShowMapsKeySettingButton && (
             <GoogleMapsApiKeySettingButton />
@@ -120,7 +120,7 @@ export const OrdersContentHeader = (props) => {
             </SLAControlsWrapper>
           )}
           <WrapperSearchAndFilter
-            fullWidth={isDisableTitle && isDisableControl}
+            fullWidth={isDisableTitle}
           >
             <SearchBar
               isCustomLayout

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

@@ -66,8 +66,11 @@ export const HeaderTitle = styled.p`
 export const TopRightSection = styled.div`
   width: 100%;
   display: flex;
-  justify-content: flex-end;
   flex-direction: column;
+  flex-wrap: wrap;
+  ${({ isCustomLayout }) => !isCustomLayout && css`
+    justify-content: flex-end;
+  `}
   
   @media (min-width: 768px) {
     flex-direction: row;
@@ -119,6 +122,8 @@ export const WrapperSearchAndFilter = styled.div`
   }
 
   @media (min-width: 992px) {
-    margin: 0px;
+    ${({ fullWidth }) => !fullWidth && css`
+      margin: 0px;
+    `}
   }
 `

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

@@ -3,6 +3,7 @@ import { useSession } from 'ordering-components-admin-external'
 import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 import { OrdersExportCSV } from '../OrdersExportCSV'
 import { OrderDelete } from '../OrderDelete'
+import { CreateCustomOrder } from '../CreateCustomOrder'
 import {
   OrderDashboardControlsContainer,
   InnerContnet,
@@ -14,7 +15,8 @@ export const OrdersDashboardControls = (props) => {
     selectedOrderNumber,
     filterValues,
     handleDeleteMultiOrders,
-    handleChangeMultiOrdersStatus
+    handleChangeMultiOrdersStatus,
+    handleOpenCustomOrderDetail
   } = props
 
   const [{ user }] = useSession()
@@ -23,6 +25,7 @@ export const OrdersDashboardControls = (props) => {
     <>
       <OrderDashboardControlsContainer>
         <InnerContnet>
+          <CreateCustomOrder handleOpenCustomOrderDetail={handleOpenCustomOrderDetail} />
           <OrdersExportCSV filterValues={filterValues} />
           {selectedOrderNumber > 0 && (
             <>