@procivis/one-react-native-components 0.1.63 → 0.3.22

package/src/ui-components/searchbar/search-bar.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef, useCallback } from 'react';
+import { Insets, Platform, StyleProp, StyleSheet, TextInput, TextInputProps, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { TouchableOpacity } from '../accessibility';
+import { CloseIcon, SearchIcon } from '../icons';
+import font from '../text/font';
+import { useAppColorScheme } from '../theme';
+
+export interface SearchBarProps extends TextInputProps {
+  style?: StyleProp<ViewStyle>;
+  placeholder?: string;
+  searchPhrase: string;
+  onSearchPhraseChange: (searchPhrase: string) => void;
+}
+
+const hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=HY1KvobxOReLeC8Z-4
+const SearchBar = forwardRef<TextInput, SearchBarProps>(
+  ({ style, placeholder, searchPhrase, onSearchPhraseChange, testID, ...textInputProps }, ref) => {
+    const colorScheme = useAppColorScheme();
+
+    const onClear = useCallback(() => {
+      onSearchPhraseChange('');
+    }, [onSearchPhraseChange]);
+
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: colorScheme.white,
+          },
+          style,
+        ]}>
+        <SearchIcon color={colorScheme.text} style={styles.searchIcon} />
+        <TextInput
+          accessibilityRole="search"
+          onChangeText={onSearchPhraseChange}
+          placeholder={placeholder}
+          placeholderTextColor={colorScheme.text}
+          ref={ref}
+          returnKeyType="search"
+          style={[styles.textInput, { color: colorScheme.text }]}
+          value={searchPhrase}
+          testID={testID}
+          {...textInputProps}
+        />
+        {searchPhrase ? (
+          <TouchableOpacity
+            testID={concatTestID(testID, 'clear')}
+            accessibilityRole="button"
+            hitSlop={hitSlop}
+            onPress={onClear}
+            style={styles.clearButton}>
+            <CloseIcon color={colorScheme.text} height={12} width={12} />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+SearchBar.displayName = 'SearchBar';
+
+const styles = StyleSheet.create({
+  clearButton: {
+    marginLeft: 6,
+    marginRight: 16,
+  },
+  container: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 0,
+    flexDirection: 'row',
+    height: 40,
+  },
+  searchIcon: {
+    marginLeft: 8,
+    marginRight: 6,
+  },
+  textInput: {
+    ...font.regular,
+    flex: 1,
+    fontSize: 14,
+    height: 40,
+    letterSpacing: 0.2,
+    lineHeight: 18,
+    paddingBottom: Platform.OS === 'ios' ? 2 : undefined,
+  },
+});
+
+export default SearchBar;

package/src/ui-components/state/error-screen.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ErrorScreen, { ErrorScreenProps } from './error-screen';
+
+const Basic: StoryObj<ErrorScreenProps> = {
+  args: {
+    title: 'Error',
+    subtitle: 'The app has reached an error state.',
+    button: { label: 'Primary', onPress: () => null },
+  },
+};
+
+export { Basic as ErrorScreen };
+
+export default {
+  title: 'view/loading/Error Screen',
+  component: ErrorScreen,
+  parameters: {
+    noSafeArea: true,
+  },
+} as Meta<typeof ErrorScreen>;

package/src/ui-components/state/error-screen.tsx

@@ -0,0 +1,71 @@
+import React, { FunctionComponent } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Button } from '../buttons';
+import { CredentialWarningIcon } from '../icons';
+import { ScrollViewScreen } from '../screens';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export interface ErrorScreenButton {
+  testID?: string;
+  label: string;
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+export interface ErrorScreenProps {
+  testID?: string;
+  title: string;
+  subtitle: string;
+  button: ErrorScreenButton;
+}
+
+const ErrorScreen: FunctionComponent<ErrorScreenProps> = ({ testID, title, subtitle, button }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <ScrollViewScreen
+      header={{
+        static: true,
+        title: title,
+      }}
+      modalPresentation
+      scrollView={{
+        testID,
+      }}>
+      <View style={[styles.wrapper, { backgroundColor: colorScheme.background }]}>
+        <View style={styles.warning}>
+          <CredentialWarningIcon height={42} width={42} />
+          <Typography color={colorScheme.text} preset="regular" style={styles.message}>
+            {subtitle}
+          </Typography>
+        </View>
+
+        {button ? (
+          <Button disabled={button.disabled} onPress={button.onPress} testID={button.testID} title={button.label} />
+        ) : undefined}
+      </View>
+    </ScrollViewScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  message: {
+    textAlign: 'center',
+  },
+  warning: {
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    paddingHorizontal: 16,
+  },
+});
+
+export default ErrorScreen;

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

