ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/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;
+    }
+  }
+`

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

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react'
+import {
+  PaymentOptionWallet as PaymentOptionWalletController,
+  useLanguage,
+  useUtils,
+  useConfig
+} from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { useTheme } from 'styled-components'
+import { Alert } from '../../../Shared'
+import { Checkbox } from '../../../../styles'
+
+import {
+  Container,
+  SectionLeft,
+  SectionWrapper,
+  SectionLeftText
+} from './styles'
+
+const PaymentOptionWalletUI = (props) => {
+  const {
+    cart,
+    errorState,
+    setErrorState,
+    selectWallet,
+    walletsState,
+    businessConfigs,
+    deletetWalletSelected
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parsePrice }] = useUtils()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [checkedState, setCheckedState] = useState(
+    new Array(walletsState.result?.length).fill(false)
+  )
+
+  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
+  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
+
+  const isBusinessWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
+  const isBusinessWalletPointsEnabled = businessConfigs.find(config => config.key === 'wallet_credit_point_enabled')?.value === '1'
+
+  const walletName = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+      isActive: isWalletCashEnabled && isBusinessWalletCashEnabled
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+      isActive: isWalletPointsEnabled && isBusinessWalletPointsEnabled
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({ open: false, content: [] })
+    setErrorState(null)
+  }
+
+  const handleOnChange = (position, wallet) => {
+    const updatedCheckedState = checkedState.map((item, index) =>
+      index === position ? !item : item
+    )
+
+    if (!checkedState[position]) {
+      selectWallet(wallet)
+    } else {
+      deletetWalletSelected(wallet)
+    }
+
+    setCheckedState(updatedCheckedState)
+  }
+
+  useEffect(() => {
+    if (!walletsState.loading) {
+      setCheckedState(
+        walletsState?.result?.map(wallet => {
+          return !!cart?.wallets?.find(w => w.id === wallet.id)
+        })
+      )
+    }
+  }, [walletsState.result?.length])
+
+  useEffect(() => {
+    if (errorState) {
+      setAlertState({ open: true, content: errorState })
+    }
+  }, [errorState])
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {!walletsState.loading &&
+        !walletsState.error &&
+        walletsState.result?.length > 0 &&
+        (
+          <>
+            {walletsState.result?.map((wallet, idx) => wallet.valid && wallet.balance > 0 && walletName[wallet.type]?.isActive && (
+              <Container
+                key={wallet.id}
+                isBottomBorder={idx === walletsState.result?.length - 1}
+              >
+                <SectionLeft>
+                  <Checkbox
+                    name={`payment_option_${wallet.type}`}
+                    id={`custom-checkbox-${idx}`}
+                    disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+                    defaultChecked={checkedState[idx]}
+                    value={`payment_option_${wallet.type}`}
+                    onChange={() => handleOnChange(idx, wallet)}
+                  />
+                  <SectionLeftText>
+                    <label
+                      style={{
+                        color: (cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 ? theme.colors.darkGray : 'black'
+                      }}
+                      htmlFor={`custom-checkbox-${idx}`}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </label>
+                  </SectionLeftText>
+                </SectionLeft>
+                <div>
+                  {wallet.type === 'cash' && (
+                    <span>{parsePrice(wallet?.balance)}</span>
+                  )}
+                  {wallet.type === 'credit_point' && (
+                    <span>
+                      <span style={{ color: theme.colors.primary }}>{`${wallet?.balance} ${t('POINTS', 'Points')}`}</span> {wallet?.balance > 0 && `= ${parsePrice(wallet?.balance / wallet?.redemption_rate)}`}
+                    </span>
+                  )}
+                </div>
+              </Container>
+            ))}
+          </>
+        )}
+
+      {walletsState?.loading && (
+        <>
+          {[...Array(2).keys()].map(i => (
+            <SectionWrapper key={i}>
+              <Skeleton height={40} />
+            </SectionWrapper>
+          ))}
+        </>
+      )}
+
+      <Alert
+        title={t('WALLET_ERROR_MESSAGES', 'Wallet')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </div>
+  )
+}
+
+export const PaymentOptionWallet = (props) => {
+  const paymentWalletProps = {
+    ...props,
+    UIComponent: PaymentOptionWalletUI
+  }
+
+  return (
+    <PaymentOptionWalletController {...paymentWalletProps} />
+  )
+}

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

@@ -0,0 +1,33 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid ${(props) => props.theme.colors.borderColor};
+  ${(props) => props.isBottomBorder && css`
+    border-bottom: 1px solid ${(props) => props.theme.colors.gray200};
+  `}
+  padding: 20px 0;
+`
+
+export const SectionLeft = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+export const SectionLeftText = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+  label {
+    margin: 0;
+  }
+`
+
+export const SectionWrapper = styled.div`
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+`