ordering-ui-external 2.0.3 → 2.1.0

package/src/themes/five/src/components/GiftCard/GiftCardUI/index.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { Modal } from '../../Modal'
+import { Button } from '../../../styles/Buttons'
+import BsGift from '@meronex/icons/bs/BsGift'
+import { PurchaseGiftCard } from '../PurchaseGiftCard'
+import { RedeemGiftCard } from '../RedeemGiftCard'
+
+import {
+  Container,
+  TitleWrapper,
+  ActionWrapper
+} from './styles'
+
+export const GiftCardUI = (props) => {
+  const [, t] = useLanguage()
+  const [openModal, setOpenModal] = useState(null)
+
+  return (
+    <Container>
+      <TitleWrapper>
+        <h1>{t('GIFT_CARD', 'Gift card')}</h1>
+        <BsGift />
+      </TitleWrapper>
+      <ActionWrapper>
+        <Button
+          color='primary'
+          onClick={() => setOpenModal('purchase')}
+        >
+          {t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+        </Button>
+        <Button
+          outline
+          color='primary'
+          className='light'
+          onClick={() => setOpenModal('redeem')}
+        >
+          {t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+        </Button>
+      </ActionWrapper>
+      <Modal
+        width='700px'
+        open={openModal === 'purchase'}
+        onClose={() => setOpenModal(null)}
+      >
+        <PurchaseGiftCard />
+      </Modal>
+      <Modal
+        width='700px'
+        open={openModal === 'redeem'}
+        onClose={() => setOpenModal(null)}
+      >
+        <RedeemGiftCard
+          onClose={() => setOpenModal(null)}
+        />
+      </Modal>
+    </Container>
+  )
+}

package/src/themes/five/src/components/GiftCard/GiftCardUI/styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin-top: 50px;
+  margin-bottom: 60px;
+`
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  h1 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+  }
+  svg {
+    margin: 0 10px;
+  }
+`
+export const ActionWrapper = styled.div`
+  display: flex;
+  > button {
+    height: 44px;
+    &:first-child {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 20px;
+      ` : css`
+        margin-right: 20px;
+      `}
+    }
+    &.light {
+      border: 1px solid ${props => props.theme.colors.primaryContrast};
+      background: ${props => props.theme.colors.primaryContrast};
+      margin: 0 20px;
+      &:hover {
+        background: ${props => props.theme.colors.primary};
+      }
+    }
+  }
+`

package/src/themes/five/src/components/GiftCard/PurchaseGiftCard/index.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import { useLanguage, PurchaseGiftCard as PurchaseGiftCardController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { Button } from '../../../styles/Buttons'
+import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
+import MdRadioButtonUnchecked from '@meronex/icons/md/MdRadioButtonUnchecked'
+
+import {
+  Container,
+  GiftCardsListContainer,
+  GiftCardItem,
+  IconControl
+} from './styles'
+
+const PurchaseGiftCardUI = (props) => {
+  const {
+    productsListState,
+    selectedProduct,
+    setSelectedProduct,
+    handleAccept
+  } = props
+  const [, t] = useLanguage()
+
+  return (
+    <Container>
+      <h2>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</h2>
+      <p>{t('SELECT_ONE_OPTION', 'Select one option')}</p>
+      <GiftCardsListContainer>
+        {productsListState.loading && (
+          [...Array(5).keys()].map(i => (
+            <GiftCardItem key={i}>
+              <Skeleton width={150} />
+            </GiftCardItem>
+          ))
+        )}
+        {productsListState.products.map(product => (
+          <GiftCardItem
+            key={product.id}
+            onClick={() => setSelectedProduct(product)}
+          >
+            <IconControl>
+              {selectedProduct?.id === product.id ? (
+                <RiRadioButtonFill />
+              ) : (
+                <MdRadioButtonUnchecked disabled />
+              )}
+            </IconControl>
+            <span>{product.name}</span>
+          </GiftCardItem>
+        ))}
+      </GiftCardsListContainer>
+      <Button
+        type='button'
+        color='primary'
+        disabled={!selectedProduct}
+        onClick={() => handleAccept()}
+      >
+        {t('ACCEPT', 'Accept')}
+      </Button>
+    </Container>
+  )
+}
+
+export const PurchaseGiftCard = (props) => {
+  const purchaseGiftCardProps = {
+    ...props,
+    UIComponent: PurchaseGiftCardUI
+  }
+  return <PurchaseGiftCardController {...purchaseGiftCardProps} />
+}

package/src/themes/five/src/components/GiftCard/PurchaseGiftCard/styles.js

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 24px;
+  }
+  > p {
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+  }
+  > button {
+    height: 44px;
+  }
+`
+export const GiftCardsListContainer = styled.div`
+  margin-bottom: 40px;
+`
+export const GiftCardItem = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${props => props.theme.colors.gray200};
+  padding: 20px 0;
+
+  > span {
+    font-size: 16px;
+  }
+`
+export const IconControl = styled.div`
+  display: flex;
+  color: ${props => props.theme.colors.primary};
+  margin-right: 40px;
+  ${props => props.theme?.rtl && css`
+    margin-left: 40px;
+    margin-right: 0px;
+  `}
+  svg {
+    font-size: 24px;
+  }
+
+  svg[disabled] {
+    color: ${props => props.theme.colors.lightGray};
+  }
+`

package/src/themes/five/src/components/GiftCard/RedeemGiftCard/index.js

@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController } from 'ordering-components-external'
+import { useForm } from 'react-hook-form'
+import { Alert } from '../../Confirm'
+import { Button } from '../../../styles/Buttons'
+import { Input } from '../../../styles/Inputs'
+
+import {
+  Container,
+  FormContainer,
+  FormController,
+  GiftCardInfoContainer
+} from './styles'
+
+const RedeemGiftCardUI = (props) => {
+  const {
+    actionState,
+    redeemedGiftCard,
+    handleApply,
+    onClose
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+  const { register, handleSubmit, errors } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const onSubmit = (values) => {
+    handleApply(values)
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (!actionState.error) return
+    setAlertState({
+      open: true,
+      content: actionState.error
+    })
+  }, [actionState.error])
+
+  return (
+    <Container>
+      {!redeemedGiftCard ? (
+        <FormContainer onSubmit={handleSubmit(onSubmit)}>
+          <h2>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</h2>
+          <FormController>
+            <label>{t('GIFT_CARD_CODE', 'Gift card code')}</label>
+            <Input
+              name='code'
+              placeholder='0000 0000'
+              type='text'
+              ref={register({
+                required: t('VALIDATION_ERROR_REQUIRED', 'Code is required').replace('_attribute_', t('CODE', 'Code'))
+              })}
+              autoComplete='off'
+            />
+          </FormController>
+          <FormController>
+            <label>{t('PASSWORD', 'Password')}</label>
+            <Input
+              name='password'
+              type='password'
+              ref={register({
+                required: t('VALIDATION_ERROR_REQUIRED', 'Password is required').replace('_attribute_', t('PASSWORD', 'Password'))
+              })}
+              autoComplete='new-password'
+            />
+          </FormController>
+          <Button
+            type='submit'
+            color='primary'
+            disabled={actionState.loading}
+          >
+            {actionState?.loading ? t('LOADING', 'Loading') : t('APPLY_TO_YOUR_BALANCE', 'Apply to your balance')}
+          </Button>
+          <Alert
+            title={t('ERROR', 'Error')}
+            content={alertState.content}
+            acceptText={t('ACCEPT', 'Accept')}
+            open={alertState.open}
+            onClose={() => setAlertState({ open: false, content: [] })}
+            onAccept={() => setAlertState({ open: false, content: [] })}
+            closeOnBackdrop={false}
+          />
+        </FormContainer>
+      ) : (
+        <>
+          <h2>{t('GIFT_CARD', 'Gift card')}</h2>
+          <GiftCardInfoContainer>
+            <p>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</p>
+            <p>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</p>
+            <p>{t('FROM', 'From')}: {redeemedGiftCard?.receiver?.name} {redeemedGiftCard?.receiver?.lastname}</p>
+            <p>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</p>
+            <p>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</p>
+            <Button
+              color='primary'
+              onClick={() => onClose()}
+            >
+              {t('OK', 'Ok')}
+            </Button>
+          </GiftCardInfoContainer>
+        </>
+      )}
+    </Container>
+  )
+}
+
+export const RedeemGiftCard = (props) => {
+  const redeemGiftCardProps = {
+    ...props,
+    UIComponent: RedeemGiftCardUI
+  }
+  return <RedeemGiftCardController {...redeemGiftCardProps} />
+}

package/src/themes/five/src/components/GiftCard/RedeemGiftCard/styles.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 48px;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 18px;
+    margin: 6px 0;
+    color: ${props => props.theme.colors.darkGray};
+  }
+
+  button {
+    height: 44px;
+    margin-top: 50px;
+  }
+`
+export const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+`
+export const FormController = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 28px;
+
+  label {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+`
+export const GiftCardInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`

package/src/themes/five/src/components/GiftCard/SendGiftCard/index.js

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, SendGiftCard as SendGiftCardController } from 'ordering-components-external'
+import { useForm } from 'react-hook-form'
+import { Alert } from '../../Confirm'
+import { Button } from '../../../styles/Buttons'
+import { Input, TextArea } from '../../../styles/Inputs'
+import {
+  Container,
+  FormController
+} from './styles'
+
+const SendGiftCardUI = (props) => {
+  const {
+    actionState,
+    handleSendGiftCard
+  } = props
+  const [, t] = useLanguage()
+  const { register, handleSubmit, errors } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const onSubmit = (values) => {
+    handleSendGiftCard(values)
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  return (
+    <Container onSubmit={handleSubmit(onSubmit)}>
+      <h2>{t('GIFT_CARD_DETAILS', 'Gift Card details')}</h2>
+      <FormController>
+        <label>{t('TO', 'To')}</label>
+        <Input
+          name='email'
+          placeholder={t('ENTER_AN_EMAIL', 'Enter an email')}
+          ref={register({
+            required: t('VALIDATION_ERROR_REQUIRED', 'To email is required').replace('_attribute_', t('EMAIL', 'EMail'))
+          })}
+          autoComplete='off'
+        />
+      </FormController>
+      <FormController>
+        <label>{t('FROM', 'From')}</label>
+        <Input
+          name='user_name'
+          ref={register()}
+          placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+          autoComplete='off'
+        />
+      </FormController>
+      <FormController>
+        <label>{t('TITLE', 'Title')}</label>
+        <Input
+          name='title'
+          ref={register()}
+          placeholder={t('TITLE', 'Title')}
+          autoComplete='off'
+        />
+      </FormController>
+      <FormController>
+        <label>{t('MESSAGES', 'Messages')}</label>
+        <TextArea
+          name='message'
+          ref={register()}
+          rows={5}
+          placeholder={t('TYPE_YOUR_MESSAGE_HERE', 'Type your message here')}
+          autoComplete='off'
+        />
+      </FormController>
+      <Button
+        type='submit'
+        color='primary'
+        disabled={actionState.loading}
+      >
+        {actionState?.loading ? t('LOADING', 'Loading') : t('SEND_GIFT_CARD', 'Send gift card')}
+      </Button>
+      <Alert
+        title={t('ERROR', 'Error')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </Container>
+  )
+}
+
+export const SendGiftCard = (props) => {
+  const sendGiftCardProps = {
+    ...props,
+    showToastMsg: true,
+    UIComponent: SendGiftCardUI
+  }
+  return <SendGiftCardController {...sendGiftCardProps} />
+}

package/src/themes/five/src/components/GiftCard/SendGiftCard/styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+export const Container = styled.form`
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 25px 20px;
+  h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: 0;
+    margin-bottom: 32px;
+  }
+  > button {
+    height: 44px;
+    margin-top: 30px;
+  }
+`
+export const FormController = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 28px;
+
+  label {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+`

