[expo] add a placeholder for upfc settings

**Summary** ^^ **Test** I couldn't test it because we didn't build the devclient with react-native-webview. After merging this PR into the master, we need to rebuild the devclient to test. **Issue** - N/A
yssk22 · Oct 20, 2023 · 6eb2291 · 6eb2291
1 parent a1c5885
commit 6eb2291
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 6 deletions.
diff --git a/expo/Screens.tsx b/expo/Screens.tsx
@@ -5,12 +5,14 @@ import S1 from './features/feed/FeedItemScreen';
 import S2 from './features/home/HomeScreen';
 import S3 from './features/settings/theme/ThemeColorSelectorScreen';
 import S4 from './features/settings/theme/ThemeSettingsScreen';
+import S5 from './features/upfc/UPFCSettingsScreen';
 
 const Screens = [
   S0,
   S1,
   S2,
   S3,
   S4,
+  S5,
 ];
 export default Screens;
diff --git a/expo/assets/policy/fcdata.html b/expo/assets/policy/fcdata.html
@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <style type="text/css">
+      body {
+        font-size: 9pt;
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>更新日時 2023年10月30日</p>
+    <p>
+      ハロープロジェクトファンクラブのIDおよびパスワードをアプリに登録すると、アプリ内で
+      ファンクラブサイトから申込済のイベントデータ(イベントタイトル、場所、開催日時、入金ステータス、等)を取得したりElineupmallでの購入履歴を取得することができます。
+      入力したIDとパスワードはそれらが利用可能なサイト(up-fc.jpおよびelineupmall.com)との通信にのみ利用され、モバイルデバイスに保存されますが、ハロー！ファンのサーバーには保存されません。
+      ただし、それぞれのサイトから取得したイベント応募履歴や購入履歴のデータは、将来的なアナリティクス機能の提供のため、匿名化された上でサーバーに送信されることがあります。
+    </p>
+    <p>
+      FCイベントの入金管理機能やグッズの購入履歴管理機能を利用する場合、本規約に同意の上、ご利用ください。
+    </p>
+    <h2>お問い合わせ先</h2>
+    <p>
+      <a href="https://twitter.com/hellofanapp"
+        >https://twitter.com/hellofanapp</a
+      >
+    </p>
+  </body>
+</html>
diff --git a/expo/assets/translations.json b/expo/assets/translations.json
@@ -2,6 +2,9 @@
   "Home": {
     "ja": "ホーム"
   },
+  "I agree": {
+    "ja": "同意します"
+  },
   "Artists": {
     "ja": "アーティスト"
   },
@@ -45,6 +48,9 @@
   "Background Color": {
     "ja": "バックグラウンドカラー"
   },
+  "FC Settings": {
+    "ja": "ファンクラブ設定"
+  },
   "Logout": {
     "ja": "ログアウト"
   }

diff --git a/expo/features/common/hooks/asset.ts b/expo/features/common/hooks/asset.ts
@@ -0,0 +1,25 @@
+import { useState, useEffect, useContext } from "react";
+import * as FileSystem from "expo-file-system";
+import { useAssets } from "expo-asset";
+
+const useAssetContent = (moduleId: number): [string, boolean] => {
+  const [assets] = useAssets([moduleId]);
+  const [state, setState] = useState<{
+    value: string;
+    isLoading: boolean;
+  }>({ value: "", isLoading: true });
+  useEffect(() => {
+    (async () => {
+      if (assets && assets[0].localUri) {
+        const value = await FileSystem.readAsStringAsync(assets[0].localUri);
+        setState({
+          value: value,
+          isLoading: false,
+        });
+      }
+    })();
+  }, [assets]);
+  return [state.value, state.isLoading];
+};
+
+export default useAssetContent;
diff --git a/expo/features/policy/ConsentGate.tsx b/expo/features/policy/ConsentGate.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { View } from "react-native";
+import { Button } from "@rneui/themed";
+import WebView from "react-native-webview";
+import useAssetContent from "@hpapp/features/common/hooks/asset";
+import { t } from "@hpapp/system/i18n";
+import { useColor } from "@hpapp/contexts/settings/theme";
+import { Header } from "@rneui/base";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function ConsentGate({
+  title,
+  moduleId,
+  pass,
+  showHeader,
+  children,
+  onConsent,
+}: {
+  title: string;
+  moduleId: number;
+  pass: boolean;
+  showHeader?: boolean;
+  children: React.ReactNode;
+  onConsent: () => void;
+}) {
+  const insets = useSafeAreaInsets();
+  const [color, contrastColor] = useColor("primary");
+  const [content, isLoading] = useAssetContent(moduleId);
+  if (pass) {
+    return <>{children}</>;
+  }
+  return (
+    <View style={{ flex: 1, paddingBottom: insets.bottom }}>
+      {showHeader && (
+        <Header
+          placement="left"
+          centerComponent={{
+            text: title,
+            style: {
+              color: contrastColor,
+            },
+          }}
+        />
+      )}
+      <>
+        <WebView source={{ html: content }} />
+        <Button
+          title={t("I agree")}
+          onPress={onConsent}
+          loading={isLoading}
+          disabled={isLoading}
+        />
+      </>
+    </View>
+  );
+}
diff --git a/expo/features/settings/SettingsTab.tsx b/expo/features/settings/SettingsTab.tsx
@@ -7,6 +7,7 @@ import { ListItem } from "@rneui/base";
 import { t } from "@hpapp/system/i18n";
 import LogoutListItem from "@hpapp/features/settings/LogoutListItem";
 import VersionSignature from "@hpapp/features/settings/VersionSignature";
+import UPFCSettingsScreen from "@hpapp/features/upfc/UPFCSettingsScreen";
 
 export default function SettingsTab() {
   return (
@@ -15,6 +16,10 @@ export default function SettingsTab() {
         {t("Theme Settings")}
       </NavigationListItem>
       <Divider />
+      <NavigationListItem screen={UPFCSettingsScreen}>
+        {t("FC Settings")}
+      </NavigationListItem>
+      <Divider />
       <LogoutListItem />
       <Divider />
       <VersionSignature />

diff --git a/expo/features/upfc/UPFCSettingsScreen.tsx b/expo/features/upfc/UPFCSettingsScreen.tsx
@@ -0,0 +1,32 @@
+import { t } from "@hpapp/system/i18n";
+import { useSettings } from "@hpapp/contexts/settings";
+import { LocalUserConfigurationSettings } from "@hpapp/contexts/settings/useLocalUserConfig";
+import {
+  defineScreen,
+  useScreenTitle,
+} from "@hpapp/features/root/protected/stack";
+import ConsentGate from "@hpapp/features/policy/ConsentGate";
+
+export default defineScreen("/upfc/settings/", function UPFCSettingScreen() {
+  useScreenTitle(t("FC Settings"));
+  const [userConfig, setUserConfig] = useSettings(
+    LocalUserConfigurationSettings
+  );
+  return (
+    <>
+      <ConsentGate
+        showHeader={false}
+        title={`${t("FC Data Policy")}`}
+        moduleId={require("assets/policy/fcdata.html")}
+        onConsent={() => {
+          const cfg = userConfig!;
+          cfg.consentOnUPFCDataPolicy = true;
+          setUserConfig(cfg);
+        }}
+        pass={userConfig!.consentOnUPFCDataPolicy || false}
+      >
+        <></>
+      </ConsentGate>
+    </>
+  );
+});
diff --git a/expo/package.json b/expo/package.json
@@ -60,6 +60,7 @@
     "react-native-screens": "~3.20.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-web": "~0.18.10",
+    "react-native-webview": "11.26.0",
     "react-relay": "^15.0.0",
     "react-test-renderer": "^18.2.0",
     "ts-node": "^10.9.1"

diff --git a/expo/yarn.lock b/expo/yarn.lock
@@ -4266,6 +4266,11 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
+[email protected], escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
 [email protected], escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -4276,11 +4281,6 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
-escape-string-regexp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
-  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
-
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -5390,7 +5390,7 @@ [email protected]:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-invariant@*, invariant@^2.2.4:
+invariant@*, invariant@2.2.4, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -7971,6 +7971,14 @@ react-native-web@~0.18.10:
     postcss-value-parser "^4.2.0"
     styleq "^0.1.2"
 
+[email protected]:
+  version "11.26.0"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.26.0.tgz#e524992876fe4a79e69905f0fab8949b470e9f16"
+  integrity sha512-4T4CKRm8xlaQDz9h/bCMPGAvtkesrhkRWqCX9FDJEzBToaVUIsV0ZOqtC4w/JSnCtFKKYiaC1ReJtCGv+4mFeQ==
+  dependencies:
+    escape-string-regexp "2.0.0"
+    invariant "2.2.4"
+
 [email protected]:
   version "0.71.8"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.71.8.tgz#4314145341c49448cf7465b93ced52a433a5e191"