@bifold/core 1.0.0

package/lib/module/components/misc/ConnectionAlert.js

@@ -0,0 +1,108 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { hitSlop } from '../../constants';
+import { useTheme } from '../../contexts/theme';
+import { Screens, Stacks } from '../../types/navigators';
+import PopupModal from '../modals/PopupModal';
+import Link from '../texts/Link';
+import { InfoBoxType } from './InfoBox';
+import UnorderedList from './UnorderedList';
+import { ThemedText } from '../texts/ThemedText';
+const ConnectionAlert = ({
+  connectionID
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    ColorPallet
+  } = useTheme();
+  const [infoCardVisible, setInfoCardVisible] = useState(false);
+  const settingsNavigation = useNavigation();
+  const styles = StyleSheet.create({
+    modalCenter: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: ColorPallet.notification.popupOverlay,
+      padding: 20
+    },
+    notifyTextContainer: {
+      borderLeftColor: ColorPallet.brand.highlight,
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+      borderLeftWidth: 10,
+      flex: 1,
+      paddingLeft: 10,
+      paddingVertical: 15,
+      marginVertical: 15
+    },
+    row: {
+      flexDirection: 'row'
+    },
+    notifyTitle: {
+      marginBottom: 5
+    },
+    notifyText: {
+      marginVertical: 5
+    },
+    notifyTextList: {
+      marginVertical: 6
+    },
+    informationIcon: {
+      color: ColorPallet.notification.infoIcon,
+      marginLeft: 10
+    }
+  });
+  const toggleInfoCard = () => setInfoCardVisible(!infoCardVisible);
+  const navigateToSettings = () => {
+    toggleInfoCard();
+    settingsNavigation.navigate(Stacks.SettingStack, {
+      screen: Screens.Settings
+    });
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.notifyTextContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.row
+  }, /*#__PURE__*/React.createElement(ThemedText, {
+    variant: "title",
+    style: styles.notifyTitle
+  }, t('ConnectionAlert.AddedContacts')), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    testID: t('Global.Info'),
+    accessibilityLabel: t('ConnectionAlert.WhatAreContacts'),
+    accessibilityRole: 'button',
+    onPress: toggleInfoCard,
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: 'information-outline',
+    size: 30,
+    style: styles.informationIcon
+  }))), infoCardVisible && /*#__PURE__*/React.createElement(PopupModal, {
+    notificationType: InfoBoxType.Info,
+    title: t('ConnectionAlert.WhatAreContacts'),
+    bodyContent: /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ThemedText, {
+      variant: "popupModalText"
+    }, t('ConnectionAlert.PopupIntro')), /*#__PURE__*/React.createElement(UnorderedList, {
+      unorderedListItems: [t('ConnectionAlert.PopupPoint1'), t('ConnectionAlert.PopupPoint2'), t('ConnectionAlert.PopupPoint3')]
+    }), /*#__PURE__*/React.createElement(ThemedText, {
+      variant: "popupModalText"
+    }, t('ConnectionAlert.SettingsInstruction')), /*#__PURE__*/React.createElement(Link, {
+      style: {
+        marginBottom: 8
+      },
+      onPress: navigateToSettings,
+      linkText: t('ConnectionAlert.SettingsLink')
+    }), /*#__PURE__*/React.createElement(ThemedText, {
+      variant: "popupModalText"
+    }, t('ConnectionAlert.PrivacyMessage'))),
+    onCallToActionLabel: t('ConnectionAlert.PopupExit'),
+    onCallToActionPressed: toggleInfoCard
+  }), /*#__PURE__*/React.createElement(ThemedText, {
+    style: styles.notifyText
+  }, t('ConnectionAlert.NotificationBodyUpper') + (connectionID || t('ContactDetails.AContact').toLowerCase()) + t('ConnectionAlert.NotificationBodyLower')));
+};
+export default ConnectionAlert;
+//# sourceMappingURL=ConnectionAlert.js.map

package/lib/module/components/misc/ConnectionAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useNavigation","React","useState","useTranslation","StyleSheet","TouchableOpacity","View","Icon","hitSlop","useTheme","Screens","Stacks","PopupModal","Link","InfoBoxType","UnorderedList","ThemedText","ConnectionAlert","connectionID","t","ColorPallet","infoCardVisible","setInfoCardVisible","settingsNavigation","styles","create","modalCenter","flex","justifyContent","alignItems","backgroundColor","notification","popupOverlay","padding","notifyTextContainer","borderLeftColor","brand","highlight","secondaryBackground","borderLeftWidth","paddingLeft","paddingVertical","marginVertical","row","flexDirection","notifyTitle","marginBottom","notifyText","notifyTextList","informationIcon","color","infoIcon","marginLeft","toggleInfoCard","navigateToSettings","navigate","SettingStack","screen","Settings","createElement","style","variant","testID","accessibilityLabel","accessibilityRole","onPress","name","size","notificationType","Info","title","bodyContent","unorderedListItems","linkText","onCallToActionLabel","onCallToActionPressed","toLowerCase"],"sourceRoot":"../../../../src","sources":["components/misc/ConnectionAlert.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/misc/ConnectionImage.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { useTheme } from '../../contexts/theme';
+import { toImageSource } from '../../utils/credential';
+import { useConnectionImageUrl } from '../../utils/helpers';
+const ConnectionImage = ({
+  connectionId,
+  imageUri,
+  marginTop
+}) => {
+  const {
+    ColorPallet
+  } = useTheme();
+  const styles = StyleSheet.create({
+    connectionImageContainer: {
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+      width: 90,
+      height: 90,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 45,
+      marginTop: marginTop ?? 15,
+      borderColor: ColorPallet.grayscale.lightGrey,
+      borderWidth: 3,
+      alignSelf: 'center'
+    },
+    connectionImage: {
+      width: 55,
+      height: 55
+    }
+  });
+  const anonCredsImageUri = useConnectionImageUrl(connectionId ?? '');
+  const connectionImage = imageUri ? imageUri : anonCredsImageUri;
+  return connectionImage ? /*#__PURE__*/React.createElement(View, {
+    style: styles.connectionImageContainer
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: styles.connectionImage,
+    source: toImageSource(connectionImage)
+  })) : null;
+};
+export default ConnectionImage;
+//# sourceMappingURL=ConnectionImage.js.map

