ordering-ui-admin-external 1.28.0 → 1.29.0

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { PaymentOptionPaypal as PaymentPaypalController, useConfig } from 'ordering-components-admin-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/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/components/Orders/CreateCustomOrder/PaymentOptionSquare/index.js

@@ -0,0 +1,105 @@
+import React from 'react'
+import { PaymentOptionSquare as PaymentOptionSquareController, useLanguage } from 'ordering-components-admin-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/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/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-admin-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} />
+  )
+}

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

@@ -0,0 +1,159 @@
+import styled, { css } from 'styled-components'
+
+export const OptionStripeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const WarningMessage = styled.p`
+  color: #D81212;
+  font-size: 24px;
+  padding-left: 10px;
+  font-weight: bold;
+  opacity: 0.8;
+  ${props => props.theme?.rtl && css`
+    padding-right: 10px;
+    padding-left: 0;
+  `}
+`
+
+export const CardItem = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #EAEAEA;
+  ${({ isCursor }) => isCursor && css`
+    cursor: pointer;
+
+    &:hover {
+      background-color: #F8F9FA;
+    }
+  `}
+
+  ${({ invalid }) => invalid && css`
+    opacity: 0.7;
+  `}
+`
+
+export const CardItemContent = styled.div`
+  display: flex;
+  align-items: center;
+  
+  .checks svg {
+    color: ${props => props.theme.colors.primary};
+    font-size: 22px;
+  }
+
+  > div {
+    display: flex;
+    align-items: center;
+    margin: 0 13px 0 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 13px;
+      margin-right: 0;
+    `}
+
+    img {
+      width: 24px;
+      height: 20px;
+    }
+  }
+
+  span {
+    font-size: 14px;
+    color: ${props => props.theme?.colors.headingColor};
+  }
+  p {
+      margin: 0;
+      margin-left: 20px;
+      color: ${({ theme }) => theme?.colors?.danger500}
+    }
+`
+
+export const CardItemActions = styled.div`
+  display: flex;
+  align-items: center;
+
+  > span {
+    font-weight: 600;
+    font-size: 12px;
+    color: ${props => props.theme?.colors.headingColor};
+    margin-right: 20px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 20px;
+      margin-right: 0;
+    `}
+  }
+`
+
+export const BlockLoading = styled.div`
+  width: 100%;
+  margin-bottom: 10px;
+`
+
+export const AddNewCard = styled.div`
+  span {
+    font-size: 14px;
+    color: ${props => props.theme?.colors.primary};
+    cursor: pointer;
+    user-select: none;
+  }
+`
+
+export const CardItemActionsWrapper = styled.div`
+  position: relative;
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 7.6px;
+    cursor: pointer;
+    width: 26px;
+    height: 24px;
+    transition: all 0.3s;
+  
+    svg {
+      font-size: 20px;
+      color: #212121;
+    }
+
+    &:hover {
+      background: #F8F9FA;
+    }
+  }
+`
+
+export const ActionsContent = styled.div`
+  position: absolute;
+  z-index: 10;
+  top: 100%;
+  background: #FFFFFF;
+  border: 1px solid #E9ECEF;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  overflow: hidden;
+  ${props => props.theme?.rtl ? css`
+    left: 0;
+  ` : css`
+    right: 0;
+  `}
+
+  div {
+    padding: 10px 13px;
+    font-size: 14px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.3s;
+    color: ${props => props.theme?.colors.headingColor};
+
+    &:hover {
+      background: #f8f9fa;
+    }
+
+    &.delete {
+      color: #E63757;
+    }
+  }
+`