@procivis/one-react-native-components 0.3.62 → 0.3.86

package/src/components/proof-request/{share-credential.tsx → v1/share-credential.tsx}

@@ -6,13 +6,20 @@ import {
   PresentationDefinitionRequestedCredential,
 } from '@procivis/react-native-one-core';
 import React, { FunctionComponent, useMemo } from 'react';
-import { Dimensions, ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Dimensions, ImageSourcePropType, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-import { Button, ButtonType, CredentialDetailsCardListItem, Typography, useAppColorScheme } from '../../ui-components';
-import { concatTestID } from '../../utils';
-import { useCoreConfig } from '../../utils/hooks/core/core-config';
-import { getValidityState, ValidityState } from '../../utils/parsers/credential';
-import { shareCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
+import { CredentialDetailsCardListItem, useAppColorScheme } from '../../../ui-components';
+import { concatTestID } from '../../../utils';
+import { useCoreConfig } from '../../../utils/hooks/core/core-config';
+import { useWalletUnitAttestation } from '../../../utils/hooks/core/wallet-unit';
+import { getValidityState, ValidityState } from '../../../utils/parsers/credential';
+import {
+  shareCredentialCardFromCredential,
+  ShareCredentialCardLabels,
+} from '../../../utils/parsers/credential-sharing';
+import { walletUnitAttestationState } from '../../../utils/wallet-unit';
+import { SelectShareCredentialCardNotice } from '../select-share-credential-card-notice';
+import { ShareCredentialCardNotice } from '../share-credential-card-notice';
 
 export type ShareCredentialLabels = ShareCredentialCardLabels & {
   invalidCredentialNotice: string;
@@ -54,6 +61,7 @@ export const ShareCredential: FunctionComponent<{
   const colorScheme = useAppColorScheme();
   const credential = allCredentials.find((c) => c.id === selectedCredentialId);
   const { data: config } = useCoreConfig();
+  const { data: walletUnitAttestation, isLoading: isLoadingWUA } = useWalletUnitAttestation();
   const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
 
   const selectionOptions = useMemo(
@@ -87,60 +95,43 @@ export const ShareCredential: FunctionComponent<{
     }
     if (validityState === ValidityState.Revoked) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.revoked')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.revokedCredentialNotice}
-          </Typography>
-        </View>
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.revoked')}
+          text={labels.revokedCredentialNotice}
+        />
       );
     }
     if (validityState === ValidityState.Suspended) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.suspended')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.suspendedCredentialNotice}
-          </Typography>
-        </View>
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.suspended')}
+          text={labels.suspendedCredentialNotice}
+        />
       );
     }
 
     if (invalid) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.invalid')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.invalidCredentialNotice}
-          </Typography>
-        </View>
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.invalid')}
+          text={labels.invalidCredentialNotice}
+        />
       );
     }
 
     if (multipleCredentialsAvailable) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.multiple')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.multipleCredentialsNotice}
-          </Typography>
-          <Button
-            onPress={onSelectCredential}
-            style={styles.noticeButton}
-            testID={concatTestID(testID, 'notice.multiple.button')}
-            title={labels.multipleCredentialsSelect}
-            type={ButtonType.Secondary}
-          />
-        </View>
+        <SelectShareCredentialCardNotice
+          buttonTitle={labels.multipleCredentialsSelect}
+          onPress={onSelectCredential}
+          testID={concatTestID(testID, 'notice.multiple')}
+          text={labels.multipleCredentialsNotice}
+        />
       );
     }
-  }, [colorScheme, expanded, invalid, labels, multipleCredentialsAvailable, onSelectCredential, testID, validityState]);
+  }, [expanded, invalid, labels, multipleCredentialsAvailable, onSelectCredential, testID, validityState]);
 
-  if (!config) {
+  if (!config || isLoadingWUA) {
     return null;
   }
 
@@ -152,6 +143,7 @@ export const ShareCredential: FunctionComponent<{
     request,
     selectedFields,
     config,
+    walletUnitAttestationState(walletUnitAttestation),
     testID,
     labels,
   );
@@ -182,13 +174,4 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     marginBottom: 8,
   },
-  notice: {
-    marginBottom: 22,
-    marginHorizontal: 12,
-    padding: 12,
-  },
-  noticeButton: {
-    marginTop: 24,
-    paddingVertical: 11,
-  },
 });

package/src/components/proof-request/v2/index.ts

@@ -0,0 +1,3 @@
+export * from './select-credential-v2';
+export * from './share-credential-v2';
+export * from './share-credential-v2-group';