package/src/themes/five/src/components/HorizontalOrdersLayout/index.js

@@ -28,11 +28,14 @@ export const HorizontalOrdersLayout = (props) => {
 
   const [, t] = useLanguage()
 
-  const ordersToShow = businessesIds
+  const ordersToShow = businessesIds && isCustomerMode
     ? orders.filter(order =>
-      businessesIds?.includes(order?.business_id) ||
-      JSON.stringify(businessesIds.sort((a, b) => a - b)) === JSON.stringify(order?.business?.map(business => business?.id).sort((a, b) => a - b)))
-    : orders
+      businessesIds?.includes(order?.business_id))
+    : businessesIds
+      ? orders.filter(order =>
+        businessesIds?.includes(order?.business_id) ||
+        JSON.stringify(businessesIds.sort((a, b) => a - b)) === JSON.stringify(order?.business?.map(business => business?.id).sort((a, b) => a - b)))
+      : orders
 
   const notOrders = isProducts || isBusiness
 

package/src/themes/five/src/components/HorizontalOrdersLayout/styles.js

@@ -21,7 +21,6 @@ export const CardWrapper = styled.div`
 `
 export const CardsContainer = styled.div`
   display: flex;
-  justify-content: space-between;
   overflow-x: auto;
 `
 

package/src/themes/five/src/components/LoginForm/index.js