@@ -0,0 +1,4 @@
+import type { TypographyProps } from './typography';
+import Typography from './typography';
+
+export { Typography, TypographyProps };

package/src/ui-components/text/typography.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta,StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import React from 'react';
+import type { ColorValue } from 'react-native';
+
+import ColorSchemes from '../../../storybook/colorScheme';
+import { ColorScheme, useAppColorScheme } from '../theme';
+import Typography, { TypographyProps } from './typography';
+
+type ColorSchemeKey = keyof Omit<ColorScheme, 'darkMode'>;
+
+const Render = ({ color, ...args }: TypographyProps) => {
+  const colorScheme = useAppColorScheme();
+  return <Typography {...args} color={colorScheme[color as ColorSchemeKey] as ColorValue} />;
+};
+
+const Basic: StoryObj<typeof Typography> = {
+  args: {
+    children: 'Text',
+    preset: 'regular',
+    caps: false,
+    color: 'text',
+    align: 'left',
+    numberOfLines: 1,
+    ellipsizeMode: 'tail',
+  },
+  render: Render,
+};
+
+export { Basic as Typography };
+
+export default {
+  title: 'base/Typography',
+  component: Typography,
+  args: {
+   onAnnouncementFinished: fn()
+  },
+  argTypes: {
+    preset: {
+      options: [
+        'xl',
+        'l',
+        'l/line-height-large',
+        'regular',
+        'm',
+        's',
+        's/line-height-capped',
+        's/line-height-small',
+        's/code',
+        'xs',
+        'xs/line-height-small',
+        'xs/code',
+      ],
+      control: { type: 'radio' },
+    },
+    color: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+    align: {
+      options: ['left', 'center', 'right'],
+      control: { type: 'radio' },
+    },
+    ellipsizeMode: {
+      options: ['head', 'middle', 'tail', 'clip'],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1045-30326',
+    },
+  },
+} as Meta<typeof Typography>;

package/src/ui-components/theme/color-scheme-context.tsx

@@ -0,0 +1,49 @@
+import React, { PropsWithChildren } from 'react';
+
+import type { ColorScheme } from './color-scheme';
+
+const defaultColorScheme: ColorScheme = {
+  accent: '#0F151A',
+  accentText: '#EBF2F4',
+  background: '#F1F3F5',
+  backgroundScroll: 'rgba(241, 243, 245, 0.7)',
+  black: '#000000',
+  codeAccent: '#CFD2E7',
+  credentialHeaderBackground: 'rgba(255, 255, 255, 0.87)',
+  error: '#D90D0D',
+  errorText: '#A73535',
+  grayDark: '#CDD4DA',
+  linkText: '#3F7BA6',
+  success: '#00D066',
+  successText: '#006B34',
+  text: '#0D0E10',
+  warning: '#F7BF0B',
+  white: '#FFFFFF',
+  darkMode: false,
+  nerdView: {
+    background: 'rgba(2, 4, 21, 0.95)',
+    attributeLabel: '#929497',
+    attributeValueBackground: 'rgba(255, 255, 255, 0.02)',
+    attributeValueBorder: 'rgba(255, 255, 255, 0.2)',
+    attributeSectionBackground: 'rgba(2, 4, 21, 0.8)',
+    button: 'rgba(255, 255, 255, 0.05)',
+    codeHighlightText: 'rgba(232, 135, 114, 1)',
+  },
+};
+
+const ColorSchemeContext = React.createContext<ColorScheme>(defaultColorScheme);
+ColorSchemeContext.displayName = 'ColorSchemeContext';
+
+export function ColorSchemeProvider<Scheme extends ColorScheme = ColorScheme>(
+  props: PropsWithChildren<{ colorScheme: Scheme }>,
+) {
+  return <ColorSchemeContext.Provider value={props.colorScheme}>{props.children}</ColorSchemeContext.Provider>;
+}
+
+/**
+ * A hook to gain access to the current `ColorScheme`
+ * @note A custom superset of `ColorScheme` can be used (must also be passed to the `ColorSchemeProvider`)
+ */
+export function useAppColorScheme<Scheme extends ColorScheme = ColorScheme>(): Readonly<Scheme> {
+  return React.useContext(ColorSchemeContext) as Scheme;
+}