package/src/components/proof-request/v2/select-credential-v2.tsx

@@ -0,0 +1,59 @@
+import { CredentialListItem, PresentationDefinitionV2CredentialDetail } from '@procivis/react-native-one-core';
+import React, { FC, useCallback, useMemo } from 'react';
+import { Dimensions, ImageSourcePropType } from 'react-native';
+
+import { CredentialDetailsCardListItem } from '../../../ui-components';
+import {
+  ShareCredentialCardLabels,
+  useCoreConfig,
+  useWalletUnitAttestation,
+  walletUnitAttestationState,
+} from '../../../utils';
+import { selectCredentialCardFromV2Credential } from '../../../utils/parsers/credential-sharing-v2';
+
+export const SelectCredentialV2: FC<{
+  credential: PresentationDefinitionV2CredentialDetail;
+  labels: ShareCredentialCardLabels;
+  lastItem: boolean;
+  multiple: boolean;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onSelected?: (credentialId: CredentialListItem['id'], selected: boolean) => void;
+  selected: boolean;
+  testID: string;
+}> = ({ credential, labels, lastItem, multiple, onImagePreview, onSelected, selected, testID }) => {
+  const { data: config } = useCoreConfig();
+  const { data: walletUnitAttestation, isLoading: isLoadingWUA } = useWalletUnitAttestation();
+  const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
+
+  const onHeaderPress = useCallback(() => {
+    onSelected?.(credential.id, !selected);
+  }, [credential.id, onSelected, selected]);
+
+  if (!credential || !config || isLoadingWUA) {
+    return null;
+  }
+
+  const { card, attributes } = selectCredentialCardFromV2Credential(
+    credential,
+    selected,
+    multiple,
+    config,
+    walletUnitAttestationState(walletUnitAttestation),
+    testID,
+    labels,
+  );
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        onHeaderPress,
+        width: cardWidth,
+      }}
+      expanded={selected}
+      lastItem={lastItem}
+      onImagePreview={onImagePreview}
+    />
+  );
+};

package/src/components/proof-request/v2/share-credential-v2-group.tsx

