ordering-ui-admin-external 1.13.4 → 1.14.1

package/src/components/Loyalty/GiftCardDetail/index.js

@@ -0,0 +1,287 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+import { useTheme } from 'styled-components'
+import { useForm } from 'react-hook-form'
+import { ThreeDots, Image as ImageIcon } from 'react-bootstrap-icons'
+import { useLanguage, DragAndDrop, ExamineClick, useUtils, PlatformProductDetail as PlatformProductDetailController } from 'ordering-components-admin-external'
+import { Confirm, Alert, ImageCrop, Modal } from '../../Shared'
+import { Input, Button, Switch } from '../../../styles'
+import { bytesConverter } from '../../../utils'
+
+import {
+  Container,
+  DetailsHeader,
+  LeftHeader,
+  RightHeader,
+  LevelName,
+  ActionSelectorWrapper,
+  Content,
+  FormController,
+  ButtonWrapper,
+  LoyaltyImage,
+  UploadImageIconContainer,
+  UploadImageIcon
+} from './styles'
+
+const GiftCardDetailUI = (props) => {
+  const {
+    product,
+    formState,
+    handleChangeInput,
+    handlechangeImage,
+    handleChangeItem,
+    handleAddProduct,
+    handleUpdateProduct,
+    handleDeleteProduct
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const { handleSubmit } = useForm()
+
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+
+  const imageRef = useRef()
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const onClickDeleteGiftCard = () => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ITEM', 'Are you sure to delete this _item_?').replace('_item_', t('GIFT_CARD', 'Gift card')),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeleteProduct()
+      }
+    })
+  }
+
+  const handleChangePhoto = (croppedImg) => {
+    handleChangeItem({ [cropState?.name]: croppedImg })
+    setCropState({ name: null, data: null, open: false })
+  }
+
+  const onSubmit = () => {
+    if (formState?.changes?.name === '') {
+      setAlertState({
+        open: true,
+        content: t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Value is required'
+        ).replace('_attribute_', 'name')
+      })
+      return
+    }
+    if (formState?.changes?.accumulation_rate === '') {
+      setAlertState({
+        open: true,
+        content: t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Value is required'
+        ).replace('_attribute_', 'accumulation_rate')
+      })
+      return
+    }
+    if (formState?.changes?.minimum_points === '') {
+      setAlertState({
+        open: true,
+        content: t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Value is required'
+        ).replace('_attribute_', 'points_required')
+      })
+      return
+    }
+    if (product?.id) handleUpdateProduct()
+    else handleAddProduct('gift_card')
+  }
+
+  const handleClickImage = () => {
+    imageRef.current.click()
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type.split('/')[0]
+      if (type !== 'image') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES', 'Only images can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('IMAGE_MAXIMUM_SIZE', 'The maximum image size is 2 megabytes')]
+        })
+        return
+      }
+
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        setCropState({ name: 'image', data: reader.result, open: true })
+      }
+      reader.onerror = error => console.log(error)
+
+      handlechangeImage(files[0])
+    }
+  }
+
+  useEffect(() => {
+    if (!formState.error) return
+    setAlertState({
+      open: true,
+      content: formState.error
+    })
+  }, [formState?.error])
+
+  return (
+    <>
+      <Container>
+        <DetailsHeader>
+          <LeftHeader>
+            <LevelName>{product?.id ? (formState?.changes?.name ?? product?.name) : t('NEW_GIFT_CARD', 'New gift card')}</LevelName>
+            {product?.id && (
+              <Switch
+                defaultChecked={product?.enabled}
+                onChange={val => handleUpdateProduct({ enabled: val })}
+              />
+            )}
+          </LeftHeader>
+          {product?.id && (
+            <RightHeader>
+              <ActionSelectorWrapper>
+                <DropdownButton
+                  menuAlign={theme?.rtl ? 'left' : 'right'}
+                  title={<ThreeDots />}
+                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+                >
+                  <Dropdown.Item onClick={onClickDeleteGiftCard}>
+                    {t('DELETE', 'Delete')}
+                  </Dropdown.Item>
+                </DropdownButton>
+              </ActionSelectorWrapper>
+            </RightHeader>
+          )}
+        </DetailsHeader>
+        <Content onSubmit={handleSubmit(onSubmit)}>
+          <LoyaltyImage
+            onClick={() => handleClickImage()}
+          >
+            <ExamineClick
+              onFiles={files => handleFiles(files)}
+              childRef={(e) => { imageRef.current = e }}
+              accept='image/png, image/jpeg, image/jpg'
+              disabled={formState.loading}
+            >
+              <DragAndDrop
+                onDrop={dataTransfer => handleFiles(dataTransfer.files)}
+                accept='image/png, image/jpeg, image/jpg'
+                disabled={formState.loading}
+              >
+                {
+                  (!formState.changes?.image || formState.error)
+                    ? product?.image && (<img src={optimizeImage(product?.image, 'h_200,c_limit')} alt='tag image' loading='lazy' />)
+                    : formState?.changes?.image && (<img src={formState?.changes?.image} alt='tag image' loading='lazy' />)
+                }
+                <UploadImageIconContainer>
+                  <UploadImageIcon>
+                    <ImageIcon />
+                  </UploadImageIcon>
+                </UploadImageIconContainer>
+              </DragAndDrop>
+            </ExamineClick>
+          </LoyaltyImage>
+          <FormController>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              name='name'
+              placeholder={t('Name', 'name')}
+              value={formState?.changes?.name ?? product?.name ?? ''}
+              onChange={handleChangeInput}
+              disabled={formState.loading}
+              autoComplete='off'
+            />
+          </FormController>
+          <FormController>
+            <label>{t('AMOUNT', 'Amount')}</label>
+            <Input
+              name='price'
+              placeholder={t('AMOUNT', 'Amount')}
+              value={formState?.changes?.price ?? product?.price ?? ''}
+              onChange={handleChangeInput}
+              disabled={formState.loading}
+              autoComplete='off'
+              onKeyPress={(e) => {
+                if (!/^[0-9.]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+            />
+          </FormController>
+          <ButtonWrapper>
+            <Button
+              color='primary'
+              type='submit'
+              disabled={Object.keys(formState?.changes).length === 0 || formState?.loading}
+            >
+              {product?.id ? ('SAVE', 'Save') : ('ADD', 'Add')}
+            </Button>
+          </ButtonWrapper>
+        </Content>
+      </Container>
+      <Confirm
+        width='700px'
+        title={t('WEB_APPNAME', 'Ordering')}
+        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}
+      />
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        title={t('IMAGE_CROP', 'Image crop')}
+        open={cropState?.open}
+        onRemove={() => setCropState({ ...cropState, open: false })}
+      >
+        <ImageCrop
+          photo={cropState?.data}
+          handleChangePhoto={handleChangePhoto}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export const GiftCardDetail = (props) => {
+  const giftCardDetailProps = {
+    ...props,
+    UIComponent: GiftCardDetailUI
+  }
+  return <PlatformProductDetailController {...giftCardDetailProps} />
+}

package/src/components/Loyalty/LoyaltyLevelDetail/index.js

@@ -352,7 +352,7 @@ const LoyaltyLevelDetailUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

package/src/components/Loyalty/PointsWalletBusinessList/index.js

@@ -213,7 +213,7 @@ const PointsWalletBusinessListUI = (props) => {
               <tr>
                 <th className='business-info'>{t('BUSINESSES', 'Businesses')}</th>
                 <th>{t('ORDERS_BOX_STATUS_HEADER', 'Status')}</th>
-                <th>{t('Redeeem', 'Redeeem')}</th>
+                <th>{t('REDEEEM', 'Redeeem')}</th>
                 <th>{t('ACCUMULATION', 'Accumulation')}</th>
                 <th />
               </tr>

package/src/components/Loyalty/PointsWalletBusinessList/styles.js

@@ -37,10 +37,13 @@ export const BusinessTable = styled.table`
     border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
     tr{
       th {
-        padding: 12px 0px;
+        padding: 12px 5px;
         :not(.business-info) {
           text-align: center;
         }
+        &:first-child, &:last-child {
+          padding: 12px 0px;
+        }
       }
     }
   }
@@ -78,11 +81,16 @@ export const BusinessInfoWrapper = styled.div`
       margin-right: 12px;
       margin-left: 0;
     `}
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
   }
 `
 
 export const WrapperImage = styled.div`
   max-width: 38px;
+  min-width: 38px;
   max-height: 38px;
   height: 38px;
   width: 38px;

package/src/components/Loyalty/PointsWalletLevels/styles.js

@@ -110,13 +110,8 @@ export const LevelBottomContainer = styled.div`
 export const AddNewLevelButton = styled.div`
   cursor: pointer;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
-  transition: all 0.3s linear;
+  color: ${props => props.theme.colors.primary};
   user-select: none;
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `
 export const NotFoundSourceWrapper = styled.div`
   > div {

package/src/components/Loyalty/RewardsPrograms/index.js

@@ -1,9 +1,11 @@
 import React, { useState } from 'react'
-import { List as MenuIcon, Wallet, BarChartSteps } from 'react-bootstrap-icons'
-import { useLanguage, RewardsPrograms as RewardsProgramsController } from 'ordering-components-admin-external'
+import { List as MenuIcon, BarChartSteps, Gift, Wallet as Cash, InfoCircle } from 'react-bootstrap-icons'
+import { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton } from '../../../styles'
 import { SideBar } from '../../Shared'
+import { Wallet } from '../Wallet'
+import { PointsWalletLevels } from '../PointsWalletLevels'
 
 import {
   Container,
@@ -11,12 +13,12 @@ import {
   LoyaltyListContainer,
   LoyaltyItemWrapper,
   IconWrapper,
-  LoyaltyItemContent
+  LoyaltyItemContent,
+  InfoWrapper,
+  InfoContent
 } from './styles'
-import { PointsWallet } from '../PointsWallet'
-import { PointsWalletLevels } from '../PointsWalletLevels'
 
-const RewardsProgramsUI = (props) => {
+export const RewardsPrograms = () => {
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
 
@@ -24,6 +26,13 @@ const RewardsProgramsUI = (props) => {
   const [moveDistance, setMoveDistance] = useState(0)
   const [levelMoveDistance, setLevelMoveDistance] = useState(0)
 
+  const walletList = [
+    { key: 'credit_point', name: t('POINTS_WALLET', 'Points wallet'), description: t('POINTS_WALLET_DESCRIPTION', 'Points wallet general and per business setup.'), icon: <Cash /> },
+    { key: 'levels', name: t('LEVELS', 'Levels'), description: t('LEVELS_DESCRIPTION', 'Setup different loyalty levels for your users.'), icon: <BarChartSteps /> },
+    // { key: 'gift_card', name: t('GIFT_CARD', 'Gift Card'), description: t('GIFT_CARD_DESCRIPTION', 'Setup different gift cards for your customers.'), icon: <Gift /> },
+    { key: 'cashback', name: t('CASH_WALLET', 'Cash wallet'), description: t('CASH_WALLET_DESCRIPTION', 'Cash wallet general and per business setup.'), icon: <Cash /> }
+  ]
+
   const hanldeClosePointsWallet = () => {
     setMoveDistance(0)
     setShowOption(null)
@@ -47,43 +56,54 @@ const RewardsProgramsUI = (props) => {
             </IconButton>
           )}
           <h1>{t('LOYALTY_AUTOMATION', 'Loyalty automation')}</h1>
+          <InfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('LOYALTY_AUTOMATION_DESCRIPTION', 'Configure the available loyalty plans to allow your users to receive rewards per order in your website and app. This can be done in general and customized per business.')}
+            </InfoContent>
+          </InfoWrapper>
         </HeaderTitleContainer>
 
         <LoyaltyListContainer>
-          <LoyaltyItemWrapper onClick={() => setShowOption('points_wallet')}>
-            <IconWrapper>
-              <Wallet />
-            </IconWrapper>
-            <LoyaltyItemContent>
-              <h5>{t('POINTS_WALLET', 'Points wallet')}</h5>
-              <p>{t('POINTS_WALLET_DESCRIPTION', 'Points wallet general and per business setup.')}</p>
-            </LoyaltyItemContent>
-          </LoyaltyItemWrapper>
-          <LoyaltyItemWrapper onClick={() => setShowOption('levels')}>
-            <IconWrapper>
-              <BarChartSteps />
-            </IconWrapper>
-            <LoyaltyItemContent>
-              <h5>{t('LEVELS', 'Levels')}</h5>
-              <p>{t('LEVELS_DESCRIPTION', 'Setup different loyalty levels for your users.')}</p>
-            </LoyaltyItemContent>
-          </LoyaltyItemWrapper>
+          {walletList.map(item => (
+            <LoyaltyItemWrapper
+              key={item.key}
+              onClick={() => setShowOption(item.key)}
+            >
+              <IconWrapper>
+                {item.icon}
+              </IconWrapper>
+
+              <LoyaltyItemContent>
+                <h5>{item.name}</h5>
+                <p>{item.description}</p>
+              </LoyaltyItemContent>
+            </LoyaltyItemWrapper>
+          ))}
         </LoyaltyListContainer>
       </Container>
-      {showOption === 'points_wallet' && (
+
+      {(showOption === 'credit_point' || showOption === 'cashback') && (
         <SideBar
           sidebarId='loyaltyWallet'
-          open={showOption === 'points_wallet'}
+          open={(showOption === 'credit_point' || showOption === 'cashback')}
           onClose={hanldeClosePointsWallet}
           defaultSideBarWidth={550 + moveDistance}
           moveDistance={moveDistance}
         >
-          <PointsWallet
-            {...props}
+          <Wallet
+            type={showOption}
+            title={walletList.find(item => item.key === showOption)?.name}
+            moveDistance={moveDistance}
             handleParentSidebarMove={val => setMoveDistance(val)}
           />
         </SideBar>
       )}
+
       {showOption === 'levels' && (
         <SideBar
           sidebarId='loyaltyLevels'
@@ -91,20 +111,27 @@ const RewardsProgramsUI = (props) => {
           onClose={() => handleCloseLevel()}
           defaultSideBarWidth={550 + levelMoveDistance}
           moveDistance={levelMoveDistance}
+          showExpandIcon
         >
           <PointsWalletLevels
             handleParentSidebarMove={val => setLevelMoveDistance(val)}
           />
         </SideBar>
       )}
+
+      {/* {showOption === 'gift_card' && (
+        <SideBar
+          open={showOption === 'gift_card'}
+          onClose={() => handleCloseGiftCard()}
+          defaultSideBarWidth={550 + giftCardMoveDistance}
+          moveDistance={giftCardMoveDistance}
+          showExpandIcon
+        >
+          <GiftCards
+            handleParentSidebarMove={val => setGiftCardMoveDistance(val)}
+          />
+        </SideBar>
+      )} */}
     </>
   )
 }
-
-export const RewardsPrograms = (props) => {
-  const rewardsProgramsProps = {
-    ...props,
-    UIComponent: RewardsProgramsUI
-  }
-  return <RewardsProgramsController {...rewardsProgramsProps} />
-}

package/src/components/Loyalty/RewardsPrograms/styles.js

@@ -101,3 +101,60 @@ export const LoyaltyItemContent = styled.div`
     overflow: hidden;
   }
 `
+
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    /* display: block; */
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  @media (min-width: 576px) {
+    min-width: 330px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+`

package/src/components/Loyalty/Wallet/index.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, RewardsPrograms as RewardsProgramsController } from 'ordering-components-admin-external'
+import { PointsWalletBusinessDetail } from '../PointsWalletBusinessDetail'
+import { PointsWalletBusinessList } from '../PointsWalletBusinessList'
+import { IconButton } from '../../../styles'
+import { ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import {
+  Container,
+  Title,
+  Tabs,
+  Tab,
+  Header,
+  SkeletonWrapper
+} from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+const WalletUI = (props) => {
+  const {
+    handleParentSidebarMove,
+    pointWallet,
+    handleUpdatePointsWallet,
+    moveDistance,
+    loyaltyPlanList,
+    title
+  } = props
+
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+
+  const [selectedOption, setSelectedOption] = useState('general')
+  const [selectedBusinessList, setSelectedBusinessList] = useState([])
+  const [isExpand, setIsExpand] = useState(false)
+
+  const walletOptionList = [
+    { key: 'general', name: t('GENERAL', 'General') },
+    { key: 'business', name: t('BUSINESSES', 'Businesses') }
+  ]
+
+  const expandSidebar = () => {
+    const element = document.getElementById('loyaltyWallet')
+    if (isExpand) element.style.width = '550px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  useEffect(() => {
+    if (selectedOption !== 'business') handleParentSidebarMove(0)
+  }, [selectedOption])
+
+  return (
+    <Container>
+      <Header>
+        <Title>{title}</Title>
+        {width > 576 && moveDistance === 0 && (
+          <IconButton
+            color='black'
+            onClick={expandSidebar}
+          >
+            {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+          </IconButton>
+        )}
+      </Header>
+      <Tabs>
+        {walletOptionList.map(option => (
+          <Tab
+            key={option.key}
+            active={selectedOption === option.key}
+            onClick={() => setSelectedOption(option.key)}
+          >
+            {option.name}
+          </Tab>
+        ))}
+      </Tabs>
+      {loyaltyPlanList?.loading ? (
+        <SkeletonWrapper>
+          <h1>
+            <Skeleton width={150} height={20} />
+          </h1>
+          <Skeleton height={18} style={{ marginBottom: 10 }} count={8} />
+        </SkeletonWrapper>
+      ) : (
+        <>
+          {selectedOption === 'general' && (
+            <div>
+              <PointsWalletBusinessDetail
+                loyaltyPlanList={loyaltyPlanList}
+                walletData={pointWallet}
+                handleUpdatePointsWallet={handleUpdatePointsWallet}
+                selectedBusinessList={selectedBusinessList}
+              />
+            </div>
+          )}
+          {selectedOption === 'business' && (
+            <div>
+              <PointsWalletBusinessList
+                {...props}
+                setSelectedBusinessList={setSelectedBusinessList}
+                isCloseBusinessDetails={selectedOption !== 'business'}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </Container>
+  )
+}
+
+export const Wallet = (props) => {
+  const walletProps = {
+    ...props,
+    UIComponent: WalletUI
+  }
+  return <RewardsProgramsController {...walletProps} />
+}