package/lib/module/components/misc/ConnectionImage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","StyleSheet","View","useTheme","toImageSource","useConnectionImageUrl","ConnectionImage","connectionId","imageUri","marginTop","ColorPallet","styles","create","connectionImageContainer","backgroundColor","brand","secondaryBackground","width","height","alignItems","justifyContent","borderRadius","borderColor","grayscale","lightGrey","borderWidth","alignSelf","connectionImage","anonCredsImageUri","createElement","style","source"],"sourceRoot":"../../../../src","sources":["components/misc/ConnectionImage.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEtD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,qBAAqB,QAAQ,qBAAqB;AAQ3D,MAAMC,eAA+C,GAAGA,CAAC;EAAEC,YAAY;EAAEC,QAAQ;EAAEC;AAAU,CAAC,KAAK;EACjG,MAAM;IAAEC;EAAY,CAAC,GAAGP,QAAQ,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGV,UAAU,CAACW,MAAM,CAAC;IAC/BC,wBAAwB,EAAE;MACxBC,eAAe,EAAEJ,WAAW,CAACK,KAAK,CAACC,mBAAmB;MACtDC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBC,YAAY,EAAE,EAAE;MAChBZ,SAAS,EAAEA,SAAS,IAAI,EAAE;MAC1Ba,WAAW,EAAEZ,WAAW,CAACa,SAAS,CAACC,SAAS;MAC5CC,WAAW,EAAE,CAAC;MACdC,SAAS,EAAE;IACb,CAAC;IACDC,eAAe,EAAE;MACfV,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EAEF,MAAMU,iBAAiB,GAAGvB,qBAAqB,CAACE,YAAY,IAAI,EAAE,CAAC;EACnE,MAAMoB,eAAe,GAAGnB,QAAQ,GAAGA,QAAQ,GAAGoB,iBAAiB;EAE/D,OAAOD,eAAe,gBACpB5B,KAAA,CAAA8B,aAAA,CAAC3B,IAAI;IAAC4B,KAAK,EAAEnB,MAAM,CAACE;EAAyB,gBAC3Cd,KAAA,CAAA8B,aAAA,CAAC7B,KAAK;IAAC8B,KAAK,EAAEnB,MAAM,CAACgB,eAAgB;IAACI,MAAM,EAAE3B,aAAa,CAACuB,eAAe;EAAE,CAAE,CAC3E,CAAC,GACL,IAAI;AACV,CAAC;AAED,eAAerB,eAAe","ignoreList":[]}

package/lib/module/components/misc/ContentGradient.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg';
+/**
+ * To be used in a relative position controlsContainer that is below (and not in) scrollview content
+ */
+const ContentGradient = ({
+  backgroundColor,
+  height = 30
+}) => {
+  const id = 'gradient';
+  const styles = StyleSheet.create({
+    container: {
+      position: 'absolute',
+      height,
+      width: '100%',
+      top: -height
+    }
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Svg, {
+    height: `${height}`,
+    width: "100%",
+    style: StyleSheet.absoluteFill
+  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(LinearGradient, {
+    id: id,
+    x1: "0%",
+    y1: "0%",
+    x2: "0%",
+    y2: "100%"
+  }, /*#__PURE__*/React.createElement(Stop, {
+    offset: "0%",
+    stopColor: backgroundColor,
+    stopOpacity: 0
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "100%",
+    stopColor: backgroundColor,
+    stopOpacity: 1
+  }))), /*#__PURE__*/React.createElement(Rect, {
+    height: `${height}`,
+    width: "100%",
+    fill: `url(#${id})`
+  })));
+};
+export default ContentGradient;
+//# sourceMappingURL=ContentGradient.js.map