@@ -346,6 +346,12 @@ const LoginFormUI = (props) => {
     }
   }, [recaptchaConfig])
 
+  const preventWhiteSpaceOnKeyDown = (e) => {
+    if (e.key === " ") {
+      e.preventDefault()
+    }
+  }
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -473,6 +479,7 @@ const LoginFormUI = (props) => {
                         : null,
                       pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                     })}
+                    onKeyDown={preventWhiteSpaceOnKeyDown}
                     onChange={handleChangeInputEmail}
                     autoComplete='on'
                     isError={formMethods.errors?.email}

package/src/themes/five/src/components/OrderDetails/OrderEta.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import { useUtils } from 'ordering-components-external'
+import moment from 'moment'
+
+export const OrderEta = (props) => {
+  const {
+    order,
+    outputFormat
+  } = props
+
+  const [{ parseDate }] = useUtils()
+  const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
+
+  const getEstimatedDeliveryTime = () => {
+    let _estimatedTime
+    let totalEta = 0
+    const _delivery = order?.delivery_datetime_utc
+      ? parseDate(order?.delivery_datetime_utc)
+      : parseDate(order?.delivery_datetime)
+    if (order?.eta_current_status_time) {
+      const currentStatueEta = order?.eta_current_status_time
+      totalEta += currentStatueEta
+      let nextStatusTimes = 0
+      if (order?.eta_next_status_times) {
+        Object.keys(order.eta_next_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            nextStatusTimes += order.eta_next_status_times[key]
+          }
+        })
+      }
+
+      totalEta += nextStatusTimes
+
+      const diffTimeAsSeconds = moment.utc(order?.reporting_data?.at[`status:${order.status}`]).add(order?.eta_current_status_time, 'minutes').diff(moment().utc(), 'seconds')
+      const diffTimeAsMinutes = Math.ceil(diffTimeAsSeconds / 60)
+      if (diffTimeAsMinutes <= 0) {
+        totalEta += (Math.floor(Math.abs(diffTimeAsMinutes / order?.eta_current_status_time) + 1) * order?.eta_current_status_penalty_time)
+      }
+      _estimatedTime = parseDate(moment(_delivery).add(totalEta, 'minutes'))
+    } else {
+      _estimatedTime = parseDate(moment(_delivery).add(order?.eta_time, 'minutes'))
+    }
+    setEstimatedDeliveryTime(_estimatedTime)
+  }
+
+  useEffect(() => {
+    getEstimatedDeliveryTime()
+    const interval = setInterval(() => {
+      getEstimatedDeliveryTime()
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [order])
+
+  return (
+    <>
+      {!outputFormat ? estimatedDeliveryTime : moment(estimatedDeliveryTime).format(outputFormat)}
+    </>
+  )
+}