@oxy.so/services 11.2.0-oxy-one.3 → 11.2.0-oxy-one.4

package/src/ui/screens/LearnMoreUsernamesScreen.tsx

@@ -5,10 +5,10 @@ import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import { IconCircle } from '@oxy.so/bloom/icon-circle';
 import {
-    Accordion,
-    AccordionItem,
-    AccordionTrigger,
-    AccordionContent,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
 } from '@oxy.so/bloom/accordion';
 // Per glyph, never `@oxy.so/bloom/icons`. That barrel re-exports all 461 Remix
 // glyphs and Metro does not tree-shake, so one import of it here re-ships every
@@ -27,128 +27,110 @@ import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 interface InfoSection {
-    id: string;
-    titleKey: string;
-    contentKey: string;
-    Icon: React.ComponentType<IconProps>;
+  id: string;
+  titleKey: string;
+  contentKey: string;
+  Icon: React.ComponentType<IconProps>;
 }
 
 const INFO_SECTIONS: InfoSection[] = [
-    {
-        id: 'what',
-        titleKey: 'learnMoreUsernames.sections.what.title',
-        contentKey: 'learnMoreUsernames.sections.what.content',
-        Icon: RiAtLine,
-    },
-    {
-        id: 'rules',
-        titleKey: 'learnMoreUsernames.sections.rules.title',
-        contentKey: 'learnMoreUsernames.sections.rules.content',
-        Icon: RiListUnordered,
-    },
-    {
-        id: 'unique',
-        titleKey: 'learnMoreUsernames.sections.unique.title',
-        contentKey: 'learnMoreUsernames.sections.unique.content',
-        Icon: RiKey2Line,
-    },
-    {
-        id: 'change',
-        titleKey: 'learnMoreUsernames.sections.change.title',
-        contentKey: 'learnMoreUsernames.sections.change.content',
-        Icon: RiResetRightLine,
-    },
-    {
-        id: 'tips',
-        titleKey: 'learnMoreUsernames.sections.tips.title',
-        contentKey: 'learnMoreUsernames.sections.tips.content',
-        Icon: RiSparklingLine,
-    },
+  {
+    id: 'what',
+    titleKey: 'learnMoreUsernames.sections.what.title',
+    contentKey: 'learnMoreUsernames.sections.what.content',
+    Icon: RiAtLine,
+  },
+  {
+    id: 'rules',
+    titleKey: 'learnMoreUsernames.sections.rules.title',
+    contentKey: 'learnMoreUsernames.sections.rules.content',
+    Icon: RiListUnordered,
+  },
+  {
+    id: 'unique',
+    titleKey: 'learnMoreUsernames.sections.unique.title',
+    contentKey: 'learnMoreUsernames.sections.unique.content',
+    Icon: RiKey2Line,
+  },
+  {
+    id: 'change',
+    titleKey: 'learnMoreUsernames.sections.change.title',
+    contentKey: 'learnMoreUsernames.sections.change.content',
+    Icon: RiResetRightLine,
+  },
+  {
+    id: 'tips',
+    titleKey: 'learnMoreUsernames.sections.tips.title',
+    contentKey: 'learnMoreUsernames.sections.tips.content',
+    Icon: RiSparklingLine,
+  },
 ];
 