package/lib/module/components/misc/ContentGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Svg","Defs","Rect","LinearGradient","Stop","ContentGradient","backgroundColor","height","id","styles","create","container","position","width","top","createElement","style","absoluteFill","x1","y1","x2","y2","offset","stopColor","stopOpacity","fill"],"sourceRoot":"../../../../src","sources":["components/misc/ContentGradient.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,cAAc,EAAEC,IAAI,QAAQ,kBAAkB;AAOxE;AACA;AACA;AACA,MAAMC,eAA+C,GAAGA,CAAC;EAAEC,eAAe;EAAEC,MAAM,GAAG;AAAG,CAAC,KAAK;EAC5F,MAAMC,EAAE,GAAG,UAAU;EAErB,MAAMC,MAAM,GAAGV,UAAU,CAACW,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACTC,QAAQ,EAAE,UAAU;MACpBL,MAAM;MACNM,KAAK,EAAE,MAAM;MACbC,GAAG,EAAE,CAACP;IACR;EACF,CAAC,CAAC;EAEF,oBACEV,KAAA,CAAAkB,aAAA,CAACjB,IAAI;IAACkB,KAAK,EAAEP,MAAM,CAACE;EAAU,gBAC5Bd,KAAA,CAAAkB,aAAA,CAACf,GAAG;IAACO,MAAM,EAAE,GAAGA,MAAM,EAAG;IAACM,KAAK,EAAC,MAAM;IAACG,KAAK,EAAEjB,UAAU,CAACkB;EAAa,gBACpEpB,KAAA,CAAAkB,aAAA,CAACd,IAAI,qBACHJ,KAAA,CAAAkB,aAAA,CAACZ,cAAc;IAACK,EAAE,EAAEA,EAAG;IAACU,EAAE,EAAC,IAAI;IAACC,EAAE,EAAC,IAAI;IAACC,EAAE,EAAC,IAAI;IAACC,EAAE,EAAC;EAAM,gBACvDxB,KAAA,CAAAkB,aAAA,CAACX,IAAI;IAACkB,MAAM,EAAC,IAAI;IAACC,SAAS,EAAEjB,eAAgB;IAACkB,WAAW,EAAE;EAAE,CAAE,CAAC,eAChE3B,KAAA,CAAAkB,aAAA,CAACX,IAAI;IAACkB,MAAM,EAAC,MAAM;IAACC,SAAS,EAAEjB,eAAgB;IAACkB,WAAW,EAAE;EAAE,CAAE,CACnD,CACZ,CAAC,eACP3B,KAAA,CAAAkB,aAAA,CAACb,IAAI;IAACK,MAAM,EAAE,GAAGA,MAAM,EAAG;IAACM,KAAK,EAAC,MAAM;IAACY,IAAI,EAAE,QAAQjB,EAAE;EAAI,CAAE,CAC3D,CACD,CAAC;AAEX,CAAC;AAED,eAAeH,eAAe","ignoreList":[]}

package/lib/module/components/misc/CredentialCard.js

@@ -0,0 +1,124 @@
+import { MdocRecord, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core';
+import { BrandingOverlayType } from '@bifold/oca/build/legacy';
+import React, { useEffect, useState } from 'react';
+import { TOKENS, useServices } from '../../container-api';
+import { useTheme } from '../../contexts/theme';
+import CredentialCard10 from './CredentialCard10';
+import CredentialCard11 from './CredentialCard11';
+import { useOpenIDCredentials } from '../../modules/openid/context/OpenIDCredentialRecordProvider';
+import { getCredentialForDisplay } from '../../modules/openid/display';
+import { getAttributeField } from '../../modules/openid/utils/utils';
+const CredentialCard = ({
+  credential,
+  credDefId,
+  schemaId,
+  proof,
+  displayItems,
+  credName,
+  hasAltCredentials,
+  handleAltCredChange,
+  style = {},
+  onPress = undefined,
+  credentialErrors,
+  brandingOverlay
+}) => {
+  // add ability to reference credential by ID, allows us to get past react hook restrictions
+  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER]);
+  const {
+    ColorPallet
+  } = useTheme();
+  const [overlay, setOverlay] = useState({});
+  const {
+    resolveBundleForCredential
+  } = useOpenIDCredentials();
+  const [extraOverlayAttribute, setExtraOverlayAttribute] = useState();
+  useEffect(() => {
+    if (brandingOverlay) {
+      setOverlay(brandingOverlay);
+      return;
+    }
+    const resolveOverlay = async w3cCred => {
+      const brandingOverlay = await resolveBundleForCredential(w3cCred);
+      setOverlay(brandingOverlay);
+    };
+    if (credential instanceof W3cCredentialRecord || credential instanceof SdJwtVcRecord || credential instanceof MdocRecord) {
+      resolveOverlay(credential);
+      const credentialDisplay = getCredentialForDisplay(credential);
+      if (credentialDisplay.display.primary_overlay_attribute) {
+        const attributeValue = getAttributeField(credentialDisplay, credentialDisplay.display.primary_overlay_attribute);
+        setExtraOverlayAttribute(attributeValue);
+      }
+    }
+  }, [credential, brandingOverlay, resolveBundleForCredential]);
+  const getCredOverlayType = type => {
+    const isBranding10 = bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10;
+    if (proof) {
+      return /*#__PURE__*/React.createElement(CredentialCard11, {
+        displayItems: displayItems,
+        style: isBranding10 ? {
+          backgroundColor: ColorPallet.brand.secondaryBackground
+        } : undefined,
+        credName: credName,
+        credDefId: credDefId,
+        schemaId: schemaId,
+        credential: credential,
+        handleAltCredChange: handleAltCredChange,
+        hasAltCredentials: hasAltCredentials,
+        proof: true,
+        elevated: true,
+        credentialErrors: credentialErrors ?? [],
+        brandingOverlayType: bundleResolver.getBrandingOverlayType()
+      });
+    }
+    if (credential) {
+      if (type === BrandingOverlayType.Branding01) {
+        return /*#__PURE__*/React.createElement(CredentialCard10, {
+          credential: credential,
+          style: style,
+          onPress: onPress
+        });
+      } else {
+        return /*#__PURE__*/React.createElement(CredentialCard11, {
+          credential: credential,
+          style: style,
+          onPress: onPress,
+          credentialErrors: credentialErrors ?? [],
+          brandingOverlayType: bundleResolver.getBrandingOverlayType(),
+          elevated: bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding11
+        });
+      }
+    } else {
+      return /*#__PURE__*/React.createElement(CredentialCard11, {
+        credDefId: credDefId,
+        schemaId: schemaId,
+        credName: credName,
+        displayItems: displayItems,
+        style: style,
+        onPress: onPress,
+        credentialErrors: credentialErrors ?? [],
+        brandingOverlayType: bundleResolver.getBrandingOverlayType()
+      });
+    }
+  };
+  if (credential instanceof W3cCredentialRecord || credential instanceof SdJwtVcRecord || credential instanceof MdocRecord) {
+    return /*#__PURE__*/React.createElement(CredentialCard11, {
+      credential: undefined,
+      style: style,
+      onPress: onPress,
+      brandingOverlay: overlay,
+      credentialErrors: credentialErrors ?? [],
+      proof: proof,
+      elevated: proof,
+      displayItems: displayItems,
+      hideSlice: true,
+      hasAltCredentials: hasAltCredentials,
+      handleAltCredChange: handleAltCredChange,
+      extraOverlayParameter: extraOverlayAttribute,
+      brandingOverlayType: bundleResolver.getBrandingOverlayType()
+    });
+  } else {
+    return getCredOverlayType(bundleResolver.getBrandingOverlayType());
+  }
+};
+export default CredentialCard;
+//# sourceMappingURL=CredentialCard.js.map

