[expo] add elineupmall purchase history screen.

**Summary** we need a clear incentive to upload purchase history to our server so we provide a view to review uploaded purchase history. **Test** - expo **Issue** - #176
yssk22 · Jan 8, 2025 · be5b3dd · be5b3dd
1 parent baab600
commit be5b3dd
Show file tree

Hide file tree

Showing 27 changed files with 2,035 additions and 139 deletions.
diff --git a/expo/assets/translations.json b/expo/assets/translations.json
@@ -197,6 +197,24 @@
     "en": "T Shirt",
     "ja": "Tシャツ"
   },
+  "Elineup Mall Purchase History": {
+    "ja": "e-Lineup!Mall購入履歴"
+  },
+  "Purchased On": {
+    "ja": "購入日"
+  },
+  "Unit Price": {
+    "ja": "単価"
+  },
+  "Num Purchased": {
+    "ja": "購入数"
+  },
+  "Total Price": {
+    "ja": "合計金額"
+  },
+  "%{val} JPY": {
+    "ja": "%{val}円"
+  },
   "Elineup Mall Settings": {
     "ja": "e-Lineup!Mallの設定"
   },
@@ -215,8 +233,11 @@
   "Remove From Cart": {
     "ja": "カートから削除"
   },
-  "FC credentials will be used to fetch your purchase history from elineupmall.": {
-    "ja": "ファンクラブの認証情報を使用して、e-Lineup!Mallから購入履歴を取得します。"
+  "Hello!Project FC credentials will be used to fetch your purchase history from elineupmall to check duplicate purchases per an item.": {
+    "ja": "ハロー!プロジェクトファンクラブの認証情報を使用して、e-Lineup!Mallから購入履歴を取得し、商品毎に重複購入を確認することができます。"
+  },
+  "When you enable this, your purchase history will also be automatically uploaded to our server.": {
+    "ja": "これを有効にすると、購入履歴は自動的にサーバーにアップロードされます。"
   },
   "Following settings per a member per a category": {
     "ja": "メンバーごとのカテゴリごとのフォロー設定"

diff --git a/expo/features/common/index.tsx b/expo/features/common/index.tsx
@@ -9,6 +9,7 @@ import Initializer from './internals/Initializer';
 import Link from './internals/Link';
 import Loading from './internals/Loading';
 import Media from './internals/Media';
+import NoImage from './internals/NoImage';
 import RadioButtonGroup from './internals/RadioButtonGroup';
 import Text from './internals/Text';
 import WithSafeArea from './internals/WithSafeArea';
@@ -33,6 +34,7 @@ export {
   Link,
   Loading,
   Media,
+  NoImage,
   RadioButtonGroup,
   Text,
   useErrorMessage,

diff --git a/expo/features/common/internals/NoImage.tsx b/expo/features/common/internals/NoImage.tsx
@@ -0,0 +1,26 @@
+import { Icon } from '@rneui/themed';
+import { View } from 'react-native';
+
+export type NoImageProps = {
+  style?: React.ComponentProps<typeof View>['style'];
+  width: number;
+  height: number;
+};
+
+export default function NoImage({ style, width, height }: NoImageProps) {
+  return (
+    <View
+      style={[
+        style,
+        {
+          justifyContent: 'center',
+          alignItems: 'center',
+          width,
+          height
+        }
+      ]}
+    >
+      <Icon type="material-community" name="image-off-outline" size={width / 2} />
+    </View>
+  );
+}
diff --git a/expo/features/elineupmall/ElineupMallPurchaseHistoryScreen.tsx b/expo/features/elineupmall/ElineupMallPurchaseHistoryScreen.tsx
@@ -0,0 +1,14 @@
+import { defineScreen, useScreenTitle } from '@hpapp/features/common/stack';
+import { t } from '@hpapp/system/i18n';
+
+import ElineupMallPurchaseHistoryList from './internals/ElineupMallPurchaseHistoryList';
+
+export type UPFCWebViewScreenProps = {
+  login?: boolean;
+  uri: string;
+};
+
+export default defineScreen('/elineupmall/history/', function ElineupMallPurchaseHistoryScreen() {
+  useScreenTitle(t('Elineup Mall Purchase History'));
+  return <ElineupMallPurchaseHistoryList />;
+});
diff --git a/expo/features/elineupmall/ElineupMallSettingsScreen.tsx b/expo/features/elineupmall/ElineupMallSettingsScreen.tsx
@@ -3,6 +3,7 @@ import { FontSize } from '@hpapp/features/common/constants';
 import { ListItem, ListItemSwitch } from '@hpapp/features/common/list';
 import { defineScreen, useScreenTitle } from '@hpapp/features/common/stack';
 import { t } from '@hpapp/system/i18n';
+import { color } from '@rneui/base';
 import { Divider } from '@rneui/themed';
 import { ScrollView, StyleSheet, Text } from 'react-native';
 
@@ -19,7 +20,10 @@ export default defineScreen('/elineupmall/settings/', function ElineupMallSettin
           <>
             <Text>{t('Fetch Elnieup Mall Purchase History')}</Text>
             <Text style={styles.sublabel}>
-              {t('FC credentials will be used to fetch your purchase history from elineupmall.')}
+              {t(
+                'Hello!Project FC credentials will be used to fetch your purchase history from elineupmall to check duplicate purchases per an item.'
+              )}
+              {t('When you enable this, your purchase history will also be automatically uploaded to our server.')}
             </Text>
           </>
         }
@@ -42,6 +46,7 @@ export default defineScreen('/elineupmall/settings/', function ElineupMallSettin
 
 const styles = StyleSheet.create({
   sublabel: {
-    fontSize: FontSize.Small
+    fontSize: FontSize.Small,
+    color: 'gray'
   }
 });
diff --git a/expo/features/elineupmall/internals/ElineupMallLimitedTimeItemListItem.tsx b/expo/features/elineupmall/internals/ElineupMallLimitedTimeItemListItem.tsx
@@ -1,15 +1,9 @@
 /* eslint-disable local-rules/no-translation-entry */
-import { useThemeColor } from '@hpapp/features/app/theme';
-import { ExternalImage, Text } from '@hpapp/features/common';
-import { FontSize, Spacing } from '@hpapp/features/common/constants';
-import { ListItem } from '@hpapp/features/common/list';
 import * as date from '@hpapp/foundation/date';
 import { t } from '@hpapp/system/i18n';
-import { Divider } from '@rneui/base';
-import { StyleSheet, View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
-import ElineupMallCartMutationButton from './ElineupMallCartMutationButton';
+import ElineupMallListItem from './ElineupMallListItem';
 import { ElineupMallLimitedTimeItemListItemFragment$key } from './__generated__/ElineupMallLimitedTimeItemListItemFragment.graphql';
 
 const ElineupMallLimitedTimeItemListItemFragmentGraphQL = graphql`
@@ -31,101 +25,28 @@ const ElineupMallLimitedTimeItemListItemFragmentGraphQL = graphql`
 `;
 
 export function ElineupMallLimitedTimeItemListItem({ data }: { data: ElineupMallLimitedTimeItemListItemFragment$key }) {
-  const [color, contrast] = useThemeColor('primary');
   const item = useFragment<ElineupMallLimitedTimeItemListItemFragment$key>(
     ElineupMallLimitedTimeItemListItemFragmentGraphQL,
     data
   );
   const dateString = date.toDateString(item.orderEndAt);
-  const imageUrl = item.images[0].url;
   return (
-    <>
-      <Divider />
-      <ListItem
-        containerStyle={styles.container}
-        rightContent={
-          <View style={styles.right}>
-            <ExternalImage
-              uri={imageUrl}
-              style={styles.image}
-              width={imageSize}
-              height={imageSize}
-              cachePolicy="memory-disk"
-            />
-            <ElineupMallCartMutationButton link={item.permalink} />
-          </View>
+    <ElineupMallListItem
+      permalink={item.permalink}
+      category={t(item.category)}
+      name={item.name}
+      imageUrl={item.images[0].url}
+      enableCartMutation
+      metadata={[
+        {
+          name: t('Order End On'),
+          value: dateString
+        },
+        {
+          name: t('Price'),
+          value: t('%{price} JPY', { price: item.price })
         }
-      >
-        <View style={styles.nameAndMetadata}>
-          <View style={styles.metadataRowCategory}>
-            <Text style={[styles.categoryText, { color, backgroundColor: contrast }]}>{t(item.category)}</Text>
-          </View>
-          <Text style={styles.name}>{item.name}</Text>
-          <View style={styles.metadata}>
-            <View style={styles.metadataRow}>
-              <Text style={styles.metadataLabel} numberOfLines={1} ellipsizeMode="tail">
-                {t('Order End On')}
-              </Text>
-              <Text style={styles.metadataValue} numberOfLines={1} ellipsizeMode="tail">
-                {dateString}
-              </Text>
-            </View>
-            <View style={styles.metadataRow}>
-              <Text style={styles.metadataLabel} numberOfLines={1} ellipsizeMode="tail">
-                {t('Price')}
-              </Text>
-              <Text style={styles.metadataValue} numberOfLines={1} ellipsizeMode="tail">
-                {t('%{price} JPY', { price: item.price })}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </ListItem>
-    </>
+      ]}
+    />
   );
 }
-
-const imageSize = 160;
-
-const styles = StyleSheet.create({
-  container: {
-    minHeight: 180,
-    padding: Spacing.Small
-  },
-  right: {},
-  image: {
-    width: imageSize,
-    height: imageSize
-  },
-  nameAndMetadata: {
-    flexDirection: 'column',
-    marginRight: Spacing.Medium,
-    flexGrow: 1
-  },
-  name: {
-    flexGrow: 1,
-    fontWeight: 'bold'
-  },
-  metadata: {
-    flexGrow: 1
-  },
-  metadataRow: {
-    flexDirection: 'row'
-  },
-  metadataRowCategory: {
-    alignItems: 'flex-start'
-  },
-  metadataLabel: {
-    width: 80,
-    marginRight: Spacing.Small,
-    fontSize: FontSize.Small
-  },
-  metadataValue: {},
-  dateString: {},
-  categoryText: {
-    fontSize: FontSize.Small,
-    fontWeight: 'bold',
-    textAlign: 'right',
-    marginBottom: Spacing.XSmall
-  }
-});