@amityco/react-native-social-uikit 4.0.0 → 4.0.1-324acbfd.0

package/src/social/features/user/CreateProfile/hooks/useCreateProfile.ts

@@ -0,0 +1,186 @@
+import * as z from 'zod';
+import { useEffect, useRef } from 'react';
+import { useStyles } from '../styles';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { Client, UserRepository } from '@amityco/ts-sdk-react-native';
+import { useToast } from '../../../../../core/stores/slices/toastSlice';
+import { CHARACTER_LIMIT, ERROR_CODE } from '../../../../../core/constants';
+import { PageID } from '../../../../enums';
+import { useAmityPage } from '../../../../hooks';
+import { useNetInfo } from '@react-native-community/netinfo';
+import { useUpload } from '../../../../../core/hooks';
+
+// A visitor session is read-only, so the avatar cannot be uploaded while the
+// page is shown (still a visitor). Instead we hold the locally picked image
+// (just its uri) and upload it AFTER Client.login signs the user in.
+export type LocalImage = { uri: string };
+
+// The success toast is hosted inside this page's tree. onCreated typically
+// tears that tree down (host swaps to the signed-in app), which would unmount
+// the toast before it finishes fading in. Defer onCreated so the success toast
+// stays visible across the transition. Sized to the toast fade-in + a brief
+// display window.
+const ON_CREATED_DELAY = 800;
+
+const schema = z.object({
+  image: z.custom<LocalImage>().nullish(),
+  displayName: z.string().min(1).max(CHARACTER_LIMIT.USER_DISPLAY_NAME),
+  description: z.string().max(CHARACTER_LIMIT.USER_DESCRIPTION).optional(),
+});
+
+export type CreateProfileFormValues = z.infer<typeof schema>;
+
+type CreatedUser = { userId: string; displayName: string };
+
+type UseCreateProfileParams = {
+  userId: string;
+  authToken?: string;
+  onCreated?: (user: CreatedUser) => void;
+};
+
+// The provider owns visitor login; this page performs the real signed-in login
+// itself on save (mirroring the Web UIKit's CreateUserProfilePage). Logging in
+// with a userId creates the user on the network if it does not exist yet and
+// sets the initial display name — the visitor -> signed-in transition. The host
+// then settles the session by passing the returned userId to the provider.
+export const useCreateProfile = ({
+  userId,
+  authToken,
+  onCreated,
+}: UseCreateProfileParams) => {
+  const { styles, theme } = useStyles();
+  const { accessibilityId } = useAmityPage({
+    pageId: PageID.create_user_profile_page,
+  });
+
+  const { showToast, hideToast } = useToast();
+  const { isConnected } = useNetInfo();
+  const { uploadImage } = useUpload();
+
+  // Tracks the deferred onCreated call so it can be cleared if the page
+  // unmounts before it fires.
+  const onCreatedTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+  useEffect(() => () => clearTimeout(onCreatedTimer.current), []);
+
+  const {
+    watch,
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting },
+  } = useForm<CreateProfileFormValues>({
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+    defaultValues: {
+      image: null,
+      displayName: '',
+      description: '',
+    },
+  });
+
+  const sessionHandler: Amity.SessionHandler = {
+    sessionWillRenewAccessToken(renewal) {
+      renewal.renew();
+    },
+  };
+
+  const { mutateAsync } = useMutation<
+    CreatedUser,
+    Error,
+    CreateProfileFormValues
+  >({
+    mutationKey: ['create-user-profile', userId],
+    onMutate: () => {
+      // Long-running toast shown while the SDK calls run, matching the loading
+      // toast used by other composers (e.g. PollPostComposer).
+      showToast({ message: 'Creating profile...', type: 'loading' });
+    },
+    mutationFn: async (data) => {
+      let loginParam: Amity.ConnectClientParams = {
+        userId,
+        displayName: data.displayName || undefined,
+      };
+      if (authToken && authToken.length > 0) {
+        loginParam = { ...loginParam, authToken };
+      }
+
+      await Client.login(loginParam, sessionHandler);
+
+      // The avatar upload is a write, which a visitor session cannot perform.
+      // Now that login has signed the user in, upload the locally picked image
+      // and then apply the remaining profile fields (about + avatar).
+      let avatarFileId: string | undefined;
+      if (data.image?.uri) {
+        const uploaded = await uploadImage({ file: data.image.uri });
+        avatarFileId = uploaded?.data?.[0]?.fileId;
+      }
+
+      // displayName is set during login; apply the remaining fields here.
+      const payload: Parameters<typeof UserRepository.updateUser>[1] = {
+        description: data.description || undefined,
+        avatarFileId,
+      };
+
+      if (payload.description != null || payload.avatarFileId != null) {
+        await UserRepository.updateUser(userId, payload);
+      }
+
+      return { userId, displayName: data.displayName || '' };
+    },
+    onSuccess: (createdUser) => {
+      // Replace the loading toast in-place (no hideToast first — a hide->show
+      // double dispatch can cancel the success toast's fade-in before it shows).
+      showToast({
+        type: 'success',
+        message: 'Successfully created your profile!',
+      });
+      // Defer the transition briefly so the toast starts showing here before the
+      // host swaps screens. The toast state is shared (Redux), so it keeps
+      // displaying on the destination (signed-in) screen too.
+      onCreatedTimer.current = setTimeout(
+        () => onCreated?.(createdUser),
+        ON_CREATED_DELAY
+      );
+    },
+    onError: (error) => {
+      hideToast();
+      if (error.message?.includes(ERROR_CODE.BLOCKED_WORD)) {
+        showToast({
+          type: 'informative',
+          message: "Your profile wasn't saved as it contains a blocked word.",
+        });
+        return;
+      }
+      showToast({
+        type: 'informative',
+        message: 'Failed to save your profile. Please try again.',
+      });
+    },
+  });
+
+  const onSubmit = async (data: CreateProfileFormValues) => {
+    if (isConnected === false) {
+      showToast({
+        type: 'informative',
+        message: 'Failed to save your profile. Please try again.',
+      });
+      return;
+    }
+    await mutateAsync(data);
+  };
+
+  return {
+    styles,
+    theme,
+    watch,
+    control,
+    handleSubmit,
+    onSubmit,
+    isValid,
+    isSubmitting,
+    accessibilityId,
+  };
+};