package/lib/module/components/misc/CredentialCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MdocRecord","SdJwtVcRecord","W3cCredentialRecord","BrandingOverlayType","React","useEffect","useState","TOKENS","useServices","useTheme","CredentialCard10","CredentialCard11","useOpenIDCredentials","getCredentialForDisplay","getAttributeField","CredentialCard","credential","credDefId","schemaId","proof","displayItems","credName","hasAltCredentials","handleAltCredChange","style","onPress","undefined","credentialErrors","brandingOverlay","bundleResolver","UTIL_OCA_RESOLVER","ColorPallet","overlay","setOverlay","resolveBundleForCredential","extraOverlayAttribute","setExtraOverlayAttribute","resolveOverlay","w3cCred","credentialDisplay","display","primary_overlay_attribute","attributeValue","getCredOverlayType","type","isBranding10","getBrandingOverlayType","Branding10","createElement","backgroundColor","brand","secondaryBackground","elevated","brandingOverlayType","Branding01","Branding11","hideSlice","extraOverlayParameter"],"sourceRoot":"../../../../src","sources":["components/misc/CredentialCard.tsx"],"mappings":"AAAA,SAAmCA,UAAU,EAAEC,aAAa,EAAEC,mBAAmB,QAAQ,gBAAgB;AACzG,SAAoBC,mBAAmB,QAAsC,0BAA0B;AACvG,OAAOC,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAGlD,SAASC,MAAM,EAAEC,WAAW,QAAQ,qBAAqB;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAA4B,oBAAoB;AAGvE,SAASC,oBAAoB,QAAQ,6DAA6D;AAClG,SAASC,uBAAuB,QAAQ,8BAA8B;AACtE,SAASC,iBAAiB,QAAQ,kCAAkC;AAiBpE,MAAMC,cAA6C,GAAGA,CAAC;EACrDC,UAAU;EACVC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,iBAAiB;EACjBC,mBAAmB;EACnBC,KAAK,GAAG,CAAC,CAAC;EACVC,OAAO,GAAGC,SAAS;EACnBC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ;EACA,MAAM,CAACC,cAAc,CAAC,GAAGrB,WAAW,CAAC,CAACD,MAAM,CAACuB,iBAAiB,CAAC,CAAC;EAChE,MAAM;IAAEC;EAAY,CAAC,GAAGtB,QAAQ,CAAC,CAAC;EAClC,MAAM,CAACuB,OAAO,EAAEC,UAAU,CAAC,GAAG3B,QAAQ,CAAqC,CAAC,CAAC,CAAC;EAC9E,MAAM;IAAE4B;EAA2B,CAAC,GAAGtB,oBAAoB,CAAC,CAAC;EAC7D,MAAM,CAACuB,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG9B,QAAQ,CAAwB,CAAC;EAE3FD,SAAS,CAAC,MAAM;IACd,IAAIuB,eAAe,EAAE;MACnBK,UAAU,CAACL,eAAgE,CAAC;MAC5E;IACF;IAEA,MAAMS,cAAc,GAAG,MAAOC,OAAyD,IAAK;MAC1F,MAAMV,eAAe,GAAG,MAAMM,0BAA0B,CAACI,OAAO,CAAC;MACjEL,UAAU,CAACL,eAAe,CAAC;IAC7B,CAAC;IAED,IACEZ,UAAU,YAAYd,mBAAmB,IACzCc,UAAU,YAAYf,aAAa,IACnCe,UAAU,YAAYhB,UAAU,EAChC;MACAqC,cAAc,CAACrB,UAAU,CAAC;MAC1B,MAAMuB,iBAAiB,GAAG1B,uBAAuB,CAACG,UAAU,CAAC;MAC7D,IAAIuB,iBAAiB,CAACC,OAAO,CAACC,yBAAyB,EAAE;QACvD,MAAMC,cAAc,GAAG5B,iBAAiB,CAACyB,iBAAiB,EAAEA,iBAAiB,CAACC,OAAO,CAACC,yBAAyB,CAAC;QAChHL,wBAAwB,CAACM,cAAc,CAAC;MAC1C;IACF;EACF,CAAC,EAAE,CAAC1B,UAAU,EAAEY,eAAe,EAAEM,0BAA0B,CAAC,CAAC;EAE7D,MAAMS,kBAAkB,GAAIC,IAAyB,IAAK;IACxD,MAAMC,YAAY,GAAGhB,cAAc,CAACiB,sBAAsB,CAAC,CAAC,KAAK3C,mBAAmB,CAAC4C,UAAU;IAC/F,IAAI5B,KAAK,EAAE;MACT,oBACEf,KAAA,CAAA4C,aAAA,CAACrC,gBAAgB;QACfS,YAAY,EAAEA,YAAa;QAC3BI,KAAK,EAAEqB,YAAY,GAAG;UAAEI,eAAe,EAAElB,WAAW,CAACmB,KAAK,CAACC;QAAoB,CAAC,GAAGzB,SAAU;QAC7FL,QAAQ,EAAEA,QAAS;QACnBJ,SAAS,EAAEA,SAAU;QACrBC,QAAQ,EAAEA,QAAS;QACnBF,UAAU,EAAEA,UAAuC;QACnDO,mBAAmB,EAAEA,mBAAoB;QACzCD,iBAAiB,EAAEA,iBAAkB;QACrCH,KAAK;QACLiC,QAAQ;QACRzB,gBAAgB,EAAEA,gBAAgB,IAAI,EAAG;QACzC0B,mBAAmB,EAAExB,cAAc,CAACiB,sBAAsB,CAAC;MAAE,CAC9D,CAAC;IAEN;IAEA,IAAI9B,UAAU,EAAE;MACd,IAAI4B,IAAI,KAAKzC,mBAAmB,CAACmD,UAAU,EAAE;QAC3C,oBAAOlD,KAAA,CAAA4C,aAAA,CAACtC,gBAAgB;UAACM,UAAU,EAAEA,UAAuC;UAACQ,KAAK,EAAEA,KAAM;UAACC,OAAO,EAAEA;QAAQ,CAAE,CAAC;MACjH,CAAC,MAAM;QACL,oBACErB,KAAA,CAAA4C,aAAA,CAACrC,gBAAgB;UACfK,UAAU,EAAEA,UAAuC;UACnDQ,KAAK,EAAEA,KAAM;UACbC,OAAO,EAAEA,OAAQ;UACjBE,gBAAgB,EAAEA,gBAAgB,IAAI,EAAG;UACzC0B,mBAAmB,EAAExB,cAAc,CAACiB,sBAAsB,CAAC,CAAE;UAC7DM,QAAQ,EAAEvB,cAAc,CAACiB,sBAAsB,CAAC,CAAC,KAAK3C,mBAAmB,CAACoD;QAAW,CACtF,CAAC;MAEN;IACF,CAAC,MAAM;MACL,oBACEnD,KAAA,CAAA4C,aAAA,CAACrC,gBAAgB;QACfM,SAAS,EAAEA,SAAU;QACrBC,QAAQ,EAAEA,QAAS;QACnBG,QAAQ,EAAEA,QAAS;QACnBD,YAAY,EAAEA,YAAa;QAC3BI,KAAK,EAAEA,KAAM;QACbC,OAAO,EAAEA,OAAQ;QACjBE,gBAAgB,EAAEA,gBAAgB,IAAI,EAAG;QACzC0B,mBAAmB,EAAExB,cAAc,CAACiB,sBAAsB,CAAC;MAAE,CAC9D,CAAC;IAEN;EACF,CAAC;EAED,IACE9B,UAAU,YAAYd,mBAAmB,IACzCc,UAAU,YAAYf,aAAa,IACnCe,UAAU,YAAYhB,UAAU,EAChC;IACA,oBACEI,KAAA,CAAA4C,aAAA,CAACrC,gBAAgB;MACfK,UAAU,EAAEU,SAAU;MACtBF,KAAK,EAAEA,KAAM;MACbC,OAAO,EAAEA,OAAQ;MACjBG,eAAe,EAAEI,OAAQ;MACzBL,gBAAgB,EAAEA,gBAAgB,IAAI,EAAG;MACzCR,KAAK,EAAEA,KAAM;MACbiC,QAAQ,EAAEjC,KAAM;MAChBC,YAAY,EAAEA,YAAa;MAC3BoC,SAAS,EAAE,IAAK;MAChBlC,iBAAiB,EAAEA,iBAAkB;MACrCC,mBAAmB,EAAEA,mBAAoB;MACzCkC,qBAAqB,EAAEtB,qBAAsB;MAC7CkB,mBAAmB,EAAExB,cAAc,CAACiB,sBAAsB,CAAC;IAAE,CAC9D,CAAC;EAEN,CAAC,MAAM;IACL,OAAOH,kBAAkB,CAACd,cAAc,CAACiB,sBAAsB,CAAC,CAAC,CAAC;EACpE;AACF,CAAC;AAED,eAAe/B,cAAc","ignoreList":[]}

