@procivis/one-react-native-components 0.3.115 → 0.3.130

package/src/ui-components/icons/icons.tsx

@@ -252,3 +252,21 @@ export const NFCIcon: FC<SvgProps> = ({ color, ...props }) => {
     </Svg>
   );
 };
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=542-90920
+export const PurposeInfoIcon: FC<SvgProps> = () => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg fill="none" height={24} viewBox="0 0 24 24" width={24}>
+      <Path
+        d="M12.3609 10.7319C12.4714 10.7319 12.5609 10.8215 12.5609 10.9319V15.8C12.5609 15.9105 12.4714 16 12.3609 16H11.7C11.5895 16 11.5 15.9105 11.5 15.8V10.9319C11.5 10.8215 11.5895 10.7319 11.7 10.7319H12.3609ZM11.5 8.2C11.5 8.08954 11.5895 8 11.7 8L12.3609 8C12.4714 8 12.5609 8.08954 12.5609 8.2L12.5609 8.89863C12.5609 9.00909 12.4714 9.09863 12.3609 9.09863H11.7C11.5895 9.09863 11.5 9.00909 11.5 8.89863L11.5 8.2Z"
+        fill={colorScheme.text}
+      />
+      <Path
+        d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
+        fill={colorScheme.text}
+        fillRule="evenodd"
+      />
+    </Svg>
+  );
+};

package/src/ui-components/icons/index.ts

@@ -1,4 +1,5 @@
 export * from './connectivity';
+export * from './contact';
 export * from './credential';
 export * from './entity';
 export * from './history';

package/src/ui-components/loader/loading-result.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { concatTestID } from '../../utils';
 import { Button, ButtonProps } from '../buttons/button';
 import ShareButton, { ShareButtonProps } from '../buttons/share-button';
 import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
@@ -53,7 +54,12 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
       </View>
       <View style={styles.loaderWrapper}>
         <LoaderView {...loaderProps} />
-        <Typography align="center" color={colorScheme.text} preset="regular" style={styles.label}>
+        <Typography
+          testID={concatTestID(viewProps.testID, 'label')}
+          align="center"
+          color={colorScheme.text}
+          preset="regular"
+          style={styles.label}>
           {label}
         </Typography>
       </View>

package/src/ui-components/screens/index.ts

@@ -10,6 +10,8 @@ import type { ScrollViewScreenProps } from './scroll-view-screen';
 import ScrollViewScreen from './scroll-view-screen';
 import type { SectionListScreenProps } from './section-list-screen';
 import SectionListScreen from './section-list-screen';
+import type { TrustInfoDetailsScreenLabels, TrustInfoDetailsScreenProps } from './trust-info-details-screen';
+import TrustInfoDetailsScreen from './trust-info-details-screen';
 
 export { BackupScreen, BackupScreenMode, BackupScreenProps };
 export { ImagePreviewScreen, ImagePreviewScreenProps };
@@ -17,3 +19,4 @@ export { NerdModeScreen, NerdModeScreenProps, NerdModeSection };
 export { QRCodeScannerScreen, QRCodeScannerScreenProps };
 export { ScrollViewScreen, ScrollViewScreenProps };
 export { SectionListScreen, SectionListScreenProps };
+export { TrustInfoDetailsScreen, TrustInfoDetailsScreenLabels, TrustInfoDetailsScreenProps };

package/src/ui-components/screens/nerd-mode-screen.tsx