-const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
-    onClose,
-    goBack,
-}) => {
-    const bloomTheme = useTheme();
-    const { t } = useI18n();
+const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
+  const bloomTheme = useTheme();
+  const { t } = useI18n();
 
-    useSurfaceHeader({ title: t('learnMoreUsernames.introTitle') });
-    // Start with the first section expanded.
-    const [expandedIds, setExpandedIds] = useState<string[]>(['what']);
+  useSurfaceHeader({ title: t('learnMoreUsernames.introTitle') });
+  // Start with the first section expanded.
+  const [expandedIds, setExpandedIds] = useState<string[]>(['what']);
 
-    const handleAccordionChange = useCallback(
-        (value: string | string[] | undefined) => {
-            if (Array.isArray(value)) {
-                setExpandedIds(value);
-            } else if (value == null) {
-                setExpandedIds([]);
-            } else {
-                setExpandedIds([value]);
-            }
-        },
-        [],
-    );
+  const handleAccordionChange = useCallback((value: string | string[] | undefined) => {
+    if (Array.isArray(value)) {
+      setExpandedIds(value);
+    } else if (value == null) {
+      setExpandedIds([]);
+    } else {
+      setExpandedIds([value]);
+    }
+  }, []);
 
-    return (
-        <>
-            <View className="px-screen-margin pb-space-32">
-                <View className="items-center py-space-24 gap-space-12">
-                    <IconCircle icon={RiAtLine} />
-                    <Text className="font-sans text-body text-text-secondary text-center">
-                        {t('learnMoreUsernames.introText')}
-                    </Text>
-                </View>
+  return (
+    <>
+      <View className="px-screen-margin pb-space-32">
+        <View className="items-center py-space-24 gap-space-12">
+          <IconCircle icon={RiAtLine} />
+          <Text className="font-sans text-body text-text-secondary text-center">
+            {t('learnMoreUsernames.introText')}
+          </Text>
+        </View>
 
-                <Accordion
-                    type="multiple"
-                    value={expandedIds}
-                    onValueChange={handleAccordionChange}
-                >
-                    {INFO_SECTIONS.map(({ id, titleKey, contentKey, Icon }) => (
-                        <AccordionItem key={id} value={id}>
-                            <AccordionTrigger
-                                icon={
-                                    <View
-                                        className="bg-fill-secondary rounded-radius-12"
-                                        style={styles.iconSquare}
-                                    >
-                                        <Icon
-                                            size="md"
-                                            style={{ color: bloomTheme.colors.primary }}
-                                        />
-                                    </View>
-                                }
-                            >
-                                {t(titleKey)}
-                            </AccordionTrigger>
-                            <AccordionContent>
-                                <Text className="font-sans text-body text-text-secondary">
-                                    {t(contentKey)}
-                                </Text>
-                            </AccordionContent>
-                        </AccordionItem>
-                    ))}
-                </Accordion>
+        <Accordion type="multiple" value={expandedIds} onValueChange={handleAccordionChange}>
+          {INFO_SECTIONS.map(({ id, titleKey, contentKey, Icon }) => (
+            <AccordionItem key={id} value={id}>
+              <AccordionTrigger
+                icon={
+                  <View className="bg-fill-secondary rounded-radius-12" style={styles.iconSquare}>
+                    <Icon size="md" style={{ color: bloomTheme.colors.primary }} />
+                  </View>
+                }
+              >
+                {t(titleKey)}
+              </AccordionTrigger>
+              <AccordionContent>
+                <Text className="font-sans text-body text-text-secondary">{t(contentKey)}</Text>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
 
-                <Text className="font-sans text-caption text-text-tertiary text-center mt-space-16">
-                    {t('learnMoreUsernames.footer')}
-                </Text>
-            </View>
-        </>
-    );
+        <Text className="font-sans text-caption text-text-tertiary text-center mt-space-16">
+          {t('learnMoreUsernames.footer')}
+        </Text>
+      </View>
+    </>
+  );
 };
 
 // Measured layout only (no color): fixed-size square that hosts the leading
 // section icon inside the accordion trigger. Color comes from the
 // `bg-fill-secondary` token class on the View.
 const styles = StyleSheet.create({
-    iconSquare: {
-        width: 36,
-        height: 36,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
+  iconSquare: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 export default LearnMoreUsernamesScreen;

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -15,13 +15,13 @@ const LOG_COMPONENT = 'LegalDocumentsScreen';
 
 /** Policy URLs from the Oxy Transparency Center. */
 const POLICY_URLS = {
-    privacy: 'https://oxy.so/company/transparency/policies/privacy',
-    terms: 'https://oxy.so/company/transparency/policies/terms-of-service',
-    community: 'https://oxy.so/company/transparency/policies/community-guidelines',
-    dataRetention: 'https://oxy.so/company/transparency/policies/data-retention',
-    contentModeration: 'https://oxy.so/company/transparency/policies/content-moderation',
-    childSafety: 'https://oxy.so/company/transparency/policies/child-safety',
-    cookie: 'https://oxy.so/company/transparency/policies/cookies',
+  privacy: 'https://oxy.so/company/transparency/policies/privacy',
+  terms: 'https://oxy.so/company/transparency/policies/terms-of-service',
+  community: 'https://oxy.so/company/transparency/policies/community-guidelines',
+  dataRetention: 'https://oxy.so/company/transparency/policies/data-retention',
+  contentModeration: 'https://oxy.so/company/transparency/policies/content-moderation',
+  childSafety: 'https://oxy.so/company/transparency/policies/child-safety',
+  cookie: 'https://oxy.so/company/transparency/policies/cookies',
 } as const;
 
 type PolicyKey = keyof typeof POLICY_URLS;
@@ -32,203 +32,144 @@ type PolicyKey = keyof typeof POLICY_URLS;
  * deep-link contract is obvious at a glance.
  */
 const STEP_TO_DOCUMENT: Record<number, PolicyKey> = {
-    1: 'privacy',
-    2: 'terms',
-    3: 'community',
-    4: 'dataRetention',
-    5: 'contentModeration',
-    6: 'childSafety',
-    7: 'cookie',
+  1: 'privacy',
+  2: 'terms',
+  3: 'community',
+  4: 'dataRetention',
+  5: 'contentModeration',
+  6: 'childSafety',
+  7: 'cookie',
 };
 
-const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
-    onClose,
-    goBack,
-    initialStep,
-}) => {
-    const { t } = useI18n();
-    const bloomTheme = useTheme();
-    const [loading, setLoading] = useState(false);
+const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, initialStep }) => {
+  const { t } = useI18n();
+  const bloomTheme = useTheme();
+  const [loading, setLoading] = useState(false);
 
-    // Determine which document to auto-open based on the deep-link step.
-    const documentType: PolicyKey | null =
-        typeof initialStep === 'number' ? STEP_TO_DOCUMENT[initialStep] ?? null : null;
+  // Determine which document to auto-open based on the deep-link step.
+  const documentType: PolicyKey | null =
+    typeof initialStep === 'number' ? (STEP_TO_DOCUMENT[initialStep] ?? null) : null;
 
-    // Generic handler to open any policy URL via the system browser.
-    const handleOpenPolicy = useCallback(
-        (policyKey: PolicyKey) => {
-            return async () => {
-                try {
-                    setLoading(true);
-                    const url = POLICY_URLS[policyKey];
-                    const canOpen = await Linking.canOpenURL(url);
-                    if (canOpen) {
-                        await Linking.openURL(url);
-                    } else {
-                        toast.error(t('legal.openError') || 'Failed to open document');
-                    }
-                } catch (error) {
-                    logger.error(
-                        `Failed to open ${policyKey} policy`,
-                        error,
-                        { component: LOG_COMPONENT },
-                    );
-                    toast.error(t('legal.openError') || 'Failed to open document');
-                } finally {
-                    setLoading(false);
-                }
-            };
-        },
-        [t],
-    );
-
-    // If a specific document type is requested, open it directly.
-    React.useEffect(() => {
-        if (documentType) {
-            handleOpenPolicy(documentType)();
+  // Generic handler to open any policy URL via the system browser.
+  const handleOpenPolicy = useCallback(
+    (policyKey: PolicyKey) => {
+      return async () => {
+        try {
+          setLoading(true);
+          const url = POLICY_URLS[policyKey];
+          const canOpen = await Linking.canOpenURL(url);
+          if (canOpen) {
+            await Linking.openURL(url);
+          } else {
+            toast.error(t('legal.openError') || 'Failed to open document');
+          }
+        } catch (error) {
+          logger.error(`Failed to open ${policyKey} policy`, error, { component: LOG_COMPONENT });
+          toast.error(t('legal.openError') || 'Failed to open document');
+        } finally {
+          setLoading(false);
         }
-    }, [documentType, handleOpenPolicy]);
-
-    // Localized title for a policy key (used for the deep-link header).
-    const getPolicyTitle = (key: PolicyKey): string => {
-        const titles: Record<PolicyKey, string> = {
-            privacy: t('legal.privacyPolicy.title') || 'Privacy Policy',
-            terms: t('legal.termsOfService.title') || 'Terms of Service',
-            community: t('legal.communityGuidelines.title') || 'Community Guidelines',
-            dataRetention: t('legal.dataRetention.title') || 'Data Retention Policy',
-            contentModeration:
-                t('legal.contentModeration.title') || 'Content Moderation Policy',
-            childSafety: t('legal.childSafety.title') || 'Child Safety Policy',
-            cookie: t('legal.cookiePolicy.title') || 'Cookie Policy',
-        };
-        return titles[key];
-    };
-
-    useSurfaceHeader({
-        title: documentType ? getPolicyTitle(documentType) : (t('legal.title') || 'Legal Documents'),
-    });
+      };
+    },
+    [t],
+  );
 
-    // Deep-link entry: show loading state while the document opens.
+  // If a specific document type is requested, open it directly.
+  React.useEffect(() => {
     if (documentType) {
-        return (
-                <Loading
-                    size="lg"
-                    color={bloomTheme.colors.text}
-                    text={t('legal.opening') || 'Opening document...'}
-                />
-        );
+      handleOpenPolicy(documentType)();
     }
+  }, [documentType, handleOpenPolicy]);
 
-    // Default: show the full list of policies & guidelines.
+  // Localized title for a policy key (used for the deep-link header).
+  const getPolicyTitle = (key: PolicyKey): string => {
+    const titles: Record<PolicyKey, string> = {
+      privacy: t('legal.privacyPolicy.title') || 'Privacy Policy',
+      terms: t('legal.termsOfService.title') || 'Terms of Service',
+      community: t('legal.communityGuidelines.title') || 'Community Guidelines',
+      dataRetention: t('legal.dataRetention.title') || 'Data Retention Policy',
+      contentModeration: t('legal.contentModeration.title') || 'Content Moderation Policy',
+      childSafety: t('legal.childSafety.title') || 'Child Safety Policy',
+      cookie: t('legal.cookiePolicy.title') || 'Cookie Policy',
+    };
+    return titles[key];
+  };
+
+  useSurfaceHeader({
+    title: documentType ? getPolicyTitle(documentType) : t('legal.title') || 'Legal Documents',
+  });
+
+  // Deep-link entry: show loading state while the document opens.
+  if (documentType) {
     return (
-            <View className="px-screen-margin py-space-16">
-                    <SettingsListGroup title={t('legal.policies') || 'Policies & Guidelines'}>
-                        <SettingsListItem
-                            icon={
-                                <SettingsIcon
-                                    name="shield-check"
-                                    color={bloomTheme.colors.success}
-                                />
-                            }
-                            title={t('legal.privacyPolicy.title') || 'Privacy Policy'}
-                            description={
-                                t('legal.privacyPolicy.subtitle') || 'How we handle your data'
-                            }
-                            onPress={handleOpenPolicy('privacy')}
-                            disabled={loading}
-                        />
-                        <SettingsListItem
-                            icon={
-                                <SettingsIcon
-                                    name="file-document"
-                                    color={bloomTheme.colors.primary}
-                                />
-                            }
-                            title={t('legal.termsOfService.title') || 'Terms of Service'}
-                            description={
-                                t('legal.termsOfService.subtitle')
-                                || 'Terms and conditions of use'
-                            }
-                            onPress={handleOpenPolicy('terms')}
-                            disabled={loading}
-                        />
-                        <SettingsListItem
-                            icon={
-                                <SettingsIcon
-                                    name="account-group"
-                                    color={bloomTheme.colors.secondary}
-                                />
-                            }
-                            title={
-                                t('legal.communityGuidelines.title') || 'Community Guidelines'
-                            }
-                            description={
-                                t('legal.communityGuidelines.subtitle')
-                                || 'Rules and expectations for our community'
-                            }
-                            onPress={handleOpenPolicy('community')}
-                            disabled={loading}
-                        />
-                        <SettingsListItem
-                            icon={
-                                <SettingsIcon
-                                    name="clock"
-                                    color={bloomTheme.colors.warning}
-                                />
-                            }
-                            title={t('legal.dataRetention.title') || 'Data Retention Policy'}
-                            description={
-                                t('legal.dataRetention.subtitle')
-                                || 'How long we keep your data'
-                            }
-                            onPress={handleOpenPolicy('dataRetention')}
-                            disabled={loading}
-                        />
-                        <SettingsListItem
-                            icon={
-                                <SettingsIcon name="eye" color={bloomTheme.colors.info} />
-                            }
-                            title={
-                                t('legal.contentModeration.title')
-                                || 'Content Moderation Policy'
-                            }
-                            description={
-                                t('legal.contentModeration.subtitle')
-                                || 'How we moderate content'
-                            }
-                            onPress={handleOpenPolicy('contentModeration')}
-                            disabled={loading}
-                        />
-                        <SettingsListItem
-                            icon={
-                                <SettingsIcon name="heart" color={bloomTheme.colors.error} />
-                            }
-                            title={t('legal.childSafety.title') || 'Child Safety Policy'}
-                            description={
-                                t('legal.childSafety.subtitle')
-                                || 'Protecting minors on our platform'
-                            }
-                            onPress={handleOpenPolicy('childSafety')}
-                            disabled={loading}
-                        />
-                        <SettingsListItem
-                            icon={
-                                <SettingsIcon
-                                    name="cookie"
-                                    color={bloomTheme.colors.textTertiary}
-                                />
-                            }
-                            title={t('legal.cookiePolicy.title') || 'Cookie Policy'}
-                            description={
-                                t('legal.cookiePolicy.subtitle')
-                                || 'How we use cookies and similar technologies'
-                            }
-                            onPress={handleOpenPolicy('cookie')}
-                            disabled={loading}
-                        />
-                    </SettingsListGroup>
-                </View>
+      <Loading
+        size="lg"
+        color={bloomTheme.colors.text}
+        text={t('legal.opening') || 'Opening document...'}
+      />
     );
+  }
+
+  // Default: show the full list of policies & guidelines.
+  return (
+    <View className="px-screen-margin py-space-16">
+      <SettingsListGroup title={t('legal.policies') || 'Policies & Guidelines'}>
+        <SettingsListItem
+          icon={<SettingsIcon name="shield-check" color={bloomTheme.colors.success} />}
+          title={t('legal.privacyPolicy.title') || 'Privacy Policy'}
+          description={t('legal.privacyPolicy.subtitle') || 'How we handle your data'}
+          onPress={handleOpenPolicy('privacy')}
+          disabled={loading}
+        />
+        <SettingsListItem
+          icon={<SettingsIcon name="file-document" color={bloomTheme.colors.primary} />}
+          title={t('legal.termsOfService.title') || 'Terms of Service'}
+          description={t('legal.termsOfService.subtitle') || 'Terms and conditions of use'}
+          onPress={handleOpenPolicy('terms')}
+          disabled={loading}
+        />
+        <SettingsListItem
+          icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
+          title={t('legal.communityGuidelines.title') || 'Community Guidelines'}
+          description={
+            t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community'
+          }
+          onPress={handleOpenPolicy('community')}
+          disabled={loading}
+        />
+        <SettingsListItem
+          icon={<SettingsIcon name="clock" color={bloomTheme.colors.warning} />}
+          title={t('legal.dataRetention.title') || 'Data Retention Policy'}
+          description={t('legal.dataRetention.subtitle') || 'How long we keep your data'}
+          onPress={handleOpenPolicy('dataRetention')}
+          disabled={loading}
+        />
+        <SettingsListItem
+          icon={<SettingsIcon name="eye" color={bloomTheme.colors.info} />}
+          title={t('legal.contentModeration.title') || 'Content Moderation Policy'}
+          description={t('legal.contentModeration.subtitle') || 'How we moderate content'}
+          onPress={handleOpenPolicy('contentModeration')}
+          disabled={loading}
+        />
+        <SettingsListItem
+          icon={<SettingsIcon name="heart" color={bloomTheme.colors.error} />}
+          title={t('legal.childSafety.title') || 'Child Safety Policy'}
+          description={t('legal.childSafety.subtitle') || 'Protecting minors on our platform'}
+          onPress={handleOpenPolicy('childSafety')}
+          disabled={loading}
+        />
+        <SettingsListItem
+          icon={<SettingsIcon name="cookie" color={bloomTheme.colors.textTertiary} />}
+          title={t('legal.cookiePolicy.title') || 'Cookie Policy'}
+          description={
+            t('legal.cookiePolicy.subtitle') || 'How we use cookies and similar technologies'
+          }
+          onPress={handleOpenPolicy('cookie')}
+          disabled={loading}
+        />
+      </SettingsListGroup>
+    </View>
+  );
 };
 
 export default React.memo(LegalDocumentsScreen);