package/src/ui-components/theme/color-scheme.ts

@@ -0,0 +1,32 @@
+/**
+ * Color flavour of the application
+ * colors according to figma design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=0-1
+ */
+export interface ColorScheme {
+  accent: string;
+  accentText: string;
+  background: string;
+  backgroundScroll: string;
+  black: string;
+  codeAccent: string;
+  credentialHeaderBackground: string;
+  error: string;
+  errorText: string;
+  grayDark: string;
+  linkText: string;
+  success: string;
+  successText: string;
+  text: string;
+  warning: string;
+  white: string;
+  darkMode: boolean;
+  nerdView: {
+    background: string;
+    attributeLabel: string;
+    attributeSectionBackground: string;
+    attributeValueBackground: string;
+    attributeValueBorder: string;
+    button: string;
+    codeHighlightText: string;
+  };
+}

package/src/utils/array.ts

@@ -0,0 +1,3 @@
+export function addElementIf<T>(condition: boolean, obj: T) {
+  return condition ? Array(obj) : [];
+}

package/src/utils/backup.ts

@@ -0,0 +1,5 @@
+import { generateUUID } from './uuid';
+
+export const getBackupFileName = (): string => {
+  return `procivis-one-backup-${generateUUID()}.zip`;
+};

package/src/utils/date.ts

@@ -1,9 +1,13 @@
 // Date & Time formatted as specified in SW-610
 
-import { NativeModules } from 'react-native';
+import { I18nManager, Platform, Settings } from 'react-native';
+import { format } from 'timeago.js';
+
+const MINUTE = 60 * 1000;
+const DAY = 24 * 60 * MINUTE;
 
 // OS locale
-const systemLocale: string = NativeModules.I18nManager?.localeIdentifier
+const systemLocale: string | undefined = I18nManager.getConstants().localeIdentifier
   ?.replace(/_/g, '-')
   .split('#')[0]
   .replace(/-$/, '');
@@ -47,3 +51,103 @@ export const formatDateTime = (date: Date, locale?: string) => {
     return undefined;
   }
 };
+
+/**
+ * Month format
+ */
+export const formatMonth = (date: Date, locale: string): string => {
+  return `${date.toLocaleString(locale, {
+    month: 'long',
+  })} ${date.getFullYear()}`;
+};
+
+/**
+ * Time-ago format
+ */
+export const formatTimeAgo = (date: Date, locale: string): string => {
+  return format(date, locale);
+};
+
+/**
+ * Timestamp formatted for general use
+ */
+export const formatTimestamp = (date: Date, locale: string, nowLabel: string): string => {
+  const now = Date.now();
+  const timestamp = date.getTime();
+  if (now < timestamp) {
+    // in the future
+    return formatDateTime(date, locale) ?? '';
+  }
+
+  // in the past
+  if (now - timestamp < MINUTE) {
+    // less than a minute ago
+    return nowLabel;
+  }
+
+  // less than a day ago
+  if (now - timestamp < DAY) {
+    return formatTimeAgo(date, locale);
+  }
+
+  // longer ago
+  return formatDateTime(date, locale) ?? '';
+};
+
+const pad = (x: number) => (x >= 0 && x < 10 ? `0${x}` : String(x));
+
+/**
+ * Utility function to deal with `date`-type attributes
+ * @param {Date} date local timezone representation
+ * @returns {number} the same day, but UTC timezone with midnight time
+ */
+export const convertDateToUTCTimestamp = (date: Date): number =>
+  Date.parse(`${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`);
+
+/**
+ * Utility function to deal with `date`-type attributes
+ * @param {string} date in YYYY-MM-DD representation
+ * @returns {Date} the same day, but local timezone with midnight time
+ */
+export const convertDateStrToLocalDate = (date: string): Date =>
+  Platform.select({
+    // android conversion using the standard date parsing doesn't work, computing the timestamp manually
+    android: (() => {
+      const timestamp = Date.parse(date);
+      const timezoneOffset = new Date(date).getTimezoneOffset();
+      return new Date(timestamp + timezoneOffset * MINUTE);
+    })(),
+    default: new Date(`${date}T00:00:00`),
+  });
+
+/**
+ * Inverted function to {@link convertDateToUTCTimestamp}
+ * @param {number} utcTimestamp date timestamp represented as midnight UTC time
+ * @returns {string} formatted date (based on locale settings, e.g. `21/02/2021`)
+ */
+export const formatDateOnlyFromUTCTimestamp = (utcTimestamp: number): string => {
+  const utcDate = new Date(utcTimestamp);
+  return (
+    formatDate(
+      convertDateStrToLocalDate(
+        `${utcDate.getUTCFullYear()}-${pad(utcDate.getUTCMonth() + 1)}-${pad(utcDate.getUTCDate())}`,
+      ),
+    ) ?? ''
+  );
+};
+
+const locale = (
+  Platform.OS === 'ios'
+    ? Settings.get('AppleLocale')
+    : I18nManager.getConstants().localeIdentifier
+)
+  ?.split('@')[0]
+  .replace('_', '-');
+
+export const formatDateTimeLocalized = (date: Date) => {
+  return formatDateTime(date, locale);
+};
+
+export const formatDateLocalized = (date: Date) => {
+  return formatDate(date, locale);
+};

