Develop Voucher details page

https://dev.wormwood.com.sg/zentao/task-view-158.html

Strides-APP/app/api/apiVoucher.js

@@ -49,5 +49,8 @@ export default apiVoucher = {
    */
   getSelectionVoucher(data) {
     return get(prefix + "charge-can-use-vouchers", data)
+  },
+  getVoucherInfo(voucherId) {
+    return get(prefix + "vouchers/" + voucherId)
   }
 }

Strides-APP/app/components/ToolbarUgly.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import TextView from './TextView';
+
+export default ToolbarUgly = ({
+  title,
+  showBack=true,
+  onBackPress
+}) => (
+  <View style={styles.toolbarUgly}>
+    { showBack &&
+      <TouchableOpacity
+        style={styles.uglyIcon}
+        onPress={() => {
+          if (onBackPress) {
+            onBackPress();
+          } else {
+            goBack();
+          }
+        }}>
+        <MaterialIcons
+          name={'arrow-back-ios'}
+          size={20}
+          color={textPrimary} />
+      </TouchableOpacity>
+    }
+    <TextView style={styles.titleText}>{title}</TextView>
+    { showBack &&
+      <View style={styles.uglyIcon}>
+        <MaterialIcons
+          name={'arrow-back-ios'}
+          size={16}
+          color={'transparent'} />
+      </View>
+    }
+  </View>
+)
+
+const styles = StyleSheet.create({
+  toolbarUgly: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: colorLight
+  },
+  uglyIcon: {
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 16,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  titleText: {
+    flex: 1,
+    color: textPrimary,
+    padding: 8,
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    textTransform: 'uppercase'
+  }
+})

Strides-APP/app/i18n/locales/en.js

@@ -76,6 +76,7 @@ export default {
     topUp: "Purchase Credits",
     topUpWithCard: "Top Up with Card",
     vouchers: "VOUCHERS",
+    voucherDetails: "Voucher Details",
     wallet: "Transactions",
     applyMember: "Apply Membership",
     yourMembers: "Your Membership",
@@ -506,6 +507,9 @@ export default {
     labelSiteName: "Site Name:",
     labelTimeReservation: "Time of Reservation:",
     labelTransactionID: "Transaction ID:",
+    labelPointsRewards: "Points Rewards",
+    labelPointsRewarded: "Points Rewarded",
+    labelVoucherUsage: "Voucher Usage",
     receipt: "Receipt",
     successful: "Successful! ",
     processTitle: "Oops! \nWe’re still processing your receipt",
@@ -556,12 +560,26 @@ export default {
     noData: "No data",
     noMore: "No more",
     voucherType: "Voucher Type",
+    description: "Description",
+    validityPeriod: "Validity Period",
+    voucherCondition: "Voucher Conditions",
+    siteEligibility: "Site Eligibility",
     selectVoucher: "Select Voucher",
+    purchaseVoucher: "Purchase Voucher",
+    confirmPurchase: "You’re purchasing the Voucher for {value} points. Press Confirm to proceed.",
     plsInputPromoCode: "Please input promo code",
     typeOptions: {
       all: "All",
       valueOffset: "Value Offset",
       percentOffset: "Percent Offset"
-    }
+    },
+    conditionDays: "Eligible for usage on",
+    conditionTime: "Eligible for usage during",
+    conditionTypeOnly: "charging only",
+    conditionCountry: "Can only be used in",
+    conditionMinSpend: "Minimum Spend of"
+  },
+  points: {
+    points: "Points"
   }
 }

Strides-APP/app/i18n/locales/zh-TW.js