@@ -1,10 +1,10 @@
-import { IdentifierListItem } from '@procivis/react-native-one-core';
-import React, { FunctionComponent, useState } from 'react';
+import { IdentifierListItem, TrustInformationDetail } from '@procivis/react-native-one-core';
+import React, { FunctionComponent, useMemo, useState } from 'react';
 import { SectionList, StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import EntityDetailsWithButtons, { ContextRole } from '../../components/entity/entity-details-with-buttons';
+import { TrustInfo, TrustInfoLabels } from '../../components';
 import ContrastingStatusBar from '../../utils/contrasting-status-bar';
 import { concatTestID } from '../../utils/testID';
 import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
@@ -15,15 +15,6 @@ import NerdModeItem, { NerdModeItemProps } from '../nerd-view/nerd-mode-item';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
 
-export interface EntityLabels {
-  trusted: string;
-  unknownIssuer: string;
-  unknownVerifier: string;
-  visitWebsite: string;
-  termsAndServices: string;
-  privacyPolicy: string;
-}
-
 export interface AttributesLabels {
   trustRegistry: string;
   issuerIdentifier: string;
@@ -36,9 +27,9 @@ export interface AttributesLabels {
 interface SectionEntityCluster {
   identifier?: IdentifierListItem;
   subline?: string;
-  entityLabels: EntityLabels;
-  role: ContextRole;
   testID?: string;
+  trustInfoLabels: TrustInfoLabels;
+  trustInformation?: TrustInformationDetail;
 }
 
 type SectionAttribute = Omit<NerdModeItemProps, 'labels' | 'onCopyToClipboard'>;
@@ -55,6 +46,7 @@ export type NerdModeScreenProps = {
   labels: AttributesLabels;
   onClose: () => void;
   onCopyToClipboard: (value: string) => void;
+  onOpenTrustInfoDetails?: (trustInformation: TrustInformationDetail) => void;
   sections: NerdModeSection[];
   testID: string;
   title: string;
@@ -76,6 +68,7 @@ const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
   labels,
   onClose,
   onCopyToClipboard,
+  onOpenTrustInfoDetails,
   entityCluster,
   testID,
   title,
@@ -105,6 +98,37 @@ const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
     };
   }, {} as Record<string, string>);
 
+  const listHeader = useMemo(() => {
+    if (!entityCluster) {
+      return null;
+    }
+    return (
+      <TrustInfo
+        labels={entityCluster.trustInfoLabels}
+        onPress={
+          onOpenTrustInfoDetails && entityCluster.trustInformation
+            ? () => onOpenTrustInfoDetails(entityCluster.trustInformation!)
+            : undefined
+        }
+        style={[
+          styles.entityCluster,
+          {
+            backgroundColor: colorScheme.nerdView.background,
+          },
+        ]}
+        testID={entityCluster.testID ?? concatTestID(testID, 'trustInfo')}
+        textColor={colorScheme.white}
+        trustInformation={entityCluster.trustInformation?.eudiEcosystem}
+      />
+    );
+  }, [
+    entityCluster,
+    colorScheme.nerdView.background,
+    colorScheme.white,
+    onOpenTrustInfoDetails,
+    testID,
+  ]);
+
   return (
     <>
       <ContrastingStatusBar backgroundColor={colorScheme.nerdView.background} />
@@ -122,43 +146,27 @@ const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
         titleColor={colorScheme.white}
       />
       <AnimatedSectionList
-        ListHeaderComponent={
-          entityCluster ? (
-            <EntityDetailsWithButtons
-              {...entityCluster}
-              entityType={EntityType.ProofEntity}
-              entityLabels={entityCluster.entityLabels}
-              attributesLabels={labels}
-              style={[
-                styles.entityCluster,
-                {
-                  backgroundColor: colorScheme.nerdView.background,
-                },
-              ]}
-              onCopyToClipboard={onCopyToClipboard}
-              testID={entityCluster.testID ?? concatTestID(testID, 'entityCluster')}
-              textColor={colorScheme.white}
-            />
-          ) : null
-        }
+        ListHeaderComponent={listHeader}
         onScroll={onScroll}
-        renderItem={({ item, section, index }) => {
+        renderItem={({ item, section }) => {
           if (isSectionEntityCluster(item)) {
             return (
-              <EntityDetailsWithButtons
-                {...item}
-                entityType={EntityType.CredentialEntity}
-                entityLabels={item!.entityLabels}
-                attributesLabels={labels}
+              <TrustInfo
+                labels={item.trustInfoLabels}
+                onPress={
+                  onOpenTrustInfoDetails && item.trustInformation
+                    ? () => onOpenTrustInfoDetails(item.trustInformation!)
+                    : undefined
+                }
                 style={[
                   styles.entityCluster,
                   {
                     backgroundColor: colorScheme.nerdView.background,
                   },
                 ]}
-                onCopyToClipboard={onCopyToClipboard}
-                testID={item.testID ?? concatTestID(testID, 'sectionEntityCluster', index.toString())}
+                testID={item.testID ?? concatTestID(testID, 'trustInfo')}
                 textColor={colorScheme.white}
+                trustInformation={item.trustInformation?.eudiEcosystem}
               />
             );
           } else {

package/src/ui-components/screens/trust-info-details-screen.tsx

@@ -0,0 +1,472 @@
+import { TrustInformationDetail } from '@procivis/react-native-one-core';
+import React, { FC, useCallback, useState } from 'react';
+import { Linking, SectionList, SectionListData, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SvgProps } from 'react-native-svg';
+
+import TrustInfo, { TrustInfoLabels } from '../../components/trust-info/trust-info';
+import { concatTestID, nonEmptyFilter, reportException } from '../../utils';
+import { TouchableOpacity } from '../accessibility';
+import { BackButton } from '../buttons';
+import { NavigationHeader } from '../header';
+import { LinkIcon, MailIcon, PhoneIcon } from '../icons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+type TrustInfoDetailItem =
+  | {
+      name: string;
+      type: 'trustInfo';
+    }
+  | {
+      title: string;
+      type: 'subsection';
+    }
+  | {
+      action?: {
+        icon: FC<SvgProps>;
+        onPress: () => void;
+      };
+      title: string;
+      type: 'item';
+      value?: string;
+    }
+  | {
+      email?: string;
+      phone?: string;
+      type: 'contact';
+      website?: string;
+    }
+  | {
+      type: 'expand';
+    }
+  | {
+      type: 'collapse';
+    };
+
+type TrustInfoDetailSection = {
+  title?: string;
+};
+
+export type TrustInfoDetailsScreenLabels = TrustInfoLabels & {
+  collapse: string;
+  country: string;
+  email: string;
+  expand: string;
+  identifier: string;
+  isPublicSector: string;
+  phone: string;
+  privacyPolicy: string;
+  serviceDescription: string;
+  supervisoryAuthority: string;
+  support: string;
+  title: string;
+  true: string;
+  website: string;
+};
+
+type SeparatorProps = {
+  dark?: boolean;
+  leadingItem?: TrustInfoDetailItem;
+};
+
+const Separator: FC<SeparatorProps> = ({ dark, leadingItem }) => {
+  const colorScheme = useAppColorScheme();
+  if (leadingItem?.type === 'subsection' || (leadingItem?.type === 'item' && !leadingItem?.value)) {
+    return <View style={styles.emptyItem} />;
+  }
+  return (
+    <View style={{ backgroundColor: dark ? colorScheme.background : colorScheme.white }}>
+      <View style={[styles.separator, { backgroundColor: colorScheme.grayDark }]} />
+    </View>
+  );
+};
+
+type ListButtonProps = {
+  label: string;
+  onPress: () => void;
+};
+
+const ListButton: FC<ListButtonProps> = ({ label, onPress }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.button, styles.lastItem, { backgroundColor: colorScheme.white }]}>
+      <Typography align="center" color={colorScheme.text}>
+        {label}
+      </Typography>
+    </TouchableOpacity>
+  );
+};
+
+type ListItemProps = {
+  action?: {
+    icon: FC<SvgProps>;
+    onPress: () => void;
+  };
+  dark?: boolean;
+  title: string;
+  value: string;
+};
+
+const ListItem: FC<ListItemProps> = ({ action, dark, title, value }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={[styles.item, { backgroundColor: dark ? undefined : colorScheme.white }]}>
+      <View style={styles.itemLabels}>
+        <Typography
+          color={colorScheme.text}
+          numberOfLines={1}
+          preset="s/line-height-capped"
+          style={styles.itemTitleLabel}>
+          {title}
+        </Typography>
+        <Typography color={colorScheme.text} numberOfLines={1} preset="s/line-height-capped">
+          {value}
+        </Typography>
+      </View>
+      {action && (
+        <TouchableOpacity
+          onPress={action.onPress}
+          style={[styles.actionButton, { backgroundColor: dark ? colorScheme.white : colorScheme.grayDark }]}>
+          <action.icon color={colorScheme.black} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+type ContactItemProps = {
+  email?: string;
+  labels: TrustInfoDetailsScreenLabels;
+  onPress: (url: string) => () => void;
+  phone?: string;
+  website?: string;
+};
+
+const ContactItem: FC<ContactItemProps> = ({ email, labels, onPress, phone, website }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={[styles.contactItemWrapper, { backgroundColor: colorScheme.white }]}>
+      <View style={[styles.contactItem, { backgroundColor: colorScheme.background }]}>
+        {website && (
+          <ListItem
+            action={{ icon: LinkIcon, onPress: onPress(website) }}
+            dark
+            title={labels.website}
+            value={website}
+          />
+        )}
+        {website && (email || phone) && <Separator dark />}
+        {email && (
+          <ListItem
+            action={{ icon: MailIcon, onPress: onPress(`mailto:${email}`) }}
+            dark
+            title={labels.email}
+            value={email}
+          />
+        )}
+        {email && phone && <Separator dark />}
+        {phone && (
+          <ListItem
+            action={{ icon: PhoneIcon, onPress: onPress(`tel:${phone}`) }}
+            dark
+            title={labels.phone}
+            value={phone}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export type TrustInfoDetailsScreenProps = {
+  countries: {
+    display: Record<string, string>;
+    value: string;
+  }[];
+  labels: TrustInfoDetailsScreenLabels;
+  language: string;
+  onClose: () => void;
+  testID: string;
+  trustInformation: TrustInformationDetail;
+};
+
+const TrustInfoDetailsScreen: FC<TrustInfoDetailsScreenProps> = ({
+  countries,
+  labels,
+  language,
+  onClose,
+  testID,
+  trustInformation,
+}) => {
+  const insets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+  const [expanded, setExpanded] = useState(false);
+
+  const linkHandler = useCallback(
+    (url: string) => () => {
+      Linking.openURL(url).catch((e) => {
+        reportException(e, `Error opening contact link ${url}`);
+      });
+    },
+    [],
+  );
+
+  const trustDetails = trustInformation.eudiEcosystem;
+  if (!trustDetails) {
+    return null;
+  }
+
+  const countryDisplay = countries.find((c) => c.value === trustDetails.country)?.display;
+  const country = countryDisplay?.[language] ?? countryDisplay?.en;
+
+  const baseInfo: TrustInfoDetailItem[] = [
+    {
+      name: trustDetails.name,
+      type: 'trustInfo',
+    },
+    {
+      title: labels.isPublicSector,
+      type: 'item',
+      value: trustDetails.isPublicSector ? labels.true : undefined,
+    },
+    {
+      title: labels.serviceDescription,
+      type: 'item',
+      value: trustDetails.serviceDescription[0]?.[language],
+    },
+  ];
+
+  const expandItem: TrustInfoDetailItem[] = !expanded ? [{ type: 'expand' }] : [];
+
+  const supervisoryAuthority: TrustInfoDetailItem[] = trustDetails.supervisoryAuthority
+    ? [
+        {
+          title: labels.supervisoryAuthority,
+          type: 'subsection',
+        },
+        {
+          ...trustDetails.supervisoryAuthority,
+          type: 'contact',
+          website: trustDetails.supervisoryAuthority.uri,
+        },
+      ]
+    : [];
+
+  const extraInfo: TrustInfoDetailItem[] = expanded
+    ? [
+        {
+          title: labels.country,
+          type: 'item',
+          value: country,
+        },
+        {
+          title: labels.identifier,
+          type: 'item',
+          value: trustDetails.identifier,
+        },
+        {
+          title: labels.support,
+          type: 'subsection',
+        },
+        {
+          type: 'contact',
+          ...trustDetails,
+        },
+        ...supervisoryAuthority,
+        { type: 'collapse' },
+      ]
+    : [];
+
+  const trustDetailsSection = baseInfo.concat(expandItem).concat(extraInfo);
+
+  const intermediaryName: TrustInfoDetailItem[] = trustDetails.intermediary?.name
+    ? [
+        {
+          name: trustDetails.intermediary.name,
+          type: 'trustInfo',
+        },
+      ]
+    : [];
+
+  const intermediarySection: TrustInfoDetailItem[] = trustDetails.intermediary
+    ? [
+        ...intermediaryName,
+        {
+          title: labels.country,
+          type: 'item',
+          value: trustDetails.intermediary.country,
+        },
+        {
+          title: labels.identifier,
+          type: 'item',
+          value: trustDetails.intermediary.identifier,
+        },
+        {
+          title: labels.support,
+          type: 'subsection',
+        },
+        {
+          type: 'contact',
+          ...trustDetails.intermediary,
+        },
+      ]
+    : [];
+
+  const sections: SectionListData<TrustInfoDetailItem, TrustInfoDetailSection>[] = [
+    {
+      ItemSeparatorComponent: Separator,
+      data: trustDetailsSection,
+    },
+    intermediarySection.length
+      ? {
+          ItemSeparatorComponent: Separator,
+          data: intermediarySection,
+          title: 'Intermediary',
+        }
+      : undefined,
+  ].filter(nonEmptyFilter);
+
+  return (
+    <View style={styles.container}>
+      <NavigationHeader
+        leftItem={<BackButton onPress={onClose} />}
+        style={{
+          paddingTop: insets.top,
+        }}
+        title={labels.title}
+      />
+      <SectionList<TrustInfoDetailItem, TrustInfoDetailSection>
+        contentInset={insets}
+        renderItem={({ item, section }) => {
+          switch (item.type) {
+            case 'subsection':
+              return (
+                <View
+                  style={[styles.subsection, { backgroundColor: colorScheme.white }]}
+                  testID={concatTestID(testID, section.title)}>
+                  <Typography color={colorScheme.text} preset="m/heading">
+                    {item.title}
+                  </Typography>
+                </View>
+              );
+            case 'trustInfo':
+              return (
+                <TrustInfo
+                  labels={labels}
+                  style={[styles.trustInfoItem, styles.firstItem, { backgroundColor: colorScheme.white }]}
+                  trustInformation={item}
+                />
+              );
+            case 'item':
+              if (!item.value) {
+                return <View style={styles.emptyItem} />;
+              }
+              return <ListItem {...item} value={item.value} />;
+            case 'contact':
+              if (!item.website && !item.phone && !item.email) {
+                return <View style={styles.emptyItem} />;
+              }
+              return <ContactItem labels={labels} onPress={linkHandler} {...item} />;
+            case 'expand':
+              return <ListButton label={labels.expand} onPress={() => setExpanded(true)} />;
+            case 'collapse':
+              return <ListButton label={labels.collapse} onPress={() => setExpanded(false)} />;
+          }
+        }}
+        renderSectionHeader={({ section }) => {
+          return section.title ? (
+            <View style={styles.sectionHeaderContainer} testID={concatTestID(testID, section.title)}>
+              <Typography color={colorScheme.text} preset="m/heading" style={styles.sectionHeaderText}>
+                {section.title}
+              </Typography>
+            </View>
+          ) : null;
+        }}
+        scrollEventThrottle={16}
+        sections={sections}
+        showsVerticalScrollIndicator={false}
+        stickySectionHeadersEnabled={false}
+        style={styles.list}
+        testID={testID}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionButton: {
+    alignItems: 'center',
+    borderRadius: 19,
+    height: 38,
+    justifyContent: 'center',
+    width: 38,
+  },
+  button: {
+    height: 64,
+    justifyContent: 'center',
+    paddingBottom: 8,
+    width: '100%',
+  },
+  contactItem: {
+    borderRadius: 8,
+  },
+  contactItemWrapper: {
+    padding: 12,
+  },
+  container: {
+    flex: 1,
+  },
+  emptyItem: {
+    height: 0,
+  },
+  firstItem: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  item: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 12,
+  },
+  itemLabels: {
+    flexDirection: 'column',
+  },
+  itemTitleLabel: {
+    opacity: 0.5,
+  },
+  lastItem: {
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+  list: {
+    marginHorizontal: 16,
+  },
+  sectionHeaderContainer: {
+    justifyContent: 'center',
+    marginTop: 20,
+    paddingVertical: 16,
+  },
+  sectionHeaderText: {
+    opacity: 0.7,
+    paddingHorizontal: 20,
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: 12,
+    opacity: 0.4,
+  },
+  subsection: {
+    paddingBottom: 8,
+    paddingHorizontal: 12,
+    paddingTop: 22,
+  },
+  trustInfoItem: {
+    padding: 8,
+  },
+});
+
+export default TrustInfoDetailsScreen;