[ZMA-1026] Update name & avatar permission request flow (Policy 6.1)

src/pages/cart/delivery.tsx

@@ -40,11 +40,7 @@ export const Delivery: FC = () => {
           },
           {
             left: <Icon icon="zi-user" className="my-auto" />,
-            right: (
-              <Suspense fallback={<RequestPersonPickerPhone />}>
-                <PersonPicker />
-              </Suspense>
-            ),
+            right: <RequestPersonPickerPhone />,
           },
           {
             left: <Icon icon="zi-note" className="my-auto" />,

src/pages/cart/person-picker.tsx

@@ -1,21 +1,34 @@
 import { ListItem } from "components/list-item";
 import React, { FC } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import {
+  useRecoilValue,
+  useRecoilValueLoadable,
+  useSetRecoilState,
+} from "recoil";
 import { phoneState, requestPhoneTriesState, userState } from "state";
 
 export const PersonPicker: FC = () => {
-  const user = useRecoilValue(userState);
+  const user = useRecoilValueLoadable(userState);
   const phone = useRecoilValue(phoneState);
 
-  if (!phone) {
-    return <RequestPersonPickerPhone />;
-  }
-
-  return <ListItem title={`${user.name} - ${phone}`} subtitle="Người nhận" />;
+  return (
+    <ListItem
+      title={
+        user.state === "hasValue" ? `${user.contents.name} - ${phone}` : phone
+      }
+      subtitle="Người nhận"
+    />
+  );
 };
 
 export const RequestPersonPickerPhone: FC = () => {
   const retry = useSetRecoilState(requestPhoneTriesState);
+  const phone = useRecoilValueLoadable(phoneState);
+
+  if (phone.state === "hasValue" && phone.contents) {
+    return <PersonPicker />;
+  }
+
   return (
     <ListItem
       onClick={() => retry((r) => r + 1)}

src/pages/index/welcome.tsx

@@ -1,14 +1,10 @@
 import React, { FC } from "react";
 import { Box, Header, Text } from "zmp-ui";
-import { useRecoilValueLoadable } from "recoil";
-import { userState } from "state";
 import logo from "static/logo.png";
 import appConfig from "../../../app-config.json";
 import { getConfig } from "utils/config";
 
 export const Welcome: FC = () => {
-  const user = useRecoilValueLoadable(userState);
-
   return (
     <Header
       className="app-header no-border pl-4 flex-none pb-[6px]"
@@ -22,13 +18,6 @@ export const Welcome: FC = () => {
             />
             <Box>
               <Text.Title size="small">{appConfig.app.title}</Text.Title>
-              {user.state === "hasValue" ? (
-                <Text size="xxSmall" className="text-gray">
-                  Welcome, {user.contents.name}!
-                </Text>
-              ) : (
-                <Text>...</Text>
-              )}
             </Box>
           </Box>
         ) as unknown as string

src/pages/profile.tsx

@@ -3,11 +3,23 @@ import { Box, Header, Icon, Page, Text } from "zmp-ui";
 import subscriptionDecor from "static/subscription-decor.svg";
 import { ListRenderer } from "components/list-renderer";
 import { useToBeImplemented } from "hooks";
+import { useRecoilCallback } from "recoil";
+import { userState } from "state";
 
 const Subscription: FC = () => {
-  const onClick = useToBeImplemented();
+  const requestUserInfo = useRecoilCallback(
+    ({ snapshot }) =>
+      async () => {
+        const userInfo = await snapshot.getPromise(userState);
+        console.warn("Các bên tích hợp có thể sử dụng userInfo ở đây...", {
+          userInfo,
+        });
+      },
+    []
+  );
+
   return (
-    <Box className="m-4" onClick={onClick}>
+    <Box className="m-4" onClick={requestUserInfo}>
       <Box
         className="bg-green text-white rounded-xl p-4 space-y-2"
         style={{

src/state.ts

@@ -14,16 +14,8 @@ import categories from "../mock/categories.json";
 export const userState = selector({
   key: "user",
   get: async () => {
-    try {
-      const { userInfo } = await getUserInfo({ autoRequestPermission: true });
-      return userInfo;
-    } catch (error) {
-      return {
-        id: "",
-        avatar: "",
-        name: "Người dùng Zalo",
-      };
-    }
+    const { userInfo } = await getUserInfo({ autoRequestPermission: true });
+    return userInfo;
   },
 });