package/src/utils/filtering.ts

@@ -0,0 +1,5 @@
+export const nonEmptyFilter = <TValue>(
+  value: TValue | null | undefined,
+): value is TValue => {
+  return value !== null && value !== undefined;
+};

package/src/utils/history.ts

@@ -0,0 +1,71 @@
+import { Claim, ClaimValue, DataTypeEnum, HistoryListItem, ProofInputClaim } from '@procivis/react-native-one-core';
+import moment, { Moment } from 'moment';
+
+import { nonEmptyFilter } from './filtering';
+
+export interface HistoryGroupByDaySection {
+  data: HistoryListItem[];
+  date: Moment;
+  firstYearEntry: boolean;
+}
+
+export const groupEntriesByDay = (entries: HistoryListItem[]) => {
+  const groupedEntries = entries.reduce((result: HistoryGroupByDaySection[], entry: HistoryListItem) => {
+    const entryDate = moment(entry.createdDate);
+
+    const matchingEntry = result.find(({ date }) => date.isSame(entryDate, 'day'));
+    if (matchingEntry) {
+      matchingEntry.data.push(entry);
+    } else {
+      result.push({ data: [entry], date: entryDate, firstYearEntry: false });
+    }
+
+    return result;
+  }, []);
+
+  return groupedEntries
+    .sort(({ date: a }, { date: b }) => b.valueOf() - a.valueOf())
+    .map((item, index, list) => {
+      item.firstYearEntry = !index || !list[index - 1].date.isSame(item.date, 'year');
+      return item;
+    });
+};
+
+export const claimValueFromProofInputClaim = ({ schema, value }: ProofInputClaim): ClaimValue | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  if (Array.isArray(value)) {
+    const values = value.map(claimFromProofInputClaim).filter(nonEmptyFilter);
+    return schema.dataType === (DataTypeEnum.Object as string)
+      ? {
+          array: schema.array,
+          dataType: DataTypeEnum.Object,
+          value: values,
+        }
+      : {
+          array: true,
+          dataType: schema.dataType,
+          value: values,
+        };
+  }
+
+  return {
+    array: false,
+    dataType: schema.dataType,
+    value,
+  };
+};
+
+export const claimFromProofInputClaim = (input: ProofInputClaim): Claim | undefined => {
+  const value = claimValueFromProofInputClaim(input);
+  if (!value) {
+    return undefined;
+  }
+  return {
+    ...value,
+    id: input.schema.id,
+    key: input.schema.key,
+  };
+};

package/src/utils/hooks/connectivity/connectivity.test.ts