package/lib/module/components/misc/CredentialCard10.js

@@ -0,0 +1,262 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Image, ImageBackground, StyleSheet, Text, View, useWindowDimensions, TouchableOpacity } from 'react-native';
+import { TOKENS, useServices } from '../../container-api';
+import { useTheme } from '../../contexts/theme';
+import { credentialTextColor, getCredentialIdentifiers, isValidAnonCredsCredential, toImageSource } from '../../utils/credential';
+import { formatTime, useCredentialConnectionLabel } from '../../utils/helpers';
+import { buildFieldsFromAnonCredsCredential } from '../../utils/oca';
+import { testIdWithKey } from '../../utils/testable';
+import CardWatermark from './CardWatermark';
+const paddingVertical = 10;
+const paddingHorizontal = 10;
+const transparent = 'rgba(0,0,0,0)';
+const borderRadius = 15;
+const borderPadding = 8;
+
+/**
+ * A card is defined as a 4x8 (height/rows x width/columns) grid.
+ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
+ | 2 |   |   |   |   |   |   |   |
+ | 3 |   |   |   |   |   |   |   |
+ | 4 |   |   |   |   |   |   |   |
+
+The card width is the full screen width, and the card height is half of the screen width
+
+Variation 1:
+  Header: Small Logo (1x1) + Issuer Name (1x3) + Credential Name (1x4)
+  Body: Reserved for Future Use (2x4)
+  Footer: Issued or Expired Date (1x4)
+
+  | L | Issuer    | Cred Name     |
+  |             Body              |
+  |             Body              |
+  | Issued/Expired Date           |
+
+ Variation 2:
+  Header: Large Logo (1x4) + Credential Name (1x4)
+  Body: Reserved for Future Use (2x4)
+  Footer: Issued or Expired Date (1x4)
+
+  | Logo          | Cred Name     |
+  |             Body              |
+  |             Body              |
+  | Issued/Expired Date           |
+
+
+Note: The small logo MUST be provided as 1x1 (height/width) ratio, while the large logo MUST be provided as 1x4 (height/width) ratio
+ */
+
+const CredentialCard10 = ({
+  credential,
+  style = {},
+  onPress = undefined
+}) => {
+  var _overlay$brandingOver, _overlay$brandingOver2, _overlay$brandingOver3, _overlay$brandingOver4, _overlay$brandingOver5, _overlay$metaOverlay3, _overlay$metaOverlay4, _overlay$metaOverlay5, _overlay$metaOverlay6, _overlay$brandingOver20, _overlay$brandingOver21, _overlay$metaOverlay7, _overlay$metaOverlay8, _overlay$metaOverlay9, _overlay$metaOverlay10;
+  const {
+    width
+  } = useWindowDimensions();
+  const cardHeight = width / 2; // a card height is half of the screen width
+  const cardHeaderHeight = cardHeight / 4; // a card has a total of 4 rows, and the header occupy 1 row
+  const {
+    t,
+    i18n
+  } = useTranslation();
+  const {
+    ColorPallet,
+    TextTheme
+  } = useTheme();
+  const [overlay, setOverlay] = useState({});
+  const [isRevoked, setIsRevoked] = useState(false);
+  const credentialConnectionLabel = useCredentialConnectionLabel(credential);
+  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER]);
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: overlay !== null && overlay !== void 0 && (_overlay$brandingOver = overlay.brandingOverlay) !== null && _overlay$brandingOver !== void 0 && _overlay$brandingOver.imageSource ? transparent : overlay === null || overlay === void 0 || (_overlay$brandingOver2 = overlay.brandingOverlay) === null || _overlay$brandingOver2 === void 0 ? void 0 : _overlay$brandingOver2.backgroundColor,
+      height: cardHeight,
+      borderRadius: borderRadius
+    },
+    outerHeaderContainer: {
+      flexDirection: 'column',
+      backgroundColor: (overlay === null || overlay === void 0 || (_overlay$brandingOver3 = overlay.brandingOverlay) === null || _overlay$brandingOver3 === void 0 || (_overlay$brandingOver3 = _overlay$brandingOver3.header) === null || _overlay$brandingOver3 === void 0 ? void 0 : _overlay$brandingOver3.backgroundColor) ?? transparent,
+      height: cardHeaderHeight + borderPadding,
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    },
+    innerHeaderContainer: {
+      flexDirection: 'row',
+      height: cardHeaderHeight,
+      marginLeft: borderPadding,
+      marginRight: borderPadding,
+      marginTop: borderPadding,
+      marginBottom: borderPadding,
+      backgroundColor: (overlay === null || overlay === void 0 || (_overlay$brandingOver4 = overlay.brandingOverlay) === null || _overlay$brandingOver4 === void 0 || (_overlay$brandingOver4 = _overlay$brandingOver4.header) === null || _overlay$brandingOver4 === void 0 ? void 0 : _overlay$brandingOver4.backgroundColor) ?? transparent
+    },
+    bodyContainer: {
+      flexGrow: 1
+    },
+    footerContainer: {
+      flexDirection: 'row',
+      backgroundColor: (overlay === null || overlay === void 0 || (_overlay$brandingOver5 = overlay.brandingOverlay) === null || _overlay$brandingOver5 === void 0 || (_overlay$brandingOver5 = _overlay$brandingOver5.footer) === null || _overlay$brandingOver5 === void 0 ? void 0 : _overlay$brandingOver5.backgroundColor) ?? transparent,
+      paddingHorizontal,
+      paddingVertical,
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius
+    },
+    revokedFooter: {
+      backgroundColor: ColorPallet.notification.error,
+      flexGrow: 1,
+      marginHorizontal: -1 * paddingHorizontal,
+      marginVertical: -1 * paddingVertical,
+      paddingHorizontal: paddingHorizontal,
+      paddingVertical: paddingVertical,
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius
+    },
+    flexGrow: {
+      flexGrow: 1
+    },
+    watermark: {
+      opacity: 0.16,
+      fontSize: 22,
+      transform: [{
+        rotate: '-30deg'
+      }]
+    }
+  });
+  useEffect(() => {
+    if (!(credential && isValidAnonCredsCredential(credential))) {
+      return;
+    }
+    const params = {
+      identifiers: getCredentialIdentifiers(credential),
+      attributes: buildFieldsFromAnonCredsCredential(credential),
+      meta: {
+        credConnectionId: credential === null || credential === void 0 ? void 0 : credential.connectionId,
+        alias: credentialConnectionLabel
+      },
+      language: i18n.language
+    };
+    bundleResolver.resolveAllBundles(params).then(bundle => {
+      setOverlay(o => ({
+        ...o,
+        ...bundle,
+        brandingOverlay: bundle.brandingOverlay
+      }));
+    });
+  }, [credential, credentialConnectionLabel, i18n.language, bundleResolver]);
+  useEffect(() => {
+    setIsRevoked(credential.revocationNotification !== undefined);
+  }, [credential.revocationNotification]);
+  const CredentialCardHeader = () => {
+    var _overlay$brandingOver6, _overlay$brandingOver7, _overlay$brandingOver8, _overlay$brandingOver9, _overlay$brandingOver10, _overlay$brandingOver11, _overlay$brandingOver12, _overlay$brandingOver13, _overlay$metaOverlay, _overlay$brandingOver14, _overlay$brandingOver15, _overlay$brandingOver16, _overlay$metaOverlay2;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.outerHeaderContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      testID: testIdWithKey('CredentialCardHeader'),
+      style: styles.innerHeaderContainer
+    }, (overlay === null || overlay === void 0 || (_overlay$brandingOver6 = overlay.brandingOverlay) === null || _overlay$brandingOver6 === void 0 || (_overlay$brandingOver6 = _overlay$brandingOver6.header) === null || _overlay$brandingOver6 === void 0 ? void 0 : _overlay$brandingOver6.imageSource) && /*#__PURE__*/React.createElement(Image, {
+      source: toImageSource(overlay === null || overlay === void 0 || (_overlay$brandingOver7 = overlay.brandingOverlay) === null || _overlay$brandingOver7 === void 0 || (_overlay$brandingOver7 = _overlay$brandingOver7.header) === null || _overlay$brandingOver7 === void 0 ? void 0 : _overlay$brandingOver7.imageSource),
+      style: {
+        flex: !(overlay !== null && overlay !== void 0 && (_overlay$brandingOver8 = overlay.brandingOverlay) !== null && _overlay$brandingOver8 !== void 0 && (_overlay$brandingOver8 = _overlay$brandingOver8.header) !== null && _overlay$brandingOver8 !== void 0 && _overlay$brandingOver8.hideIssuer) ? 1 : 4,
+        resizeMode: 'contain',
+        maxHeight: styles.outerHeaderContainer.height - borderPadding
+      }
+    }), overlay !== null && overlay !== void 0 && (_overlay$brandingOver9 = overlay.brandingOverlay) !== null && _overlay$brandingOver9 !== void 0 && (_overlay$brandingOver9 = _overlay$brandingOver9.header) !== null && _overlay$brandingOver9 !== void 0 && _overlay$brandingOver9.hideIssuer ? null : /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      style: [TextTheme.label, {
+        color: (overlay === null || overlay === void 0 || (_overlay$brandingOver10 = overlay.brandingOverlay) === null || _overlay$brandingOver10 === void 0 || (_overlay$brandingOver10 = _overlay$brandingOver10.header) === null || _overlay$brandingOver10 === void 0 ? void 0 : _overlay$brandingOver10.color) ?? credentialTextColor(ColorPallet, (overlay === null || overlay === void 0 || (_overlay$brandingOver11 = overlay.brandingOverlay) === null || _overlay$brandingOver11 === void 0 || (_overlay$brandingOver11 = _overlay$brandingOver11.header) === null || _overlay$brandingOver11 === void 0 ? void 0 : _overlay$brandingOver11.backgroundColor) || (overlay === null || overlay === void 0 || (_overlay$brandingOver12 = overlay.brandingOverlay) === null || _overlay$brandingOver12 === void 0 ? void 0 : _overlay$brandingOver12.backgroundColor)),
+        paddingHorizontal: 0.5 * paddingHorizontal,
+        flex: !(overlay !== null && overlay !== void 0 && (_overlay$brandingOver13 = overlay.brandingOverlay) !== null && _overlay$brandingOver13 !== void 0 && (_overlay$brandingOver13 = _overlay$brandingOver13.header) !== null && _overlay$brandingOver13 !== void 0 && _overlay$brandingOver13.imageSource) ? 4 : 3,
+        textAlignVertical: 'center'
+      }],
+      testID: testIdWithKey('CredentialIssuer'),
+      maxFontSizeMultiplier: 1
+    }, overlay === null || overlay === void 0 || (_overlay$metaOverlay = overlay.metaOverlay) === null || _overlay$metaOverlay === void 0 ? void 0 : _overlay$metaOverlay.issuer), /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      style: [TextTheme.label, {
+        color: (overlay === null || overlay === void 0 || (_overlay$brandingOver14 = overlay.brandingOverlay) === null || _overlay$brandingOver14 === void 0 || (_overlay$brandingOver14 = _overlay$brandingOver14.header) === null || _overlay$brandingOver14 === void 0 ? void 0 : _overlay$brandingOver14.color) ?? credentialTextColor(ColorPallet, (overlay === null || overlay === void 0 || (_overlay$brandingOver15 = overlay.brandingOverlay) === null || _overlay$brandingOver15 === void 0 || (_overlay$brandingOver15 = _overlay$brandingOver15.header) === null || _overlay$brandingOver15 === void 0 ? void 0 : _overlay$brandingOver15.backgroundColor) || (overlay === null || overlay === void 0 || (_overlay$brandingOver16 = overlay.brandingOverlay) === null || _overlay$brandingOver16 === void 0 ? void 0 : _overlay$brandingOver16.backgroundColor)),
+        textAlign: 'right',
+        paddingHorizontal: 0.5 * paddingHorizontal,
+        flex: 4,
+        textAlignVertical: 'center'
+      }],
+      testID: testIdWithKey('CredentialName'),
+      maxFontSizeMultiplier: 1
+    }, overlay === null || overlay === void 0 || (_overlay$metaOverlay2 = overlay.metaOverlay) === null || _overlay$metaOverlay2 === void 0 ? void 0 : _overlay$metaOverlay2.name)));
+  };
+  const CredentialCardBody = () => {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.bodyContainer,
+      testID: testIdWithKey('CredentialCardBody')
+    });
+  };
+  const CredentialCardFooter = ({
+    revoked = false
+  }) => {
+    var _overlay$brandingOver17, _overlay$brandingOver18, _overlay$brandingOver19;
+    return /*#__PURE__*/React.createElement(View, {
+      testID: testIdWithKey('CredentialCardFooter'),
+      style: styles.footerContainer
+    }, revoked ? /*#__PURE__*/React.createElement(View, {
+      style: styles.revokedFooter
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [TextTheme.label, {
+        color: ColorPallet.semantic.error
+      }],
+      testID: testIdWithKey('CredentialRevoked')
+    }, t('CredentialDetails.Revoked'))) : /*#__PURE__*/React.createElement(Text, {
+      style: [TextTheme.caption, {
+        color: (overlay === null || overlay === void 0 || (_overlay$brandingOver17 = overlay.brandingOverlay) === null || _overlay$brandingOver17 === void 0 || (_overlay$brandingOver17 = _overlay$brandingOver17.footer) === null || _overlay$brandingOver17 === void 0 ? void 0 : _overlay$brandingOver17.color) ?? credentialTextColor(ColorPallet, (overlay === null || overlay === void 0 || (_overlay$brandingOver18 = overlay.brandingOverlay) === null || _overlay$brandingOver18 === void 0 || (_overlay$brandingOver18 = _overlay$brandingOver18.footer) === null || _overlay$brandingOver18 === void 0 ? void 0 : _overlay$brandingOver18.backgroundColor) || (overlay === null || overlay === void 0 || (_overlay$brandingOver19 = overlay.brandingOverlay) === null || _overlay$brandingOver19 === void 0 ? void 0 : _overlay$brandingOver19.backgroundColor))
+      }],
+      testID: testIdWithKey('CredentialIssued'),
+      maxFontSizeMultiplier: 1
+    }, t('CredentialDetails.Issued'), ": ", formatTime(credential.createdAt, {
+      shortMonth: true
+    })));
+  };
+  const CredentialCard = ({
+    revoked = false
+  }) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CredentialCardHeader, null), /*#__PURE__*/React.createElement(CredentialCardBody, null), /*#__PURE__*/React.createElement(CredentialCardFooter, {
+      revoked: revoked
+    }));
+  };
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    accessible: true,
+    accessibilityLabel: `${(_overlay$metaOverlay3 = overlay.metaOverlay) !== null && _overlay$metaOverlay3 !== void 0 && _overlay$metaOverlay3.issuer ? `${t('Credentials.IssuedBy')} ${(_overlay$metaOverlay4 = overlay.metaOverlay) === null || _overlay$metaOverlay4 === void 0 ? void 0 : _overlay$metaOverlay4.issuer}` : ''}, ${((_overlay$metaOverlay5 = overlay.metaOverlay) === null || _overlay$metaOverlay5 === void 0 ? void 0 : _overlay$metaOverlay5.watermark) ?? ''} ${((_overlay$metaOverlay6 = overlay.metaOverlay) === null || _overlay$metaOverlay6 === void 0 ? void 0 : _overlay$metaOverlay6.name) ?? ''} ${t('Credentials.Credential')}.`,
+    disabled: typeof onPress === 'undefined' ? true : false,
+    onPress: onPress,
+    style: [styles.container, style],
+    testID: testIdWithKey('ShowCredentialDetails')
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.flexGrow, {
+      overflow: 'hidden'
+    }],
+    testID: testIdWithKey('CredentialCard')
+  }, overlay !== null && overlay !== void 0 && (_overlay$brandingOver20 = overlay.brandingOverlay) !== null && _overlay$brandingOver20 !== void 0 && _overlay$brandingOver20.imageSource ? /*#__PURE__*/React.createElement(ImageBackground, {
+    source: toImageSource(overlay === null || overlay === void 0 || (_overlay$brandingOver21 = overlay.brandingOverlay) === null || _overlay$brandingOver21 === void 0 ? void 0 : _overlay$brandingOver21.imageSource),
+    style: styles.flexGrow,
+    imageStyle: {
+      borderRadius
+    }
+  }, ((_overlay$metaOverlay7 = overlay.metaOverlay) === null || _overlay$metaOverlay7 === void 0 ? void 0 : _overlay$metaOverlay7.watermark) && /*#__PURE__*/React.createElement(CardWatermark, {
+    width: width,
+    height: cardHeight,
+    style: styles.watermark,
+    watermark: (_overlay$metaOverlay8 = overlay.metaOverlay) === null || _overlay$metaOverlay8 === void 0 ? void 0 : _overlay$metaOverlay8.watermark
+  }), /*#__PURE__*/React.createElement(CredentialCard, {
+    revoked: isRevoked
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, ((_overlay$metaOverlay9 = overlay.metaOverlay) === null || _overlay$metaOverlay9 === void 0 ? void 0 : _overlay$metaOverlay9.watermark) && /*#__PURE__*/React.createElement(CardWatermark, {
+    width: width,
+    height: cardHeight,
+    style: styles.watermark,
+    watermark: (_overlay$metaOverlay10 = overlay.metaOverlay) === null || _overlay$metaOverlay10 === void 0 ? void 0 : _overlay$metaOverlay10.watermark
+  }), /*#__PURE__*/React.createElement(CredentialCard, {
+    revoked: isRevoked
+  }))));
+};
+export default CredentialCard10;
+//# sourceMappingURL=CredentialCard10.js.map