ordering-ui-admin-external 1.17.0 → 1.19.0

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;
+  }
+`