Enhancement voucher

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

@@ -255,6 +255,8 @@ export default {
   charging: {
     AC: "AC",
     DC: "DC",
+    onlyAC: "AC Only",
+    onlyDC: "DC Only",
     Chademo: "CHAdeMO",
     acChargers: "AC Chargers",
     additionalInfo: "Additional Info",
@@ -567,7 +569,7 @@ export default {
     siteEligibility: "Site Eligibility",
     selectVoucher: "Select Voucher",
     purchaseVoucher: "Purchase Voucher",
-    confirmPurchase: "You’re purchasing the Voucher for {value} points. Press Confirm to proceed.",
+    confirmPurchase: "{value} Points will be deducted. This will be non-refundable or transferable. Press CONFIRM to proceed.",
     plsInputPromoCode: "Please input promo code",
     typeOptions: {
       all: "All",

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

@@ -255,6 +255,8 @@ export default {
   charging: {
     AC: "AC",
     DC: "DC",
+    onlyAC: "僅AC充電器",
+    onlyDC: "僅DC充電器",
     Chademo: "CHAdeMO",
     acChargers: "AC充電器",
     additionalInfo: "附加訊息",

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

@@ -255,6 +255,8 @@ export default {
   charging: {
     AC: "AC交流",
     DC: "DC直流",
+    onlyAC: "仅AC充电器",
+    onlyDC: "仅DC充电器",
     Chademo: "CHAdeMO",
     acChargers: "AC交流充电器",
     additionalInfo: "附加信息",

Strides-APP/app/pages/Router.js

@@ -369,8 +369,8 @@ export var PageList = {
     component: VoucherPage
   },
   'voucherDetails': {
-    title: app.isWhitelabel ? "Voucher Details" : undefined,
-    titleScope: app.isWhitelabel ? 'route.voucherDetails' : undefined,
+    title: "Voucher Details",
+    titleScope: 'route.voucherDetails',
     component: VoucherDetails
   },
   'selectVoucher': {
@@ -379,8 +379,8 @@ export var PageList = {
     component: VoucherSelect
   },
   'pointsHistory': {
-    title: app.isWhitelabel ? "Points History" : undefined,
-    titleScope: app.isWhitelabel ? 'route.pointsHistory' : undefined,
+    title: "Points History",
+    titleScope: 'route.pointsHistory',
     component: PointsHistory
   },
   'settings': {
@@ -390,6 +390,13 @@ export var PageList = {
   }
 }
 
+export const setPageList = (list) => {
+  if (list) {
+    PageList = list;
+    //console.log("设置List", PageList);
+  }
+}
+
 const Stack = createStackNavigator();
 enableScreens();
 
@@ -450,7 +457,7 @@ function getPages() {
   if (bakPages == undefined) {
     bakPages = Object.assign({}, PageList);
   } else {
-    PageList = bakPages;
+    setPageList(bakPages);
   }
   for (const page in bakPages) {
     var p = bakPages[page]
@@ -464,7 +471,7 @@ function getPages() {
       />
     );
   }
-  PageList = keys;
+  setPageList(keys);
   return pages;
 }
 

Strides-APP/app/pages/RouterV2.js

@@ -0,0 +1,142 @@
+/**
+ * 路由配置文件
+ * @邠心vbe on 2021/03/22
+ */
+import React, { useEffect, useRef } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
+import { enableScreens } from 'react-native-screens';
+import { BackButton } from '../components/Toolbar';
+import app from '../../app.json';
+import { PageList, setPageList } from './Router';
+import ToolbarUgly from '../components/ToolbarUgly';
+const Stack = createStackNavigator();
+enableScreens();
+
+/**
+ * 配置APP主题色
+ */
+const themeColor = {
+  text: textPrimary,
+  card: colorThemes,
+  primary: colorPrimary,
+  background: pageBackground,
+  notification: colorDark
+}
+
+const noTitle = (opt = {}) => {
+  return {
+    title: isIOS ? 'Back' : app.displayName,
+    headerShown: false,
+    ...opt
+  }
+}
+
+/**
+ * 配置标题
+ * @param {String} title 页面标题
+ * @param {Object} opt 标题栏选项
+ * @returns 
+ */
+const Title = (title, opt = {}, titleScope) => {
+  const options = {
+    headerShown: true,
+    headerStyle: {
+      ...titleHeight(),
+      elevation: 0,
+      shadowOpacity: 0,
+      borderBottomWidth: 0,
+      backgroundColor: app.isWhitelabel ? colorLight : colorPrimary //配置标题栏背景
+    },
+    headerTintColor: pageTitleTint, //配置标题栏文字和图标颜色
+    headerBackTitle: ' ', //配置iOS返回按钮文字
+    headerBackTitleVisible: false,
+    ...opt
+  }
+  if (titleScope && $t) {
+    options.header = () => <ToolbarUgly scope={titleScope}/>
+    //options.headerTitle = () => <HeaderTitle scope={titleScope}/>
+  } else {
+    options.title = title
+  }
+  options.headerLeft = () => <BackButton/>
+  return options;
+}
+
+
+var bakPages = undefined;
+
+function getPages() {
+  let pages = [], keys = {};
+  if (bakPages == undefined) {
+    bakPages = Object.assign({}, PageList);
+  } else {
+    setPageList(bakPages);
+  }
+  for (const page in bakPages) {
+    var p = bakPages[page]
+    keys[page] = page;
+    pages.push(
+      <Stack.Screen
+        key={page}
+        name={page}
+        component={p.component}
+        options={p.title ? Title(p.title, p.options, p.titleScope) : noTitle(p.options)}
+      />
+    );
+  }
+  setPageList(keys);
+  return pages;
+}
+
+const RouterV2 = () => {
+  const navigation = useRef();
+  useEffect(() => {
+    //注入全局方法
+    global.startPage = (name, params = {}) => {
+      navigation.current?.navigate(name, params);
+    }
+    global.dispatchPage = (params) => {
+      navigation.current?.dispatch(params);
+    }
+    global.goBack = () => {
+      if (global.pageBackFallback && global.pageBackFallback.names) {
+        //console.log("覆盖返回", navigation.current.getCurrentRoute()?.name);
+        if (global.pageBackFallback.names.indexOf(navigation.current.getCurrentRoute()?.name) >= 0) {
+          global.pageBackFallback?.callback();
+          global.pageBackFallback = undefined;
+          return;
+        }
+      }
+      if (navigation.current?.canGoBack()) {
+        navigation.current?.goBack();
+      } else {
+        startPage(PageList.home);
+      }
+    }
+    return (() => {
+      global.startPage = null;
+      global.goBack = null;
+    });
+  }, []);
+  return (
+    <NavigationContainer
+      ref={navigation}
+      theme={{
+        dark: darkMode,
+        colors: themeColor
+      }}>
+      <Stack.Navigator
+        initialRouteName='splash'
+        screenOptions={{animationEnabled: true, ...TransitionPresets.SlideFromRightIOS }}>
+        {getPages()}
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
+}
+
+const titleHeight = () => {
+  return isIOS ? {} : {height: toolbarSize};
+}
+
+export default RouterV2;

Strides-APP/app/pages/alert/ViewUtil.js

@@ -1,3 +1,7 @@
+/**
+ * 轮播图指示器
+ * @邠心vbe on 2024/02/07
+ */
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 

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

@@ -185,6 +185,11 @@ export default DrawerV2 = ({isLogin=false, userInfo, onLogout, sideCountInfo={},
               color={textPrimary}
               size={24}/>
             <TextView style={styles.label}>{$t('voucher.vouchers')}</TextView>
+            <TextView
+              style={styles.balanceText}
+              fixedAlign={false}>
+              <Text style={styles.balanceText2}>{sideCountInfo?.activeVoucherCount || 0}</Text>  Active
+            </TextView>
           </Button>
         }
       { (app.notifications.enable && isLogin) &&

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

@@ -8,7 +8,6 @@ import { MyRefreshProps } from '../../components/ThemesConfig';
 import TextView from '../../components/TextView';
 import Dialog from '../../components/Dialog';
 import apiVoucher from '../../api/apiVoucher';
-import ToolbarUgly from '../../components/ToolbarUgly';
 import app from '../../../app.json';
 
 export default class PointsHistory extends Component {
@@ -112,30 +111,24 @@ export default class PointsHistory extends Component {
 
   render() {
     return (
-      <View style={ui.flex1}>
-        { !app.isWhitelabel &&
-          <ToolbarUgly
-            title={$t("route.pointsHistory")}/>
+      <FlatList
+        style={styles.listView}
+        data={this.state.dataList}
+        renderItem={this.listItem}
+        ItemSeparatorComponent={this.divideView}
+        ListFooterComponent={this.bottomView}
+        keyExtractor={item => item.pointsHistoryId}
+        onEndReached={() => this.getNextPage()}
+        onEndReachedThreshold={0.3}
+        refreshControl={
+          <RefreshControl
+            {...MyRefreshProps()}
+            refreshing={this.state.refreshing}
+            onRefresh={() => this.onRefresh()}
+          />
         }
-        <FlatList
-          style={styles.listView}
-          data={this.state.dataList}
-          renderItem={this.listItem}
-          ItemSeparatorComponent={this.divideView}
-          ListFooterComponent={this.bottomView}
-          keyExtractor={item => item.pointsHistoryId}
-          onEndReached={() => this.getNextPage()}
-          onEndReachedThreshold={0.3}
-          refreshControl={
-            <RefreshControl
-              {...MyRefreshProps()}
-              refreshing={this.state.refreshing}
-              onRefresh={() => this.onRefresh()}
-            />
-          }
-          ListEmptyComponent={<Text style={styles.noData}>{$t('points.noData')}</Text>}
-        />
-      </View>
+        ListEmptyComponent={<Text style={styles.noData}>{$t('points.noData')}</Text>}
+      />
     );
   }
 }

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

@@ -4,7 +4,6 @@
  */
 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';
@@ -71,94 +70,88 @@ export default class VoucherDetails extends Component {
 
   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>
+      <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.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.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}>
+        <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={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>
+              <TextView style={ui.link}>{item?.siteName}</TextView>
+            </TouchableOpacity>
+            ))
+          }
         </View>
       </View>
     );