@@ -0,0 +1,258 @@
+import {
+  CredentialListItem,
+  PresentationDefinitionV2,
+  PresentationDefinitionV2CredentialClaim,
+  PresentationSubmitV2CredentialRequest,
+} from '@procivis/react-native-one-core';
+import React, { FC, useCallback, useMemo } from 'react';
+import { ImageSourcePropType, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
+import {
+  BlurView,
+  CredentialCardShadow,
+  DownIcon,
+  Selector,
+  SelectorStatus,
+  TouchableOpacity,
+  UpIcon,
+} from '../../../ui-components';
+import CredentialGroupHeader from '../../../ui-components/credential/group/credential-group-header';
+import { concatTestID, useCredentialListExpandedCard } from '../../../utils';
+import { ShareCredentialLabels } from '../v1/share-credential';
+import { GroupedShareCredentialV2Padding, ShareCredentialV2 } from './share-credential-v2';
+
+export type CredentialQuerySelection = Record<
+  string,
+  PresentationSubmitV2CredentialRequest | PresentationSubmitV2CredentialRequest[]
+>;
+
+export type ShareCredentialGroupLabels = ShareCredentialLabels & {
+  groupHeader: string;
+};
+
+export type ShareCredentialV2GroupProps = {
+  labels: ShareCredentialGroupLabels;
+  lastGroup: boolean;
+  onGroupSelect?: (selected: boolean) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onSelectCredential: (requestCredentialId: string) => () => void;
+  onSelectField: (
+    requestCredentialId: string,
+  ) => (
+    credentialId: CredentialListItem['id'],
+    fieldPath: PresentationDefinitionV2CredentialClaim['path'],
+    selected: boolean,
+  ) => void;
+  presentationDefinition: PresentationDefinitionV2;
+  requestGroup: string[];
+  selected?: boolean;
+  selectedCredentials?: CredentialQuerySelection;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+  valid: boolean;
+};
+
+const multipleCredentialsSelected = (
+  selectedCredentials: CredentialQuerySelection | undefined,
+  credentialRequestId: string,
+) => {
+  return (
+    selectedCredentials &&
+    selectedCredentials[credentialRequestId] &&
+    Array.isArray(selectedCredentials[credentialRequestId]) &&
+    (selectedCredentials[credentialRequestId] as PresentationSubmitV2CredentialRequest[]).length > 1
+  );
+};
+
+const numberOfCardsForRequest = (
+  selectedCredentials: CredentialQuerySelection | undefined,
+  credentialRequestId: string,
+) => {
+  if (!selectedCredentials || !selectedCredentials[credentialRequestId]) {
+    return 1;
+  }
+  const selection = selectedCredentials[credentialRequestId];
+  if (Array.isArray(selection)) {
+    return selection.length;
+  }
+  return 1;
+};
+
+const heightForNumberOfCards = (numberOfCards: number) => 60 * (numberOfCards + 1) + 12 * numberOfCards;
+
+export const ShareCredentialV2Group: FC<ShareCredentialV2GroupProps> = ({
+  labels,
+  lastGroup,
+  onGroupSelect,
+  onImagePreview,
+  onSelectCredential,
+  onSelectField,
+  presentationDefinition,
+  requestGroup,
+  selected,
+  selectedCredentials = {},
+  style,
+  testID,
+  valid,
+}) => {
+  const { expandedCredential, onHeaderPress } = useCredentialListExpandedCard();
+  const numberOfCards = requestGroup.reduce(
+    (acc, groupId) => acc + numberOfCardsForRequest(selectedCredentials, groupId),
+    0,
+  );
+  const singleCredentialGroup =
+    requestGroup.length === 1 && !multipleCredentialsSelected(selectedCredentials, requestGroup[0]);
+
+  const headerPressHandler = useCallback(() => {
+    onGroupSelect?.(!selected);
+  }, [selected, onGroupSelect]);
+
+  const onNestedCardHeaderPress = useCallback(
+    (credentialId: string) => () => {
+      if (!selected) {
+        onGroupSelect?.(true);
+      }
+      onHeaderPress(credentialId);
+    },
+    [selected, onGroupSelect, onHeaderPress],
+  );
+
+  const credentialCards = useMemo(() => {
+    return requestGroup.flatMap((credentialRequestId, credentialRequestIndex, { length: credentialRequestsLength }) => {
+      const lastQuery = credentialRequestIndex === credentialRequestsLength - 1;
+
+      const credentialQuery = presentationDefinition.credentialQueries[credentialRequestId];
+      let defaultSelection: PresentationSubmitV2CredentialRequest;
+      if ('applicableCredentials' in credentialQuery) {
+        defaultSelection = credentialQuery.applicableCredentials?.[0]
+          ? {
+              credentialId: credentialQuery.applicableCredentials[0].id,
+              userSelections: [],
+            }
+          : {
+              credentialId: '',
+              userSelections: [],
+            };
+      } else {
+        defaultSelection = {
+          credentialId: '',
+          userSelections: [],
+        };
+      }
+      const request = selectedCredentials[credentialRequestId];
+      const credentialSelections = request ? (Array.isArray(request) ? request : [request]) : [defaultSelection];
+
+      return credentialSelections?.flatMap((credentialRequest, credentialIndex, { length: credentialsLength }) => {
+        const selectedFields = credentialRequest.userSelections;
+        const cardId = `${credentialRequestId}-${credentialRequest.credentialId}`;
+        const lastItem = singleCredentialGroup ? lastGroup : lastQuery && credentialIndex === credentialsLength - 1;
+        const cardExpanded = selected && (singleCredentialGroup || expandedCredential === cardId);
+        const headerAccessory =
+          singleCredentialGroup && valid ? (
+            <Selector status={selected ? SelectorStatus.SelectedRadio : SelectorStatus.Empty} />
+          ) : cardExpanded ? (
+            UpIcon
+          ) : (
+            DownIcon
+          );
+        return (
+          <ShareCredentialV2
+            credentialQuery={credentialQuery}
+            credentialRequestId={credentialRequestId}
+            expanded={cardExpanded}
+            grouped={!singleCredentialGroup}
+            headerAccessory={headerAccessory}
+            key={credentialRequestId}
+            labels={labels}
+            lastItem={lastItem}
+            onHeaderPress={singleCredentialGroup ? headerPressHandler : onNestedCardHeaderPress(cardId)}
+            onImagePreview={onImagePreview}
+            onSelectCredential={onSelectCredential?.(credentialRequestId)}
+            onSelectField={onSelectField(credentialRequestId)}
+            selectedCredentialId={credentialRequest.credentialId}
+            selectedFields={selectedFields}
+            style={[!singleCredentialGroup && styles.requestedCredential, lastItem && styles.requestedCredentialLast]}
+            testID={concatTestID(testID, credentialRequestId)}
+          />
+        );
+      });
+    });
+  }, [
+    expandedCredential,
+    labels,
+    lastGroup,
+    headerPressHandler,
+    onImagePreview,
+    onNestedCardHeaderPress,
+    onSelectCredential,
+    onSelectField,
+    presentationDefinition.credentialQueries,
+    requestGroup,
+    selected,
+    selectedCredentials,
+    singleCredentialGroup,
+    testID,
+    valid,
+  ]);
+
+  if (singleCredentialGroup) {
+    return credentialCards[0];
+  }
+
+  const groupHeaderAccessory = valid ? (
+    <Selector status={selected ? SelectorStatus.SelectedRadio : SelectorStatus.Empty} />
+  ) : selected ? (
+    UpIcon
+  ) : (
+    DownIcon
+  );
+
+  return (
+    <Animated.View
+      layout={LinearTransition}
+      style={[
+        styles.animatedWrapper,
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          height: selected || lastGroup ? 'auto' : heightForNumberOfCards(numberOfCards),
+        },
+        style,
+      ]}>
+      <Animated.View
+        layout={LinearTransition}
+        style={[
+          singleCredentialGroup ? undefined : styles.groupedCredentialsWrapper,
+          !singleCredentialGroup && styles.requestedCredential,
+          lastGroup && styles.requestedCredentialLast,
+          style,
+        ]}>
+        <BlurView blurStyle="strong" darkMode={true} style={StyleSheet.absoluteFill} />
+        <TouchableOpacity onPress={headerPressHandler}>
+          <CredentialGroupHeader accessory={groupHeaderAccessory} name={labels.groupHeader} style={styles.header} />
+        </TouchableOpacity>
+        {credentialCards}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  animatedWrapper: {
+    ...CredentialCardShadow,
+  },
+  groupedCredentialsWrapper: {
+    borderRadius: 10 + GroupedShareCredentialV2Padding,
+    overflow: 'hidden',
+    paddingBottom: GroupedShareCredentialV2Padding,
+  },
+  header: {
+    marginBottom: GroupedShareCredentialV2Padding,
+  },
+  requestedCredential: {
+    marginBottom: 12,
+  },
+  requestedCredentialLast: {
+    marginBottom: 0,
+  },
+});