@@ -0,0 +1,95 @@
+import { getInvitationUrlTransports, Transport } from './connectivity';
+
+jest.mock('@procivis/react-native-one-core', () => ({
+  initializeCore: () => Promise.resolve({} as any),
+}));
+
+jest.mock('@sentry/react-native', () => ({
+  captureException: () => {},
+}));
+
+jest.mock('@react-native-community/netinfo', () => ({
+  addEventListener: () => {},
+}));
+
+jest.mock('react-native-bluetooth-state-manager', () => ({
+  onStateChange: () => {},
+}));
+
+describe('getInvitationUrlTransports', () => {
+  test('BLE OpenID4VP url', () => {
+    const transports = getInvitationUrlTransports(
+      'OPENID4VP://connect?name=XFwsduA5&key=24c810cb01a8b12200bdb66dc5a7ac9b49a4cfdd5c4b89f51e03206be3abac5b',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.Bluetooth]);
+  });
+  test('MQTT OpenID4VP url', () => {
+    const transports = getInvitationUrlTransports(
+      'OPENID4VP://connect?key=24c810cb01a8b12200bdb66dc5a7ac9b49a4cfdd5c4b89f51e03206be3abac5b&brokerUrl=mqtt://dev.procivis-one.com&topicId=540684a4-430c-441c-b188-786653f5ab35',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.MQTT]);
+  });
+  test('Mixed BLE/MQTT OpenID4VP url', () => {
+    const transports = getInvitationUrlTransports(
+      'OPENID4VP://connect?name=XFwsduA5&key=24c810cb01a8b12200bdb66dc5a7ac9b49a4cfdd5c4b89f51e03206be3abac5b&brokerUrl=mqtt://dev.procivis-one.com&topicId=540684a4-430c-441c-b188-786653f5ab35',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.Bluetooth, Transport.MQTT]);
+  });
+  test('BLE OpenID4VP url with custom scheme', () => {
+    const transports = getInvitationUrlTransports(
+      'MDOC-OPENID4VP://connect?name=XFwsduA5&key=24c810cb01a8b12200bdb66dc5a7ac9b49a4cfdd5c4b89f51e03206be3abac5b',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.Bluetooth]);
+  });
+  test('MQTT OpenID4VP url with custom scheme', () => {
+    const transports = getInvitationUrlTransports(
+      'MDOC-OPENID4VP://connect?key=24c810cb01a8b12200bdb66dc5a7ac9b49a4cfdd5c4b89f51e03206be3abac5b&brokerUrl=mqtt://dev.procivis-one.com&topicId=540684a4-430c-441c-b188-786653f5ab35',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.MQTT]);
+  });
+  test('Mixed BLE/MQTT OpenID4VP url with custom scheme', () => {
+    const transports = getInvitationUrlTransports(
+      'MDOC-OPENID4VP://connect?name=XFwsduA5&key=24c810cb01a8b12200bdb66dc5a7ac9b49a4cfdd5c4b89f51e03206be3abac5b&brokerUrl=mqtt://dev.procivis-one.com&topicId=540684a4-430c-441c-b188-786653f5ab35',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.Bluetooth, Transport.MQTT]);
+  });
+  test('HTTP OpenID4VP url', () => {
+    const transports = getInvitationUrlTransports(
+      'openid4vp://?response_type=vp_token&state=25fdb134-487d-4bcd-9fdf-777e7f74f128&nonce=DZE2qP6FaDksHxkfOdYJC1LWgVyf5Ibc&client_id_scheme=redirect_uri&client_id=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2Fresponse&response_mode=direct_post&response_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2Fresponse&client_metadata_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2F89973de1-75ba-4367-89ef-4d928de88933%2Fclient-metadata&presentation_definition_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2F89973de1-75ba-4367-89ef-4d928de88933%2Fpresentation-definition',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.HTTP]);
+  });
+  test('HTTP OpenID4VP url with custom scheme', () => {
+    const transports = getInvitationUrlTransports(
+      'mdoc-openid4vp://?response_type=vp_token&state=25fdb134-487d-4bcd-9fdf-777e7f74f128&nonce=DZE2qP6FaDksHxkfOdYJC1LWgVyf5Ibc&client_id_scheme=redirect_uri&client_id=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2Fresponse&response_mode=direct_post&response_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2Fresponse&client_metadata_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2F89973de1-75ba-4367-89ef-4d928de88933%2Fclient-metadata&presentation_definition_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2F89973de1-75ba-4367-89ef-4d928de88933%2Fpresentation-definition',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.HTTP]);
+  });
+  test('HTTP OpenID4VP url with requestUri', () => {
+    const transports = getInvitationUrlTransports(
+      'openid4vp://?client_id=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2Fresponse&request_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-verifier%2Fv1%2F6e442f9d-bc14-4362-8786-504d7b79c402%2Fclient-request',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.HTTP]);
+  });
+  test('HTTP OpenID credential offer url', () => {
+    const transports = getInvitationUrlTransports(
+      'openid-credential-offer://?credential_offer_uri=https%3A%2F%2Fcore.dev.procivis-one.com%2Fssi%2Foidc-issuer%2Fv1%2F0c2cd9a6-1eff-4536-9505-98d7bd87aad1%2Foffer%2F275c09b2-4f4f-4738-85fc-35399acad176',
+      'mdoc-openid4vp',
+    );
+    expect(transports).toStrictEqual([Transport.HTTP]);
+  });
+
+  test('Invalid link', () => {
+    const transports = getInvitationUrlTransports('invalid');
+    expect(transports).toStrictEqual([]);
+  });
+});