add app/pages/vouchers/ViewRedeem.js

Strides-SPAPP/app/pages/vouchers/ViewRedeem.js

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import Button from '../../components/Button';
+import TextView from '../../components/TextView';
+import Modal from "react-native-modal";
+import { ModalProps } from "../../components/BottomModal";
+import Dialog from '../../components/Dialog';
+import apiVoucher from '../../api/apiVoucher';
+import { PageList } from '../Router';
+
+export default ViewRedeem = ({
+  userInfo={},
+  onChange
+}) => {
+  const [visible, showDialog] = useState(false);
+  const [promoCode, setPromoCode] = useState("");
+  const redeemVoucher = () => {
+    showDialog(false);
+    if (promoCode) {
+      setTimeout(() => {
+        Dialog.showProgressDialog();
+        apiVoucher.redeemVoucher({
+          redemptionCode: promoCode
+        }).then(res => {
+          Dialog.dismissLoading();
+          if (onChange) {
+            onChange();
+          }
+          if (res.msg) {
+            setTimeout(() => {
+              Dialog.showDialog({
+                title: $t("voucher.vouchers"),
+                message: res.msg,
+                showCancel: false
+              })
+            }, 500);
+          }
+        }).catch(err => {
+          Dialog.dismissLoading();
+          if (err.err) {
+            setTimeout(() => {
+              Dialog.showDialog({
+                title: $t("common.error"),
+                message: err.err,
+                showCancel: false
+              })
+            }, 500);
+          }
+        })
+      }, 300);
+    } else {
+      toastLong($t("voucher.plsInputPromoCode"))
+    }
+  }
+  return (
+    <View>
+      <View style={styles.redeemLayout}>
+        <Button
+          style={styles.buttonLeft}
+          viewStyle={styles.buttonView}
+          onClick={() => showDialog(true)}>
+          <MaterialCommunityIcons
+            name="ticket-percent-outline"
+            size={24}
+            color={textPrimary}/>
+          <TextView
+            style={styles.buttonText}
+            numberOfLines={1}>
+            {$t("voucher.inputPromoCode")}
+          </TextView>
+        </Button>
+        <Text style={styles.btnDivide}></Text>
+        <Button
+          style={styles.buttonRight}
+          viewStyle={styles.buttonView}
+          onClick={() => startPage(PageList.pointsHistory)}>
+          <TextView
+            style={styles.buttonText}
+            numberOfLines={1}>
+            {$t("voucher.availablePoints")}
+          </TextView>
+          <TextView
+            style={styles.valueText}
+            numberOfLines={1}>
+            {userInfo?.points || '0'}
+          </TextView>
+        </Button>
+      </View>
+      <Modal
+        isVisible={visible}
+        onBackButtonPress={() => showDialog(false)}
+        onBackdropPress={() => showDialog(false)}
+        {...ModalProps}>
+        <View style={Dialog.styles.modalDialog}>
+          <TextView style={Dialog.styles.title}>{$t('voucher.inputPromoCode')}</TextView>
+          <View style={Dialog.styles.message}>
+            <TextInput
+              style={styles.inputView}
+              allowFontScaling={false}
+              maxLength={6}
+              placeholderTextColor={textPlacehoder}
+              onChangeText={text => setPromoCode(text)}
+              onSubmitEditing={() => redeemVoucher()}
+            />
+          </View>
+          { isIOS
+          ? <View style={Dialog.styles.modalFooter}>
+              <Button
+                style={Dialog.styles.btnGroup}
+                viewStyle={Dialog.styles.btnView}
+                textStyle={Dialog.styles.btnConfirm}
+                text={$t('nav.confirm')}
+                onClick={() => redeemVoucher()}/>
+              <Button
+                style={[Dialog.styles.btnGroup, Dialog.styles.btnRight]}
+                viewStyle={Dialog.styles.btnView}
+                textStyle={Dialog.styles.btnConfirm}
+                text={$t('nav.cancel')}
+                onClick={() => showDialog(false)}/>
+            </View>
+          : <View style={Dialog.styles.modalFooter}>
+              <Dialog.AndroidButton
+                title={$t('nav.cancel')}
+                onPress={() => showDialog(false)}/>
+              <Dialog.AndroidButton
+                title={$t('nav.confirm')}
+                onPress={() => redeemVoucher()}/>
+            </View>
+          }
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  redeemLayout: {
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 4,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  btnDivide: {
+    width: 1,
+    height: 26,
+    backgroundColor: '#DADADA'
+  },
+  buttonLeft: {
+    flex: 1,
+    borderTopLeftRadius: 3,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 3,
+    borderBottomRightRadius: 0,
+    backgroundColor: 'transparent'
+  },
+  buttonRight: {
+    flex: 1,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 3,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 3,
+    backgroundColor: 'transparent'
+  },
+  buttonView: {
+    flex: 1,
+    height: 42,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  buttonText: {
+    color: textPrimary,
+    fontSize: 12,
+    paddingLeft: 8,
+    paddingRight: 8
+  },
+  valueText: {
+    color: colorAccent,
+    fontSize: 12
+  },
+  inputView: {
+    color: textPrimary,
+    fontSize: 14,
+    height: 42,
+    marginTop: 8,
+    textAlign: 'center',
+    paddingLeft: 12,
+    paddingRight: 12,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 4,
+    alignItems: 'center',
+    flexDirection: 'row',
+    textTransform: 'uppercase',
+    backgroundColor: colorLight
+  }
+})