package/src/social/features/user/CreateProfile/index.ts

@@ -0,0 +1,2 @@
+export { CreateProfile } from './CreateProfile';
+export type { CreateProfileProps } from './CreateProfile';

package/src/social/features/user/CreateProfile/styles.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../../core/providers/AmityUIKitProvider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    keyboardAvoidingView: {
+      flex: 1,
+    },
+    contentContainer: {
+      paddingVertical: 16,
+    },
+    inputContainer: {
+      paddingHorizontal: 16,
+      paddingTop: 24,
+    },
+    submitButtonContainer: {
+      padding: 16,
+      borderTopWidth: 1,
+      paddingBottom: 16,
+      borderTopColor: theme.colors.baseShade4,
+      backgroundColor: theme.colors.background,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/social/features/user/Profile/components/Header/hooks/useHeader.ts

@@ -8,7 +8,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../../../../core/routes/RouteParamList';
 import { UserRelationshipTab } from '../../../../../../types';
 import { useBehaviour } from '../../../../../../providers/BehaviourProvider';
-import { useBlockUser } from '../../../../../../hooks';
+import { useBlockUser, useGlobalBehavior } from '../../../../../../hooks';
 import useAuth from '../../../../../../../core/hooks/useAuth';
 import { useFollowUser } from '../../../../../../hooks/queries/useFollowUser';
 import useSocialSettings from '../../../../../../../core/hooks/useSocialSettings';
@@ -31,6 +31,7 @@ export function useHeader(user?: Amity.User) {
   const { openBottomSheet, closeBottomSheet, bottomSheetHeight } =
     useBottomSheet();
   const { showToast } = useToast();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const {
     followUser,
     unfollowUser,
@@ -56,7 +57,9 @@ export function useHeader(user?: Amity.User) {
 
   const handleFollow = () => {
     if (!user?.userId) return;
-    followUser(user.userId);
+    handleGlobalBehavior({
+      defaultBehavior: () => followUser(user.userId),
+    });
   };
 
   const handleUnfollow = () => {

package/src/social/hooks/index.ts

@@ -35,3 +35,4 @@ export * from './usePostSubscription';
 export * from './useRoomSubscription';
 export * from './queries/useFlagPost';
 export * from './queries/useClosePoll';
+export * from './useGlobalBehavior';

package/src/social/hooks/useGlobalBehavior.ts

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import useAuth from '../../core/hooks/useAuth';
+import { useBehaviour } from '../providers/BehaviourProvider';
+import { useToast } from '../../core/stores/slices/toastSlice';
+import { VISITOR_USER_ACTION_TOAST } from '../../core/constants';
+
+const TOAST_DURATION = 3000;
+
+/**
+ * Mirrors the Web UIKit's useGlobalBehavior: gate a restricted action behind
+ * the visitor/bot check. For signed-in users the default behaviour runs; for
+ * visitors the AmityGlobalBehavior.handleVisitorUserAction override is
+ * called when provided, otherwise a "create an account or sign in" toast is
+ * shown.
+ */
+export const useGlobalBehavior = () => {
+  const { isVisitorOrBot } = useAuth();
+  const { AmityGlobalBehavior } = useBehaviour();
+  const { showToast } = useToast();
+
+  const handleGlobalBehavior = useCallback(
+    ({ defaultBehavior }: { defaultBehavior?: () => void }) => {
+      if (isVisitorOrBot) {
+        if (AmityGlobalBehavior?.handleVisitorUserAction) {
+          return AmityGlobalBehavior.handleVisitorUserAction();
+        }
+        return showToast({
+          message: VISITOR_USER_ACTION_TOAST,
+          type: 'informative',
+          duration: TOAST_DURATION,
+        });
+      }
+      return defaultBehavior?.();
+    },
+    [isVisitorOrBot, AmityGlobalBehavior, showToast]
+  );
+
+  return { handleGlobalBehavior, isVisitorOrBot };
+};

package/src/social/hooks/usePostPermission.ts

@@ -12,13 +12,14 @@ type UsePostPermissionParams = {
 };
 
 export function usePostPermission({ community }: UsePostPermissionParams) {
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
   const [hasPostPermission, setHasPostPermission] = useState(false);
 
   const isOnlyAdminCanPost =
     community?.postSetting === CommunityPostSettings.ONLY_ADMIN_CAN_POST;
 
   useEffect(() => {
+    if (isVisitorOrBot) return;
     if (!community?.communityId || !client?.userId) return;
 
     CommunityRepository.Membership.getMembers(
@@ -41,6 +42,7 @@ export function usePostPermission({ community }: UsePostPermissionParams) {
     client?.userId,
     isOnlyAdminCanPost,
     community?.isJoined,
+    isVisitorOrBot,
   ]);
 
   return hasPostPermission;

package/src/social/hooks/useStoryPermission.ts

@@ -4,17 +4,19 @@ import useSocialSettings from '../../core/hooks/useSocialSettings';
 import { checkStoryPermission, isAdmin } from '../utils/permissions';
 
 export function useStoryPermission(communityId?: string) {
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
   const { socialSettings } = useSocialSettings();
   const user = useUser(client?.userId || '');
 
   const isGlobalAdmin = isAdmin(user?.roles);
 
-  const hasStoryPermission = !communityId
-    ? socialSettings?.story?.allowAllUserToCreateStory
-    : socialSettings?.story?.allowAllUserToCreateStory ||
-      isGlobalAdmin ||
-      checkStoryPermission(client, communityId);
+  const hasStoryPermission =
+    !isVisitorOrBot &&
+    (!communityId
+      ? socialSettings?.story?.allowAllUserToCreateStory
+      : socialSettings?.story?.allowAllUserToCreateStory ||
+        isGlobalAdmin ||
+        checkStoryPermission(client, communityId));
 
   return { hasStoryPermission };
 }

package/src/social/index.tsx

@@ -2,6 +2,7 @@ export { default as AmityCreateStoryPage } from './features/story/Create';
 export { default as AmityDraftStoryPage } from './features/story/Draft/Draft';
 export { default as AmityViewStoryPage } from './features/story/View/View';
 export { default as AmitySocialHomePage } from './screens/SocialHomePage';
+export { VisitorUsageLimit } from './screens/VisitorUsageLimit';
 export { default as AmitySocialGlobalSearchPage } from './screens/SocialGlobalSearch';
 export { default as AmityPostDetailPage } from './features/post/Detail';
 export { default as AmityPostTargetSelectionPage } from './features/post/TargetSelection';
@@ -22,6 +23,7 @@ export { default as AmityLivestreamPlayerPage } from './features/livestream/Play
 export {
   UserRelationshipScreen as AmityUserRelationshipPage,
   EditUserScreen as AmityEditUserProfilePage,
+  CreateUserProfileScreen as AmityCreateProfilePage,
   UserProfileScreen as AmityUserProfilePage,
   BlockedUsersScreen as AmityBlockedUsersPage,
   UserPendingFollowRequests as AmityUserPendingFollowRequestsPage,

package/src/social/providers/BehaviourProvider.tsx

@@ -14,6 +14,7 @@ export const BehaviourProvider = ({
 }: IBehavioudProviderProps) => {
   const defaultBehaviour = useMemo(
     () => ({
+      AmityGlobalBehavior: {},
       AmitySocialHomePageBehaviour: {},
       AmityGlobalFeedComponentBehavior: {},
       AmityPostContentComponentBehavior: {},

package/src/social/screens/CreateUserProfile/CreateUserProfile.tsx

@@ -0,0 +1,19 @@
+import {
+  CreateProfile,
+  CreateProfileProps,
+} from '../../features/user/CreateProfile';
+
+export type CreateUserProfilePageProps = CreateProfileProps;
+
+// Unlike EditUserScreen, this page is rendered directly by the host (e.g. in
+// visitor mode) and driven by props, mirroring the Web UIKit's
+// AmityCreateProfilePage usage — not by a navigation route.
+export function CreateUserProfileScreen(props: CreateUserProfilePageProps) {
+  return <CreateProfile {...props} />;
+}
+
+// AmityPageRenderer derives its navigator's initialRouteName from the wrapped
+// component's displayName. This must match the pass-through route registered
+// for this page in AmityPageRenderer, otherwise React Navigation throws
+// "Couldn't find a screen named '...' to use as 'initialRouteName'".
+CreateUserProfileScreen.displayName = 'AmityCreateUserProfilePage';

package/src/social/screens/CreateUserProfile/index.ts

@@ -0,0 +1,2 @@
+export { CreateUserProfileScreen } from './CreateUserProfile';
+export type { CreateUserProfilePageProps } from './CreateUserProfile';

package/src/social/screens/SocialHomePage/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import CustomSocialTab from '../../components/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../hooks';
@@ -20,7 +20,7 @@ const PROFILE_TAB = 'Profile';
 
 const AmitySocialHomePage = () => {
   const theme = useTheme() as MyMD3Theme;
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
 
   const styles = StyleSheet.create({
     container: {
@@ -52,8 +52,25 @@ const AmitySocialHomePage = () => {
     keys: ['text'],
   }) as string[];
 
-  const [activeTab, setActiveTab] = useState<string>(newsFeedTab);
-  const visitedTabs = useRef<Set<string>>(new Set([newsFeedTab]));
+  // Web parity (SocialHomePage): visitors land on the community browsing tab
+  // and never see Newsfeed / My Communities / Profile. Pick the visitor default
+  // at first render (lazy initializer) so a visitor never sees a one-frame flash
+  // of the Newsfeed tab before an effect could correct it.
+  const [activeTab, setActiveTab] = useState<string>(() =>
+    isVisitorOrBot ? exploreTab : newsFeedTab
+  );
+  const visitedTabs = useRef<Set<string>>(
+    new Set([isVisitorOrBot ? exploreTab : newsFeedTab])
+  );
+
+  // If the visitor flag resolves after mount (session establishing), still
+  // switch to the community browsing tab.
+  useEffect(() => {
+    if (isVisitorOrBot) {
+      visitedTabs.current.add(exploreTab);
+      setActiveTab(exploreTab);
+    }
+  }, [isVisitorOrBot, exploreTab]);
 
   const onTabChange = useCallback(
     (tabName: string) => {
@@ -85,21 +102,27 @@ const AmitySocialHomePage = () => {
       <CustomSocialTab
         activeTab={activeTab}
         onTabChange={onTabChange}
-        tabNames={[newsFeedTab, exploreTab, myCommunitiesTab, PROFILE_TAB]}
+        tabNames={
+          isVisitorOrBot
+            ? [exploreTab]
+            : [newsFeedTab, exploreTab, myCommunitiesTab, PROFILE_TAB]
+        }
       />
       <Divider />
-      <View style={tabStyle(newsFeedTab)}>
-        <AmityNewsFeedComponent
-          pageId={PageID.social_home_page}
-          onPressExploreCommunity={onPressExploreCommunity}
-        />
-      </View>
+      {!isVisitorOrBot && (
+        <View style={tabStyle(newsFeedTab)}>
+          <AmityNewsFeedComponent
+            pageId={PageID.social_home_page}
+            onPressExploreCommunity={onPressExploreCommunity}
+          />
+        </View>
+      )}
       {visitedTabs.current.has(exploreTab) && (
         <View style={tabStyle(exploreTab)}>
           <AmityExploreComponent pageId={PageID.social_home_page} />
         </View>
       )}
-      {visitedTabs.current.has(myCommunitiesTab) && (
+      {!isVisitorOrBot && visitedTabs.current.has(myCommunitiesTab) && (
         <View style={tabStyle(myCommunitiesTab)}>
           <AmityMyCommunitiesComponent
             pageId={PageID.social_home_page}
@@ -107,7 +130,7 @@ const AmitySocialHomePage = () => {
           />
         </View>
       )}
-      {visitedTabs.current.has(PROFILE_TAB) && (
+      {!isVisitorOrBot && visitedTabs.current.has(PROFILE_TAB) && (
         <View style={tabStyle(PROFILE_TAB)}>
           <UserProfile inline stickyTab={false} userId={client?.userId ?? ''} />
         </View>

package/src/social/screens/VisitorUsageLimit/VisitorUsageLimit.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useEffect } from 'react';
+import { BackHandler, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { SvgXml } from 'react-native-svg';
+import { useStyles } from './styles';
+import { Typography } from '../../../core/components/Typography/Typography';
+import { visitorLimit } from '../../../core/assets/icons';
+import { useToast } from '../../../core/stores/slices/toastSlice';
+import { useBehaviour } from '../../providers/BehaviourProvider';
+import { VISITOR_USAGE_LIMIT_MESSAGE } from '../../../core/constants';
+
+const TOAST_DURATION = 3000;
+
+export function VisitorUsageLimit() {
+  const { styles, theme } = useStyles();
+  const { showToast } = useToast();
+  const { AmityGlobalBehavior } = useBehaviour();
+
+  const showSignInToast = useCallback(() => {
+    showToast({
+      message: VISITOR_USAGE_LIMIT_MESSAGE.TOAST,
+      type: 'informative',
+      duration: TOAST_DURATION,
+    });
+  }, []);
+
+  // Toast appears on the initial usage-limit trigger only; a dismissed
+  // sign-in flow returning to this page must not re-show it.
+  useEffect(() => {
+    showSignInToast();
+  }, [showSignInToast]);
+
+  // Dead-end page: swallow the Android hardware back press so the user
+  // cannot navigate away from the error state.
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => true
+    );
+    return () => subscription.remove();
+  }, []);
+
+  const onPressSignIn = () => {
+    if (AmityGlobalBehavior?.handleVisitorUsageLimitSignIn) {
+      return AmityGlobalBehavior.handleVisitorUsageLimitSignIn();
+    }
+    showSignInToast();
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'left']}>
+      <View style={styles.contentContainer}>
+        <SvgXml
+          width={60}
+          height={40}
+          style={styles.icon}
+          xml={visitorLimit()}
+          color={theme.colors.secondaryShade4}
+        />
+        <Typography.TitleBold style={styles.title}>
+          {VISITOR_USAGE_LIMIT_MESSAGE.TITLE}
+        </Typography.TitleBold>
+        <Typography.Caption style={styles.subtitle}>
+          {VISITOR_USAGE_LIMIT_MESSAGE.SUBTITLE}
+        </Typography.Caption>
+        <TouchableOpacity
+          style={styles.signInButton}
+          onPress={onPressSignIn}
+          accessibilityRole="button"
+        >
+          <Typography.BodyBold style={styles.signInText}>
+            {VISITOR_USAGE_LIMIT_MESSAGE.SIGN_IN}
+          </Typography.BodyBold>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}

package/src/social/screens/VisitorUsageLimit/index.ts

@@ -0,0 +1 @@
+export { VisitorUsageLimit } from './VisitorUsageLimit';

package/src/social/screens/VisitorUsageLimit/styles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    contentContainer: {
+      flex: 1,
+      alignItems: 'center',
+      paddingHorizontal: 32,
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+    icon: {
+      marginBottom: 16,
+    },
+    title: {
+      textAlign: 'center',
+      color: theme.colors.baseShade3,
+    },
+    subtitle: {
+      textAlign: 'center',
+      color: theme.colors.baseShade3,
+    },
+    signInButton: {
+      marginTop: 16,
+      borderRadius: 8,
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+    },
+    signInText: {
+      color: theme.colors.primary,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/social/screens/index.ts

@@ -1,6 +1,7 @@
 export * from './ImageViewer';
 export * from './VideoPlayer';
 export * from './EditUser';
+export * from './CreateUserProfile';
 export * from './UserProfile';
 export * from './UserRelationship';
 export * from './BlockedUsers';

package/uikit.config.json

@@ -657,6 +657,23 @@
       "text": "Save"
     },
 
+    "create_user_profile_page/*/*": {},
+    "create_user_profile_page/*/back_button": {
+      "image": "value"
+    },
+    "create_user_profile_page/*/title": {
+      "text": "Create profile"
+    },
+    "create_user_profile_page/*/user_display_name_title": {
+      "text": "Display name"
+    },
+    "create_user_profile_page/*/user_about_title": {
+      "text": "About"
+    },
+    "create_user_profile_page/*/create_user_profile_button": {
+      "text": "Save"
+    },
+
     "blocked_users_page/*/*": {},
     "blocked_users_page/*/back_button": {
       "image": "value"