ordering-ui-external 10.0.1 → 10.2.0

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

@@ -0,0 +1,83 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useUtils, useLanguage } from 'ordering-components-external'
+import { Input } from '../../../../styles'
+
+import {
+  PaymentCashContainer,
+  FormCash,
+  WrapperInput,
+  ErrorText
+} from './styles'
+
+export const PaymentOptionCash = (props) => {
+  const {
+    defaultValue,
+    orderTotal,
+    onChangeData,
+    setErrorCash
+  } = props
+  const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+
+  const [value, setvalue] = useState(defaultValue)
+  const el = useRef()
+  let timeout = null
+  const onChangeCash = (e) => {
+    if (!/^(?=.)([+-]?([0-9]*)(\.([0-9]+))?)$/.test(e?.target?.value)) return
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      let cash = parseFloat(e?.target?.value)
+      cash = isNaN(cash) ? null : cash
+      setvalue(cash)
+      if (cash >= orderTotal || !cash) {
+        onChangeData && onChangeData({ cash })
+      }
+    }, 1000)
+  }
+
+  useEffect(() => {
+    el.current.onkeyup = onChangeCash
+  }, [])
+
+  useEffect(() => {
+    el.current.value = value || ''
+  }, [value])
+
+  useEffect(() => {
+    if (value && parseFloat(value) < orderTotal) {
+      setErrorCash && setErrorCash(true)
+    } else {
+      setErrorCash && setErrorCash(false)
+    }
+  }, [value, orderTotal])
+
+  return (
+    <>
+      <PaymentCashContainer>
+        <FormCash>
+          <WrapperInput>
+            <label>{t('NOT_EXACT_CASH_AMOUNT', 'Don\'t have exact amount? Let us know with how much will you pay')}</label>
+            <Input
+              ref={el}
+              name='cash'
+              type='text'
+              placeholder='$0.00'
+              onKeyPress={(e) => {
+                if (!/^[0-9 .]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+            />
+          </WrapperInput>
+          {value && parseFloat(value) < orderTotal && (
+            <ErrorText>{t('VALUE_GREATER_THAN_TOTAL', 'This value must be greater than order total')}: {parsePrice(orderTotal)}</ErrorText>
+          )}
+        </FormCash>
+      </PaymentCashContainer>
+    </>
+  )
+}
+
+PaymentOptionCash.defaultProps = {
+  defaultValue: null
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/PaymentOptionCash/styles.js

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components'
+
+export const PaymentCashContainer = styled.div`
+  margin: 20px 0px 0px;
+`
+
+export const FormCash = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  label {
+    font-size: 16px;
+    margin-right: 20px;
+    ${props => props.theme?.rtl && css`
+        margin-left: 20px;
+        margin-right: 0;
+    `}
+  }
+
+  @media (min-width: 381px) {
+    label {
+      font-size: 18px;
+    }
+  }
+`
+
+export const WrapperInput = styled.div`
+  width: 100%;
+  label {
+    font-size: 16px;
+  }
+  
+  input {
+    margin-top: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    height: 44px;
+  }
+`
+
+export const ErrorText = styled.p`
+  margin: 10px 0px 0px;
+  color: #D81212;
+  font-size: 14px;
+  font-weight: bold;
+
+  @media (min-width: 381px) {
+    font-size: 20px;
+  }
+`

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { PaymentOptionPaypal as PaymentPaypalController, useConfig } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { Container } from './styles'
+
+const PaymentOptionPaypalUI = (props) => {
+  const {
+    isSdkReady,
+    PaypalButton,
+    noAuthMessage,
+    paypalButtonProps
+  } = props
+
+  return (
+    <>
+      <Container>
+        {noAuthMessage ? (
+          <p>{noAuthMessage}</p>
+        ) : (
+          isSdkReady ? (
+            PaypalButton && <PaypalButton {...paypalButtonProps} />
+          ) : (
+            <div>
+              <Skeleton count={3} height={55} />
+            </div>
+          )
+        )}
+      </Container>
+    </>
+  )
+}
+
+export const PaymentOptionPaypal = (props) => {
+  const [{ configs }] = useConfig()
+  const paymentPaypalProps = {
+    ...props,
+    UIComponent: PaymentOptionPaypalUI,
+    currency: configs?.stripe_currency?.value
+  }
+  return (
+    <PaymentPaypalController {...paymentPaypalProps} />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/PaymentOptionPaypal/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  margin: 0 auto;
+`

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

@@ -0,0 +1,105 @@
+import React from 'react'
+import { PaymentOptionSquare as PaymentOptionSquareController, useLanguage } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { Alert, SpinnerLoader } from '../../../Shared'
+import { Tabs, Tab, Button } from '../../../../styles'
+import { Container, Spinner, PaymentSquareContainer } from './styles'
+
+const PaymentOptionSquareUI = (props) => {
+  const {
+    paymentMethods,
+    methodSelected,
+    handleChangeMethodSelected,
+    isLoading,
+    isLoadingMethod,
+    alertState,
+    setAlertState,
+    isLoadingPlace
+  } = props
+
+  const [, t] = useLanguage()
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  return (
+    <PaymentSquareContainer>
+      {isLoading && (
+        [...Array(3).keys()].map(i => (
+          <div key={i}>
+            <Skeleton height={50} />
+          </div>
+        ))
+      )}
+      {!isLoading && (
+        <>
+          <Tabs>
+            {paymentMethods.map(method => (
+              <Tab key={method?.value} disabled={methodSelected === method?.value} active={methodSelected === method?.value} onClick={() => handleChangeMethodSelected(method?.value)}>
+                {method?.name}
+              </Tab>
+            ))}
+          </Tabs>
+          {isLoadingMethod && methodSelected && (
+            [...Array(3).keys()].map(i => (
+              <div key={i}>
+                <Skeleton height={50} />
+              </div>
+            ))
+          )}
+          <Container isLoading={isLoadingMethod || isLoadingPlace}>
+            {methodSelected === 'card_payments' && (
+              <>
+                <div id='card-container' />
+                <Button borderRadius='8px' color='primary' id='card-button' type='button'>
+                  {t('ACCEPT', 'Accept')}
+                </Button>
+              </>
+            )}
+            {methodSelected === 'ach_bank_transfer' && (
+              <Button borderRadius='8px' color='primary' id='ach-button' type='button'>
+                {t('PAY_WITH_BANK_ACCOUNT', 'Pay with Bank Account')}
+              </Button>
+            )}
+            {methodSelected === 'gift_cards' && (
+              <form>
+                <div id='gift-card-container' />
+                <button id='gift-card-button' type='button'>{t('PAY_WITH_GIFT_CARD', 'Pay with Gift Card')}</button>
+              </form>
+            )}
+            {isLoadingPlace && (
+              <Spinner>
+                <SpinnerLoader
+                  style={{ height: 100 }}
+                />
+              </Spinner>
+            )}
+          </Container>
+        </>
+      )}
+      <Alert
+        title={t('SQUARE_ERROR', 'Square Error')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </PaymentSquareContainer>
+  )
+}
+
+export const PaymentOptionSquare = (props) => {
+  const paymentPaypalProps = {
+    ...props,
+    UIComponent: PaymentOptionSquareUI
+  }
+  return (
+    <PaymentOptionSquareController {...paymentPaypalProps} />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/PaymentOptionSquare/styles.js

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  margin-top: 20px;
+  button{
+    width: 100%;
+    height: 40px
+    ${({ isLoading }) => isLoading && css`
+      pointer-events: none;
+    `}
+  }
+`
+export const Spinner = styled.div`
+  position: absolute;
+  top: 0;
+  left: 50%;
+  right: 50%;
+  transform: translateY(75%);
+`
+
+export const PaymentSquareContainer = styled.div`
+  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`

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

@@ -0,0 +1,261 @@
+import React, { useState, useEffect, useRef } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import {
+  PaymentOptionStripe as PaymentOptionStripeController,
+  useSession,
+  useLanguage,
+  useValidationFields
+} from 'ordering-components-external'
+import { StripeElementsForm } from '../StripeElementsForm'
+
+import IosRadioButtonOn from '@meronex/icons/ios/IosRadioButtonOn'
+import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
+import { Trash } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+
+import { Confirm, Modal, NotFoundSource } from '../../../Shared'
+import { getIconCard } from '../../../../../../../utils'
+
+import {
+  OptionStripeContainer,
+  WarningMessage,
+  CardItem,
+  CardItemContent,
+  CardItemActions,
+  BlockLoading,
+  AddNewCard,
+  CardItemActionsWrapper
+} from './styles'
+
+export const PaymentOptionStripeUI = (props) => {
+  const {
+    deleteCard,
+    cardsList,
+    handleCardClick,
+    handleNewCard,
+    paymethodSelected,
+    cardSelected,
+    gateway
+  } = props
+  const [{ token }] = useSession()
+  const [, t] = useLanguage()
+  const [validationFields] = useValidationFields()
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  const [addCartOpen, setAddCardOpen] = useState(false)
+  const validateZipcodeCard =
+    validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required
+
+  const paymethodsWithoutSaveCards = ['credomatic']
+
+  const _handleNewCard = (card) => {
+    setAddCardOpen(false)
+    handleNewCard(card)
+  }
+
+  const handleDeleteCard = (card) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_CARD', 'Are you sure that you want to delete the card?'),
+      handleOnAccept: () => {
+        deleteCard(card)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+      setAddCardOpen(true)
+    }
+  }, [cardsList?.loading])
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <OptionStripeContainer>
+        {!token && <WarningMessage>{t('NEED_LOGIN_TO_USE', 'Sorry, you need to login to use this method')}</WarningMessage>}
+
+        {token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
+          <CardItem>
+            <span>{t('NO_CARDS', 'No cards')}</span>
+          </CardItem>
+        )}
+
+        {token && cardsList.error && cardsList.error.length > 0 && (
+          <NotFoundSource
+            content={cardsList?.error[0]?.message || cardsList?.error[0]}
+          />
+        )}
+        {token && cardsList.cards && cardsList.cards.length > 0 && (
+          <>
+            {cardsList?.cards?.map((card, i) =>
+              <PaymentCard
+                {...props}
+                key={i}
+                handleCardClick={() => handleCardClick(card)}
+                handleDeleteCard={() => handleDeleteCard(card)}
+                card={card}
+                defaultSelected={i === 0}
+                active={(paymethodSelected || cardSelected?.id) === card.id}
+                cardSelected={cardSelected}
+                paymethodSelected={paymethodSelected}
+                validateZipcodeCard={validateZipcodeCard}
+              />
+            )}
+          </>
+        )}
+        {token && !cardsList.loading && !paymethodsWithoutSaveCards.includes(gateway) && (
+          <AddNewCard>
+            <span onClick={() => setAddCardOpen(true)}>{t('ADD_NEW_CARD', 'Add new card')}</span>
+          </AddNewCard>
+        )}
+
+        <Modal
+          title={t('ADD_NEW_CARD', 'Add new card')}
+          className='modal-info'
+          open={addCartOpen}
+          onClose={() => setAddCardOpen(false)}
+        >
+          <StripeElementsForm
+            businessIds={props.businessIds}
+            businessId={props.businessId}
+            publicKey={props.publicKey}
+            toSave
+            requirements={props.clientSecret}
+            onCancel={() => setAddCardOpen(false)}
+            onNewCard={_handleNewCard}
+          />
+        </Modal>
+
+        <Confirm
+          title={t('CARD', 'Card')}
+          content={confirm.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={confirm.open}
+          onClose={() => setConfirm({ ...confirm, open: false })}
+          onCancel={() => setConfirm({ ...confirm, open: false })}
+          onAccept={confirm.handleOnAccept}
+          closeOnBackdrop={false}
+        />
+
+        {token && cardsList.loading && (
+          [...Array(5).keys()].map(i => (
+            <BlockLoading key={i}>
+              <Skeleton height={50} />
+            </BlockLoading>
+          ))
+        )}
+      </OptionStripeContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}
+
+export const PaymentCard = (props) => {
+  const {
+    handleDeleteCard,
+    card,
+    handleCardClick,
+    onSelectCard,
+    active,
+    cardSelected,
+    validateZipcodeCard
+  } = props
+
+  const [isShowActions, setIsShowActions] = useState(false)
+  const [, t] = useLanguage()
+  const cardActionsRef = useRef(null)
+  const actionWrapperRef = useRef(null)
+  const theme = useTheme()
+
+  const handleClickOutside = (e) => {
+    if (!isShowActions) return
+    const outsideCalendar = !cardActionsRef.current?.contains(e.target)
+    if (outsideCalendar) {
+      setIsShowActions(false)
+    }
+  }
+
+  const handleChangeDefaultCard = (e) => {
+    if (actionWrapperRef.current?.contains(e.target) || (!card?.zipcode && validateZipcodeCard)) return
+    handleCardClick(card)
+    onSelectCard && onSelectCard({
+      ...cardSelected,
+      id: card.id,
+      type: 'card',
+      card: {
+        brand: card.brand,
+        last4: card.last4,
+        zipcode: card.zipcode
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!cardSelected) return
+    onSelectCard && onSelectCard({
+      ...cardSelected,
+      id: cardSelected?.id,
+      type: 'card',
+      card: {
+        brand: cardSelected?.card?.brand,
+        last4: cardSelected?.card?.last4,
+        zipcode: cardSelected?.card?.zipcode
+      }
+    })
+  }, [cardSelected])
+
+  useEffect(() => {
+    window.addEventListener('click', handleClickOutside)
+    return () => window.removeEventListener('click', handleClickOutside)
+  }, [isShowActions])
+
+  return (
+    <CardItem onClick={handleChangeDefaultCard} isCursor invalid={!card?.zipcode && validateZipcodeCard}>
+      <CardItemContent>
+        <span className='checks'>
+          {active ? <IosRadioButtonOn /> : <IosRadioButtonOff />}
+        </span>
+        <div>
+          <img src={getIconCard(card?.brand)} alt={card?.brand} />
+        </div>
+        <span>
+          XXXX-XXXX-XXXX-{card?.last4}
+        </span>
+        {!card?.zipcode && validateZipcodeCard && (
+          <p>
+            ({t('MISSING_ZIPCODE', 'Missing zipcode')})
+          </p>
+        )}
+      </CardItemContent>
+      <CardItemActions>
+        <CardItemActionsWrapper ref={actionWrapperRef}>
+          <span ref={cardActionsRef}>
+            <Trash color={theme.colors.lightGray} onClick={() => handleDeleteCard()} />
+          </span>
+        </CardItemActionsWrapper>
+      </CardItemActions>
+    </CardItem>
+  )
+}
+
+export const PaymentOptionStripe = (props) => {
+  const paymentOptionStripeProps = {
+    ...props,
+    UIComponent: PaymentOptionStripeUI
+  }
+  return (
+    <PaymentOptionStripeController {...paymentOptionStripeProps} />
+  )
+}