package/src/components/proof-request/v2/share-credential-v2.tsx

@@ -0,0 +1,211 @@
+import {
+  CredentialListItem,
+  PresentationDefinitionV2CredentialClaim,
+  PresentationDefinitionV2CredentialQuery,
+} from '@procivis/react-native-one-core';
+import React, { FunctionComponent, useCallback, useMemo } from 'react';
+import { Dimensions, ImageSourcePropType, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { CredentialDetailsCardListItem, useAppColorScheme } from '../../../ui-components';
+import {
+  concatTestID,
+  getValidityState,
+  useCoreConfig,
+  useWalletUnitAttestation,
+  ValidityState,
+  walletUnitAttestationState,
+} from '../../../utils';
+import { shareCredentialCardFromV2PresentationCredential } from '../../../utils/parsers/credential-sharing-v2';
+import { SelectShareCredentialCardNotice } from '../select-share-credential-card-notice';
+import { ShareCredentialCardNotice } from '../share-credential-card-notice';
+import { ShareCredentialLabels } from '../v1';
+
+export type ShareCredentialV2Props = {
+  credentialQuery: PresentationDefinitionV2CredentialQuery;
+  credentialRequestId: string;
+  expanded?: boolean;
+  grouped?: boolean;
+  headerAccessory?: React.ComponentType<any> | React.ReactElement;
+  labels: ShareCredentialLabels;
+  lastItem?: boolean;
+  onHeaderPress?: (_credentialId?: string) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onSelectCredential?: () => void;
+  onSelectField: (
+    credentialId: CredentialListItem['id'],
+    fieldPath: PresentationDefinitionV2CredentialClaim['path'],
+    selected: boolean,
+  ) => void;
+  selectedCredentialId?: CredentialListItem['id'];
+  selectedFields?: Array<PresentationDefinitionV2CredentialClaim['path']>;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+};
+
+export const GroupedShareCredentialV2Padding = 4;
+
+export const ShareCredentialV2: FunctionComponent<ShareCredentialV2Props> = ({
+  credentialQuery,
+  credentialRequestId,
+  expanded,
+  grouped,
+  headerAccessory,
+  labels,
+  lastItem,
+  onHeaderPress,
+  onImagePreview,
+  onSelectCredential,
+  onSelectField,
+  selectedCredentialId,
+  selectedFields,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const applicableCredentials =
+    'applicableCredentials' in credentialQuery ? credentialQuery.applicableCredentials : undefined;
+  const failureHint = 'failureHint' in credentialQuery ? credentialQuery.failureHint : undefined;
+  const credential = applicableCredentials?.find((c) => c.id === selectedCredentialId) ?? applicableCredentials?.[0];
+  const { data: config } = useCoreConfig();
+  const { data: walletUnitAttestation, isLoading: isLoadingWUA } = useWalletUnitAttestation();
+  const cardWidth = useMemo(
+    () => Dimensions.get('window').width - 32 - (grouped ? GroupedShareCredentialV2Padding * 2 : 0),
+    [grouped],
+  );
+
+  const multipleCredentialsAvailable = Boolean(applicableCredentials?.length && applicableCredentials.length > 1);
+
+  const validityState = getValidityState(
+    credential
+      ? {
+          ...credential,
+          issuer: credential?.issuer?.id,
+        }
+      : undefined,
+  );
+
+  const footer = useMemo(() => {
+    if (!expanded) {
+      return;
+    }
+    if (validityState === ValidityState.Revoked) {
+      return (
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.revoked')}
+          text={labels.revokedCredentialNotice}
+        />
+      );
+    }
+    if (validityState === ValidityState.Suspended) {
+      return (
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.suspended')}
+          text={labels.suspendedCredentialNotice}
+        />
+      );
+    }
+
+    if (failureHint?.reason === 'VALIDITY') {
+      return (
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.invalid')}
+          text={labels.invalidCredentialNotice}
+        />
+      );
+    }
+
+    if (multipleCredentialsAvailable) {
+      return (
+        <SelectShareCredentialCardNotice
+          buttonTitle={labels.multipleCredentialsSelect}
+          onPress={onSelectCredential}
+          testID={concatTestID(testID, 'notice.multiple')}
+          text={labels.multipleCredentialsNotice}
+        />
+      );
+    }
+  }, [
+    expanded,
+    failureHint?.reason,
+    labels.invalidCredentialNotice,
+    labels.multipleCredentialsNotice,
+    labels.multipleCredentialsSelect,
+    labels.revokedCredentialNotice,
+    labels.suspendedCredentialNotice,
+    multipleCredentialsAvailable,
+    onSelectCredential,
+    testID,
+    validityState,
+  ]);
+
+  const onAttributeSelected = useCallback(
+    (fieldPath: PresentationDefinitionV2CredentialClaim['path'], selected: boolean) => {
+      if (!selectedCredentialId) {
+        return;
+      }
+      onSelectField(selectedCredentialId, fieldPath, selected);
+    },
+    [onSelectField, selectedCredentialId],
+  );
+
+  if (!config || isLoadingWUA) {
+    return null;
+  }
+
+  const {
+    card: { header, ...card },
+    attributes,
+  } = shareCredentialCardFromV2PresentationCredential(
+    credential,
+    failureHint,
+    Boolean(expanded),
+    multipleCredentialsAvailable,
+    selectedFields,
+    config,
+    walletUnitAttestationState(walletUnitAttestation),
+    testID,
+    labels,
+  );
+
+  if (headerAccessory) {
+    header.accessory = headerAccessory;
+  }
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        credentialId: credentialRequestId,
+        header,
+        onHeaderPress,
+        width: cardWidth,
+      }}
+      expanded={expanded}
+      footer={footer}
+      lastItem={lastItem}
+      onAttributeSelected={onAttributeSelected}
+      onImagePreview={onImagePreview}
+      style={[
+        styles.credential,
+        grouped ? styles.groupedCredential : styles.bordered,
+        { borderColor: colorScheme.background },
+        style,
+      ]}
+      testID={testID}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  bordered: {
+    borderWidth: 1,
+  },
+  credential: {
+    borderRadius: 10,
+    marginBottom: 8,
+  },
+  groupedCredential: {
+    marginHorizontal: GroupedShareCredentialV2Padding,
+  },
+});

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

@@ -12,6 +12,8 @@ import type { HoldButtonProps } from './hold-button';
 import HoldButton from './hold-button';
 import type { ScanButtonProps } from './scan-button';
 import ScanButton from './scan-button';
+import type { ShareButtonProps } from './share-button';
+import ShareButton from './share-button';
 
 export {
   BackButton,
@@ -31,4 +33,6 @@ export {
   HoldButtonProps,
   ScanButton,
   ScanButtonProps,
+  ShareButton,
+  ShareButtonProps,
 };