@@ -75,7 +75,8 @@ export default {
     termsOfUse: "使用條款",
     topUp: "餘額充值",
     topUpWithCard: "使用信用卡充值",
-    vouchers: "代金券",
+    vouchers: "優惠券",
+    voucherDetails: "優惠券詳情",
     wallet: "我的餘額",
     applyMember: "申請會員",
     yourMembers: "我的會員",
@@ -506,6 +507,9 @@ export default {
     labelSiteName: "站點名稱：",
     labelTimeReservation: "預訂時間：",
     labelTransactionID: "交易編號：",
+    labelPointsRewards: "積點累積",
+    labelPointsRewarded: "本次積點獎勵",
+    labelVoucherUsage: "優惠券使用情況",
     receipt: "發票",
     successful: "交易成功！",
     processTitle: "請稍後…\n我們仍在處理您的收據",
@@ -556,12 +560,26 @@ export default {
     noData: "沒有優惠券數據",
     noMore: "已經到底了",
     voucherType: "優惠券類別",
+    description: "優惠券描述",
+    validityPeriod: "有效時間",
+    voucherCondition: "使用規則",
+    siteEligibility: "適用充電站",
     selectVoucher: "選擇優惠券",
+    purchaseVoucher: "兌換優惠券",
+    confirmPurchase: "您將花費 {value} 積點兌換此優惠券，请按确认键继续。",
     plsInputPromoCode: "請鍵入兌換代碼",
     typeOptions: {
       all: "所有",
       valueOffset: "固定額折扣",
       percentOffset: "百分比折扣"
-    }
+    },
+    conditionDays: "可在以下日期使用：",
+    conditionTime: "可在以下時間段使用：",
+    conditionTypeOnly: "類型的充電樁可用",
+    conditionCountry: "僅在以下國家適用：",
+    conditionMinSpend: "最低消費金額"
+  },
+  points: {
+    points: "積點"
   }
 }

Strides-APP/app/i18n/locales/zh.js

@@ -75,7 +75,8 @@ export default {
     termsOfUse: "使用条款",
     topUp: "余额充值",
     topUpWithCard: "使用信用卡充值",
-    vouchers: "优惠券",
+    vouchers: "代金券",
+    voucherDetails: "代金券信息",
     wallet: "我的余额",
     applyMember: "申请会员",
     yourMembers: "我的会员",
@@ -506,6 +507,9 @@ export default {
     labelSiteName: "站点名称：",
     labelTimeReservation: "预订时间：",
     labelTransactionID: "交易编号：",
+    labelPointsRewards: "积分奖励",
+    labelPointsRewarded: "本次奖励积分",
+    labelVoucherUsage: "代金券使用情况",
     receipt: "发票",
     successful: "交易成功！",
     processTitle: "请稍后…\n我们仍在处理您的收据",
@@ -556,12 +560,26 @@ export default {
     noData: "没有代金券数据",
     noMore: "到底了",
     voucherType: "代金券类型",
+    description: "代金券描述",
+    validityPeriod: "有效期",
+    voucherCondition: "使用规则",
+    siteEligibility: "可用站点",
     selectVoucher: "选择代金券",
+    purchaseVoucher: "兑换代金券",
+    confirmPurchase: "您将以 {value} 积分的价格购买此优惠券，请按确认键继续。",
     plsInputPromoCode: "请输入兑换码",
     typeOptions: {
       all: "所有",
       valueOffset: "固定额折扣",
       percentOffset: "百分比折扣"
-    }
+    },
+    conditionDays: "可在以下日期使用：",
+    conditionTime: "可在以下时间段使用：",
+    conditionTypeOnly: "类型的充电桩可用",
+    conditionCountry: "仅在以下国家使用：",
+    conditionMinSpend: "最低消费金额为"
+  },
+  points: {
+    points: "积分"
   }
 }

Strides-APP/app/pages/Router.js

@@ -68,6 +68,7 @@ import VehicleListV2 from './vehicles/VehicleListV2';
 import HistoryList from './wallet/HistoryList';
 import VoucherPage from './vouchers/VoucherPage';
 import VoucherSelect from './vouchers/VoucherSelect';
