ordering-ui-external 2.0.4 → 2.1.1

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

@@ -1,107 +1,61 @@
 import React from 'react'
-import { useLanguage } from 'ordering-components-external'
 import {
-  Card,
   CardWrapper,
   CardsContainer
 } from './styles'
 import { OrdersContainer } from '../OrdersOption/styles'
 
-import { Button } from '../../styles/Buttons'
 import { SingleOrderCard } from '../SingleOrderCard'
 import { Pagination } from '../Pagination'
 
 export const HorizontalOrdersLayout = (props) => {
   const {
     pagination,
-    loadMoreOrders,
     isBusinessesPage,
     customArray,
     businessesIds,
     isCustomerMode,
-    isProducts,
-    isBusiness,
     handleChangePage
   } = props
 
   const orders = customArray || props.orders
 
-  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
-
-  const notOrders = isProducts || isBusiness
-
-  const Orders = () => {
-    return (
-      <>
-        {props.beforeElements?.map((BeforeElement, i) => (
-          <React.Fragment key={i}>
-            {BeforeElement}
-          </React.Fragment>))}
-        {props.beforeComponents?.map((BeforeComponent, i) => (
-          <BeforeComponent key={i} {...props} />))}
-        {orders.length > 0 && !notOrders && ordersToShow.map(order => (
-          <SingleOrderCard
-            {...props}
-            key={order.id}
-            order={order}
-          />
-        ))}
-        {pagination?.totalPages && !notOrders && pagination?.currentPage < pagination?.totalPages && !notOrders && (
-          <Card
-            flex
-            nobg
-            isBusinessesPage={isBusinessesPage}
-            isCustomerMode={isCustomerMode}
-          >
-            <Button
-              className='load-orders'
-              color='primary'
-              outline
-              onClick={loadMoreOrders}
-            >
-              {t('LOAD_MORE_ORDERS', 'Load more orders')}
-            </Button>
-          </Card>
-        )}
-        {props.afterComponents?.map((AfterComponent, i) => (
-          <AfterComponent key={i} {...props} />))}
-        {props.afterElements?.map((AfterElement, i) => (
-          <React.Fragment key={i}>
-            {AfterElement}
-          </React.Fragment>))}
-      </>
-    )
-  }
+      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
 
   return (
-    <OrdersContainer
-      id='orders-container'
-      activeOrders
-      ordersLength={orders?.length <= 1}
-      isBusinessesPage={isBusinessesPage}
-    >
-      <CardWrapper>
-        <CardsContainer>
-          {orders.length > 0 && ordersToShow.map(order => (
-            <SingleOrderCard
-              {...props}
-              key={order.id || order.id?.[0]}
-              order={order}
+    orders.length > 0 && ordersToShow.length > 0 ? (
+      <OrdersContainer
+        id='orders-container'
+        activeOrders
+        ordersLength={orders?.length <= 1}
+        isBusinessesPage={isBusinessesPage}
+      >
+        <CardWrapper>
+          <CardsContainer>
+            {orders.length > 0 && ordersToShow.map((order, i) => (
+              <SingleOrderCard
+                {...props}
+                key={order.id || order.id?.[0] || i}
+                order={order}
+              />
+            ))}
+          </CardsContainer>
+          {orders.length > 0 && ordersToShow.length > 0 && (
+            <Pagination
+              currentPage={pagination.currentPage}
+              totalPages={Math.ceil(pagination?.totalPages)}
+              handleChangePage={handleChangePage}
             />
-          ))}
-        </CardsContainer>
-        <Pagination
-          currentPage={pagination.currentPage}
-          totalPages={Math.ceil(pagination?.totalPages)}
-          handleChangePage={handleChangePage}
-        />
-      </CardWrapper>
-    </OrdersContainer>
+          )}
+        </CardWrapper>
+      </OrdersContainer>
+    ) : null
   )
 }

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}