[expo] support purchase history check on HomeTabGoods feed

**Summary**

We use UPFC credentials to authenticate elineupmall.com and scrape purchase history from the (only) first page.

With that information, we can display the status of the latest purchase on the HomeTabGoods feed.

**Test**

- yarn test

**Issue**

- #176

expo/assets/translations.json

@@ -198,10 +198,22 @@
     "ja": "Tシャツ"
   },
   "Elineup Mall Settings": {
-    "ja": "イーラインナップモールの設定"
+    "ja": "Elineup!Mallの設定"
   },
-  "Order End At": {
-    "ja": "販売終了日時"
+  "Fetch Elnieup Mall Purchase History": {
+    "ja": "Elineup!Mallの購入履歴を取得"
+  },
+  "Ordered On": {
+    "ja": "注文日"
+  },
+  "FC credentials will be used to fetch your purchase history from elineupmall.": {
+    "ja": "ファンクラブの認証情報を使用して、Elineup!Mallから購入履歴を取得します。"
+  },
+  "Following settings per a member per a category": {
+    "ja": "メンバーごとのカテゴリごとのフォロー設定"
+  },
+  "Order End On": {
+    "ja": "販売終了日"
   },
   "Price": {
     "ja": "価格"

expo/features/app/settings/internals/SettingsUserConfig.ts

@@ -12,6 +12,9 @@ export type UserConfig = {
   consentOnToS?: boolean;
   consentOnUPFCDataPolicy?: boolean;
 
+  elineupmallFetchPurchaseHistory: boolean;
+
+  // deprecated
   amebloOptimizedView: boolean;
   feedUseMemberTaggings: boolean;
 
@@ -27,6 +30,8 @@ export const SettingsUserConfigDefault: UserConfig = {
   consentOnToS: false,
   consentOnUPFCDataPolicy: false,
 
+  elineupmallFetchPurchaseHistory: false,
+
   amebloOptimizedView: false,
   feedUseMemberTaggings: true,
 

expo/features/elineupmall/ElineupMallSettingsScreen.tsx

@@ -1,13 +1,47 @@
+import { useUserConfig, useUserConfigUpdator } from '@hpapp/features/app/settings';
+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 { Divider } from '@rneui/themed';
+import { ScrollView, StyleSheet, Text } from 'react-native';
 
 import ElineupMallSettingsFollowings from './internal/settings/ElineupMallSettingsFollowings';
 
 export default defineScreen('/elineupmall/settings/', function ElineupMallSettingsScreen() {
   useScreenTitle(t('Elineup Mall Settings'));
+  const config = useUserConfig();
+  const updator = useUserConfigUpdator();
   return (
-    <>
+    <ScrollView>
+      <ListItemSwitch
+        label={
+          <>
+            <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.')}
+            </Text>
+          </>
+        }
+        value={config?.elineupmallFetchPurchaseHistory ?? false}
+        onValueChange={(value) => {
+          updator({
+            ...config!,
+            elineupmallFetchPurchaseHistory: value
+          });
+        }}
+      />
+      <Divider />
+      <ListItem>
+        <Text>{t('Following settings per a member per a category')}</Text>
+      </ListItem>
       <ElineupMallSettingsFollowings />
-    </>
+    </ScrollView>
   );
 });
+
+const styles = StyleSheet.create({
+  sublabel: {
+    fontSize: FontSize.Small
+  }
+});

expo/features/elineupmall/internal/ElineupMallLimitedTimeItemList.tsx

@@ -1,4 +1,5 @@
 import { ListItemLoadMore } from '@hpapp/features/common/list';
+import { ElineupMallPurchaseHistoryItem } from '@hpapp/features/elineupmall/scraper';
 import { useLazyReloadableQuery } from '@hpapp/system/graphql/hooks';
 import { FlatList, RefreshControl } from 'react-native';
 import { graphql, usePaginationFragment } from 'react-relay';
@@ -26,6 +27,7 @@ const ElineupMallLimitedTimeItemListQueryFragmentGraphQL = graphql`
       edges {
         node {
           id
+          permalink
           ...ElineupMallLimitedTimeItemListItemFragment
         }
       }
@@ -44,12 +46,14 @@ export type ElineupMallLimitedTimeItemListProps = {
   }[];
   memberIds: string[];
   categories: ElineupMallItemCategory[];
+  historyMap?: Map<string, ElineupMallPurchaseHistoryItem>;
 };
 
 export default function ElineupMallLimitedTimeItemList({
   memberCategories,
   memberIds,
-  categories
+  categories,
+  historyMap
 }: ElineupMallLimitedTimeItemListProps) {
   const { data, isReloading, reload } = useLazyReloadableQuery<ElineupMallLimitedTimeItemListQuery>(
     ElineupMallLimitedTimeItemListQueryGraphQL,
@@ -72,7 +76,8 @@ export default function ElineupMallLimitedTimeItemList({
       keyExtractor={(item) => item!.node!.id}
       data={histories.data.elineupMallItems!.edges}
       renderItem={({ item, index }) => {
-        return <ElineupMallLimitedTimeItemListItem data={item!.node!} />;
+        const historyItem = historyMap?.get(item?.node?.permalink ?? '');
+        return <ElineupMallLimitedTimeItemListItem data={item!.node!} purchaseHistoryItem={historyItem} />;
       }}
       onEndReachedThreshold={0.01}
       onEndReached={() => {