+import VoucherDetails from './vouchers/VoucherDetails';
 
 export var PageList = {
   'splash': {
@@ -366,6 +367,11 @@ export var PageList = {
     titleScope: 'route.vouchers',
     component: VoucherPage
   },
+  'voucherDetails': {
+    title: app.isWhitelabel ? "Voucher Details" : undefined,
+    titleScope: app.isWhitelabel ? 'route.voucherDetails' : undefined,
+    component: VoucherDetails
+  },
   'selectVoucher': {
     title: "Vouchers",
     titleScope: 'route.vouchers',

Strides-APP/app/pages/chargeV2/PagerUtil.js

@@ -90,9 +90,9 @@ export default PagerUtil = {
   isSelectVoucher: () => {
     return global.chargeSelectVoucher;
   },
-  toSelectVoucher: () => {
+  toSelectVoucher: (chargeBoxId, connectorId) => {
     global.chargeSelectVoucher = true;
-    startPage(PageList.selectVoucher);
+    startPage(PageList.selectVoucher, {chargeBoxId: chargeBoxId, connectorId: connectorId});
   },
   setSelectedVoucher: (voucher) => {
     global.chargeSelectedVoucher = voucher;

Strides-APP/app/pages/chargeV2/SummaryV3.js

@@ -231,6 +231,29 @@ export default class SummaryV3 extends Component {
               </View>
             </View>
           }
+          { utils.isNotEmpty(this.state.summaryInfo.pointsReward) &&
+            <View style={styles.sections}>
+              <TextView style={styles.formTitle}>{$t('receipt.labelPointsRewards')}</TextView>
+              <View style={styles.formRow}>
+                <TextView style={styles.label}>{$t('receipt.labelPointsRewarded')}:</TextView>
+                <TextView style={styles.text}>{this.state.summaryInfo.pointsReward + " " + $t('points.points')}</TextView>
+              </View>
+            </View>
+          }
+          { utils.isNotEmpty(this.state.summaryInfo.vouchers) &&
+            <View style={styles.sections}>
+              <TextView style={styles.formTitle}>{$t('receipt.labelVoucherUsage')}</TextView>
+              { this.state.summaryInfo.vouchers?.map((item, index) => (
+                <View style={styles.formRow} key={index}>
+                  <View style={ui.flex1}>
+                    <TextView style={styles.label}>{item.voucherName}</TextView>
+                    <TextView style={styles.voucherDesc}>{item.voucherDesc}</TextView>
+                  </View>
+                  <TextView style={styles.text}>{"(" + item.voucherValue + ")"}</TextView>
+                </View>)
+              )}
+            </View>
+          }
           { utils.isNotEmpty(this.state.summaryInfo.chargingFee) &&
             <View style={styles.sections}>
               <TextView style={styles.formTitle}>{$t('receipt.breakdownChargingFees')}</TextView>
@@ -461,5 +484,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
     textAlign: 'center',
     paddingTop: 16
+  },
+  voucherDesc: {
+    flex: 1,
+    color: textCancel,
+    fontSize: 13
   }
 });

Strides-APP/app/pages/chargingV2/ChargingPage.js

@@ -464,6 +464,7 @@ export default class ChargingPage extends Component {
             ? <StepAuth
                 status={this.state.connectorInfo?.status}
                 chargeBoxId={this.state.stationInfo.chargeBoxId}
+                connectorId={this.state.stationInfo.connectorId}
                 currentPayment={this.state.currentPayment}
                 onStartCharge={() => this.onStartCharge()}
                 selectedVoucher={this.state.selectedVoucher}

Strides-APP/app/pages/chargingV2/StepAuth.js

@@ -16,6 +16,7 @@ export default StepAuth = ({
   currentPayment,
   onStartCharge,
   chargeBoxId,
+  connectorId=1,
   selectedVoucher={},
   onPaymentMethodChanged
 }) => {
@@ -97,7 +98,7 @@ export default StepAuth = ({
           { app.v3.vouchers &&
           <Pressable
             style={styles.voucherLayout}
-            onPress={() => isAuthentic && PagerUtil.toSelectVoucher()}>
+            onPress={() => isAuthentic && PagerUtil.toSelectVoucher(chargeBoxId, connectorId)}>
             <MaterialCommunityIcons
               name="ticket-percent"
               size={35}

Strides-APP/app/pages/chargingV2/StepStart.js

@@ -102,7 +102,7 @@ export default StepStart = ({
         { app.v3.vouchers &&
           <Pressable
             style={styles.voucherLayout}
-            onPress={() => PagerUtil.toSelectVoucher()}>
+            onPress={() => PagerUtil.toSelectVoucher(connectorInfo.chargeBoxId, connectorInfo.connectorId)}>
             <MaterialCommunityIcons
               name="ticket-percent"
               size={35}

Strides-APP/app/pages/chargingV3/StepAuth.js

@@ -95,7 +95,7 @@ export default StepAuth = ({
                 <TextView style={styles.label}>{$t('voucher.vouchers')}</TextView>
                 <Pressable
                   style={styles.paymentView}
-                  onPress={() => PagerUtil.toSelectVoucher()}>
+                  onPress={() => PagerUtil.toSelectVoucher(connectorInfo.chargeBoxId, connectorInfo.connectorId)}>
                   <MaterialCommunityIcons
                     name="ticket-percent-outline"
                     size={32}

Strides-APP/app/pages/home/DrawerV2.js

@@ -314,7 +314,7 @@ export default DrawerV2 = ({isLogin=false, userInfo, onLogout, sideCountInfo={},
           style={styles.itemButton}
           viewStyle={styles.itemView}
           onClick={() => {
-            startPage(PageList.selectVoucher);
+            startPage(PageList.selectVoucher, {chargeBoxId: "LUMI-TEST", connectorId: 1});
           }}>
           <MaterialCommunityIcons
             style={styles.icon}

Strides-APP/app/pages/vouchers/ListPoints.js

@@ -91,6 +91,25 @@ export default class ListPoints extends Component {
     }
   }
 
+  confirmPurchase(item) {
+    let msg = "" + $t("voucher.confirmPurchase");
+    if (item.purchasePoints) {
+      msg = msg.replace("{value}", item.purchasePoints);
+    } else {
+      msg = msg.replace("{value}", "0");
+    }
+    Dialog.showDialog({
+      title: $t("voucher.purchaseVoucher"),
+      message: msg,
+      ok: $t("nav.confirm"),
+      callback: btn => {
+        if (btn == Dialog.BUTTON_OK) {
+          this.onPurchase(item)
+        }
+      }
+    })
+  }
+
   onPurchase(item) {
     Dialog.showProgressDialog();
     apiVoucher.purchaseVoucher({
@@ -100,7 +119,7 @@ export default class ListPoints extends Component {
       if (res.msg) {
         setTimeout(() => {
           Dialog.showDialog({
-            title: $t("voucher.vouchers"),
+            title: $t("voucher.purchaseVoucher"),
             message: res.msg,
             showCancel: false
           })
@@ -111,7 +130,7 @@ export default class ListPoints extends Component {
       if (err.err) {
         setTimeout(() => {
           Dialog.showDialog({
-            title: $t("common.error"),
+            title: $t("voucher.vouchers"),
             message: err.err,
             showCancel: false
           })
@@ -140,7 +159,7 @@ export default class ListPoints extends Component {
         ? <Button
             viewStyle={styles.purchaseButton}
             borderRadius={6}
-            onClick={() => this.onPurchase(item)}>
+            onClick={() => this.confirmPurchase(item)}>
             <TextView
               style={styles.getForText}>
               {$t("voucher.btnGetFor")}

Strides-APP/app/pages/vouchers/ListVoucher.js

@@ -3,12 +3,13 @@
  * @邠心vbe on 2024/04/09
  */
 import React, { Component } from 'react';
-import { View, Text, StyleSheet, RefreshControl, FlatList } from 'react-native';
+import { View, Text, StyleSheet, RefreshControl, FlatList, Pressable } from 'react-native';
 import { MyRefreshProps } from '../../components/ThemesConfig';
 import TextView from '../../components/TextView';
 import ViewRedeem from './ViewRedeem';
 import VoucherType from './VoucherType';
 import apiVoucher from '../../api/apiVoucher';
+import { PageList } from '../Router';
 
 export default class ListVoucher extends Component {
   constructor(props) {
@@ -65,7 +66,7 @@ export default class ListVoucher extends Component {
         } else {
           this.setState({
             dataList: res.data,
-            hasMore: true
+            hasMore: res.data.length >= 10
           });
         }
       } else {
@@ -110,10 +111,15 @@ export default class ListVoucher extends Component {
     this.getDataList();
   }
 
+  toDetailPage(item) {
+    startPage(PageList.voucherDetails, {id: item.voucherId});
+  }
+
   listItem = ({item, index, separators}) => {
     return (
-      <View
-        style={styles.itemView}>
+      <Pressable
+        style={styles.itemView}
+        onPress={() => this.toDetailPage(item)}>
         <View style={styles.itemContent}>
           <TextView style={styles.voucherTitle}>{item.voucherName}</TextView>
           <TextView style={styles.voucherDesc}>{item.voucherDesc}</TextView>
@@ -128,7 +134,7 @@ export default class ListVoucher extends Component {
           ]}>
           {item.userVoucherStatus}
         </TextView>
-      </View>
+      </Pressable>
     )
   }
 

Strides-APP/app/pages/vouchers/VoucherDetails.js

@@ -0,0 +1,203 @@
+/**
+ * 代金券详情页面
+ * @邠心vbe on 2024/04/17
+ */
+import React, { Component } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import ToolbarUgly from '../../components/ToolbarUgly';
+import TextView from '../../components/TextView';
+import app from '../../../app.json';
+import apiVoucher from '../../api/apiVoucher';
+import Dialog from '../../components/Dialog';
+import utils from '../../utils/utils';
+import { PageList } from '../Router';
+
+export default class VoucherDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      voucherId: "",
+      voucherInfo: {}
+    };
+  }
+
+  componentDidMount() {
+    const params = this.props.route.params;
+    if (params.id) {
+      this.setState({
+        voucherId: params.id
+      }, () => {
+        this.getVoucherDetail();
+      })
+    }
+  }
+
+  getVoucherDetail() {
+    Dialog.showProgressDialog();
+    apiVoucher.getVoucherInfo(this.state.voucherId).then(res => {
+      if (res.data) {
+        this.setState({
+          voucherInfo: res.data
+        })
+      }
+    }).catch(err => {
+      toastShort(err)
+    }).finally(() => {
+      Dialog.dismissLoading();
+    });
+  }
+
+  getDaysText() {
+    if (this.state.voucherInfo.eligibleForUsageOn) {
+      return this.state.voucherInfo.eligibleForUsageOn.join(", ");
+    } else {
+      return "Every day";
+    }
+  }
+
+  getTypeText() {
+    if (this.state.voucherInfo.chargeType) {
+      return this.state.voucherInfo.chargeType;
+    } else {
+      return "AC & DC";
+    }
+  }
+
+  toSiteDetail(id) {
+    utils.toChargeDetailPage(id, "view");
+  }
+
+  render() {
+    return (
+      <View style={ui.flex1}>
+        { !app.isWhitelabel &&
+          <ToolbarUgly
+            title={$t("route.voucherDetails")}/>
+        }
+        <View style={styles.container}>
+          <TextView style={styles.voucherName}>{this.state.voucherInfo.voucherName}</TextView>
+          <EndView half/>
+          <TextView style={styles.labelText}>{$t("voucher.voucherType")}</TextView>
+          <TextView style={styles.valueText}>{this.state.voucherInfo.voucherType}</TextView>
+
+          <TextView style={styles.labelText}>{$t("voucher.description")}</TextView>
+          <TextView style={styles.valueText}>{this.state.voucherInfo.voucherDesc}</TextView>
+
+          <TextView style={styles.labelText}>{$t("voucher.validityPeriod")}</TextView>
+          <TextView style={styles.valueText}>{this.state.voucherInfo.validityPeriod}</TextView>
+
+          <TextView style={styles.labelText}>{$t("voucher.voucherCondition")}</TextView>
+          <View style={styles.olView}>
+            <View style={ui.flexc}>
+              <MaterialIcons
+                style={styles.circleIcon}
+                name="circle"
+                color={textPrimary}
+                size={6}/>
+              <TextView style={styles.valueText}>
+                {$t("voucher.conditionDays")} <Text style={ui.bold}>{this.getDaysText()}</Text>
+              </TextView>
+            </View>
+            <View style={ui.flexc}>
+              <MaterialIcons
+                style={styles.circleIcon}
+                name="circle"
+                color={textPrimary}
+                size={6}/>
+              <TextView style={styles.valueText}>
+                {$t("voucher.conditionTime")} <Text style={ui.bold}>{this.state.voucherInfo.eligibleForUsageDuring}</Text>
+              </TextView>
+            </View>
+            <View style={ui.flexc}>
+              <MaterialIcons
+                style={styles.circleIcon}
+                name="circle"
+                color={textPrimary}
+                size={6}/>
+              <TextView style={styles.valueText}>
+                <Text style={ui.bold}>{this.getTypeText()}</Text> {$t("voucher.conditionTypeOnly")}
+              </TextView>
+            </View>
+            <View style={ui.flexc}>
+              <MaterialIcons
+                style={styles.circleIcon}
+                name="circle"
+                color={textPrimary}
+                size={6}/>
+              <TextView style={styles.valueText}>
+                {$t("voucher.conditionCountry")} <Text style={ui.bold}>{this.state.voucherInfo.country}</Text>
+              </TextView>
+            </View>
+            <View style={ui.flexc}>
+              <MaterialIcons
+                style={styles.circleIcon}
+                name="circle"
+                color={textPrimary}
+                size={6}/>
+              <TextView style={styles.valueText}>
+                {$t("voucher.conditionMinSpend")} <Text style={ui.bold}>{this.state.voucherInfo.minimumSpend}</Text>
+              </TextView>
+            </View>
+          </View>
+
+          <TextView style={styles.labelText}>{$t("voucher.siteEligibility")}</TextView>
+          <View style={styles.olView}>
+            { this.state.voucherInfo.siteNames?.map((item, index) => (
+              <TouchableOpacity
+                style={styles.siteRow}
+                onPress={() => this.toSiteDetail(item.sitePk)}
+                key={index}>
+                <MaterialIcons
+                  style={styles.circleIcon}
+                  name="circle"
+                  color={textPrimary}
+                  size={6}/>
+                <TextView style={ui.link}>{item?.siteName}</TextView>
+              </TouchableOpacity>
+              ))
+            }
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16
+  },
+  voucherName: {
+    color: textPrimary,
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingTop: 4,
+    paddingBottom: 12,
+    borderBottomWidth: 2,
+    borderColor: colorPrimary
+  },
+  labelText: {
+    color: textPrimary,
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16
+  },
+  valueText: {
+    color: textSecondary,
+    fontSize: 14,
+    paddingTop: 4
+  },
+  olView: {
+    paddingLeft: 8
+  },
+  circleIcon: {
+    paddingTop: 3,
+    paddingRight: 8
+  },
+  siteRow: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    flexDirection: 'row'
+  }
+})

Strides-APP/app/pages/vouchers/VoucherSelect.js

@@ -18,9 +18,21 @@ export default class VoucherSelect extends Component {
       refreshing: false,
       selectedVoucher: {}
     };
+    this.params = {
+      chargeBoxId: "",
+      connectorId: ""
+    }
   }
 
   componentDidMount() {
+    const params = this.props.route.params;
+    if (params.chargeBoxId) {
+      this.params.chargeBoxId = params.chargeBoxId
+    }
+    if (params.connectorId) {
+      this.params.connectorId = params.connectorId
+    }
+    console.log("选择优惠券", this.params);
     this.getDataList();
     this.props.navigation.addListener('beforeRemove', (e) => {
       PagerUtil.setSelectedVoucher(this.state.selectedVoucher);
@@ -36,8 +48,7 @@ export default class VoucherSelect extends Component {
 
   getDataList(lastId) {
     apiVoucher.getSelectionVoucher({
-      chargeBoxId: "LUMI-TEST",
-      connectorId: "1",
+      ...this.params,
       voucherType: this.state.voucherType
     }).then(res => {
       if (res.data) {