ordering-ui-admin-external 1.17.0 → 1.18.0

package/src/components/Stores/SpoonityApiKey/index.js

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, Input } from '../../../styles'
+import { Alert } from '../../Shared'
+
+import {
+  BusinessOrderingChannelsContainer,
+  Title,
+  BusinessCustomSlugContainer,
+  FormControl,
+  Label,
+} from './styles'
+
+export const SpoonityApiKey = (props) => {
+  const {
+    spoonityConfig,
+    handleUpdateSpoonityKey,
+    spoonityKeyState
+  } = props
+
+  const [, t] = useLanguage()
+  const [spoonityKey, setSpoonityKey] = useState(spoonityConfig?.value)
+  const [alertState, setAlertState] = useState({ open: false, content: [], success: false })
+
+  const changeSpoonityKey = () => {
+    if (spoonityKey === '') {
+      setAlertState({
+        ...alertState,
+        open: true,
+        content: [t('SPOONITY_KEY_REQUIRED', 'Spoonity key is required')]
+      })
+      return
+    }
+    handleUpdateSpoonityKey(spoonityKey, spoonityConfig.id)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      ...alertState,
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (spoonityKeyState?.key && !spoonityKeyState?.loading) setSpoonityKey(spoonityKey)
+  }, [spoonityKeyState?.key, spoonityKeyState?.loading])
+
+  useEffect(() => {
+    if(!spoonityKeyState?.key) return
+    setSpoonityKey(spoonityKeyState?.key)
+  }, [spoonityKeyState?.key])
+
+  return (
+    <>
+      <BusinessOrderingChannelsContainer>
+        <Title>{t('SPOONITY_KEY', 'Spoonity key')}</Title>
+        <BusinessCustomSlugContainer>
+          <FormControl>
+            <Label>{t('API_KEY', 'Api key')}</Label>
+            <Input
+              type='text'
+              value={spoonityKey}
+              placeholder={t('SPOONITY_PLACEHOLDER', 'Spoonity key')}
+              onChange={(e) => setSpoonityKey(e.target.value)}
+              onKeyPress={(e) => {
+                if (!/^[0-9a-zA-Z]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+            />
+          </FormControl>
+          <Button color='primary' onClick={changeSpoonityKey}>{t('SAVE', 'Save')}</Button>
+        </BusinessCustomSlugContainer>
+      </BusinessOrderingChannelsContainer>
+      <Alert
+        title={t('SPOONITY_KEY', 'Spoonity key')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}

package/src/components/Stores/SpoonityApiKey/styles.js

@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components'
+
+export const BusinessOrderingChannelsContainer = styled.div`
+  box-sizing: border-box;
+  @media (min-width: 576px) {
+    padding: 20px;
+  }
+`
+export const Title = styled.h1`
+  font-size: 20px;
+  font-weight: 700;
+  color: ${props => props.theme.colors?.headingColor};
+  margin-bottom: 25px;
+`
+
+export const BusinessCustomSlugContainer = styled.div`
+  button {
+    border-radius: 7.6px;
+    height: 44px;
+  }
+`
+
+export const FormControl = styled.div`
+  margin-bottom: 20px;
+
+  input[type=text] {
+    border: 1px solid #DEE2E6;
+    box-sizing: border-box;
+    border-radius: 7.6px;
+    height: 44px;
+    width: 100%;
+  }
+`
+
+export const Label = styled.p`
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: ${props => props.theme?.colors.headingColor};
+`
+
+export const Tabs = styled.div`
+  display: flex;
+  width: 100%;
+  margin-bottom: 25px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  user-select: none;
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  font-size: 14px;
+  white-space: nowrap;
+  color: ${props => props.theme.colors.lightGray};
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 1px solid;
+    font-weight: 500;
+    color: ${props => props.theme.colors.headingColor};
+  `}
+`

package/src/components/Stores/UploadMenuGuide/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useLanguage, ExamineClick, DragAndDrop, UploadMenu } from 'ordering-components-admin-external'
 import { CloudUploadFill, FileEarmarkPdfFill } from 'react-bootstrap-icons'
 import { Button, Input } from '../../../styles'
@@ -76,6 +76,15 @@ const UploadMenuGuideUI = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (formState?.error) {
+      setAlertState({
+        open: true,
+        content: formState.error
+      })
+    }
+  }, [formState?.error])
+
   return (
     <>
       <Container>

package/src/components/Users/CustomerPointsWallet/index.js

@@ -4,6 +4,9 @@ import { useLanguage, UserWallet as UserWalletController } from 'ordering-compon
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import { CustomerWalletEvents } from '../CustomerWalletEvents'
+import { Button, Input, TextArea } from '../../../styles'
+import { Alert } from '../../Shared'
+
 import {
   Container,
   PointsWalletContainer,
@@ -11,20 +14,32 @@ import {
   Tabs,
   Tab,
   LoyaltyLevel,
-  LoyaltyLevelContent
+  LoyaltyLevelContent,
+
+  SectionContainer,
+  FormController
 } from './styles'
 
 const CustomerPointsWalletUI = (props) => {
   const {
     walletState,
-    user
+    user,
+
+    handleChangeInput,
+    actionState,
+    addWalletState,
+    reduceWalletState,
+    handleAddWalletMoney,
+    handleReduceWalletMoney
   } = props
 
   const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
+
   const [showOption, setShowOption] = useState('points_wallet')
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const handleTabClick = (tab, isInitialRender) => {
     setShowOption(tab)
@@ -45,6 +60,36 @@ const CustomerPointsWalletUI = (props) => {
     }
   }, [])
 
+  const onAddWalletMoney = () => {
+    if (!addWalletState?.amount) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_REQUIRED', 'The amount is required').replace('_attribute_', t('AMOUNT', 'Amount'))]
+      })
+      return
+    }
+    handleAddWalletMoney()
+  }
+
+  const onReduceWalletMoney = () => {
+    if (!reduceWalletState?.amount) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_REQUIRED', 'The amount is required').replace('_attribute_', t('AMOUNT', 'Amount'))]
+      })
+      return
+    }
+    handleReduceWalletMoney()
+  }
+
+  useEffect(() => {
+    if (actionState.loading || !actionState.error) return
+    setAlertState({
+      open: true,
+      content: actionState.error
+    })
+  }, [actionState])
+
   return (
     <Container>
       <h1>{t('POINTS_WALLET', 'Points wallet')}</h1>
@@ -96,6 +141,79 @@ const CustomerPointsWalletUI = (props) => {
                     </LoyaltyLevelContent>
                   </LoyaltyLevel>
                 )}
+
+                <SectionContainer>
+                  <p>{t('ADD_WALLET_MONEY', 'Add wallet money')}</p>
+                  <FormController>
+                    <label>{t('INDICATE_THE_AMOUNT_TO_ADD', 'Indicate the amount to add')}</label>
+                    <Input
+                      type='number'
+                      name='amount'
+                      placeholder={t('POINTS', 'Points')}
+                      onKeyPress={(e) => {
+                        if (!/^[0-9.]$/.test(e.key)) {
+                          e.preventDefault()
+                        }
+                      }}
+                      value={addWalletState?.amount || ''}
+                      onChange={(e) => handleChangeInput(e, true)}
+                    />
+                  </FormController>
+                  <FormController>
+                    <label>{t('COMMENT', 'Comment')}</label>
+                    <TextArea
+                      name='description'
+                      rows={3}
+                      value={addWalletState?.description || ''}
+                      onChange={(e) => handleChangeInput(e, true)}
+                      placeholder={t('WRITE_SHORT_COMMENT', 'Write a short comment')}
+                    />
+                  </FormController>
+                  <Button
+                    borderRadius='8px'
+                    color='primary'
+                    onClick={() => onAddWalletMoney()}
+                    disabled={actionState.loading || Object.keys(addWalletState).length === 0}
+                  >
+                    {t('ADD', 'Add')}
+                  </Button>
+                </SectionContainer>
+                <SectionContainer>
+                  <p>{t('REDUCE_WALLET_MONEY', 'Reduce wallet money')}</p>
+                  <FormController>
+                    <label>{t('INDICATE_THE_AMOUNT_TO_REDUCE', 'Indicate the amount to reduce')}</label>
+                    <Input
+                      type='number'
+                      name='amount'
+                      placeholder={t('POINTS', 'Points')}
+                      value={reduceWalletState?.amount || ''}
+                      onChange={e => handleChangeInput(e, false)}
+                      onKeyPress={(e) => {
+                        if (!/^[0-9.]$/.test(e.key)) {
+                          e.preventDefault()
+                        }
+                      }}
+                    />
+                  </FormController>
+                  <FormController>
+                    <label>{t('COMMENT', 'Comment')}</label>
+                    <TextArea
+                      rows={3}
+                      name='description'
+                      value={reduceWalletState?.description || ''}
+                      onChange={e => handleChangeInput(e, false)}
+                      placeholder={t('WRITE_SHORT_COMMENT', 'Write a short comment')}
+                    />
+                  </FormController>
+                  <Button
+                    borderRadius='8px'
+                    color='black'
+                    onClick={() => onReduceWalletMoney()}
+                    disabled={actionState.loading || Object.keys(reduceWalletState).length === 0}
+                  >
+                    {t('REDUCE', 'Reduce')}
+                  </Button>
+                </SectionContainer>
               </PointsWalletContainer>
             </>
           )}
@@ -104,6 +222,16 @@ const CustomerPointsWalletUI = (props) => {
       {showOption === 'history' && (
         <CustomerWalletEvents {...props} />
       )}
+      <Alert
+        width='800px'
+        title={t('LOGIN')}
+        content={alertState.content}
+        acceptText={t('ACCEPT')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </Container>
   )
 }

package/src/components/Users/CustomerPointsWallet/styles.js

@@ -14,7 +14,7 @@ export const Container = styled.div`
 
 export const PointsWalletContainer = styled.div`
   width: 100%;
-  padding-top: 30px;
+  padding: 30px 0;
 `
 
 export const PointsWrapper = styled.div`
@@ -121,3 +121,42 @@ export const LoyaltyLevelContent = styled.div`
     text-align: center;
   }
 `
+
+export const SectionContainer = styled.div`
+  margin-top: 54px;
+  margin-bottom: 30px;
+  > p {
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 0;
+    margin-bottom: 22px;
+  }
+  > button {
+    height: 44px;
+  }
+`
+export const FormController = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 26px;
+
+  label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  input,
+  textarea {
+    font-size: 14px;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+`