@bifold/core 1.0.0

package/lib/commonjs/components/tour/SpotCutout.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotCutout = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = require("react-native-svg");
+var _tourContext = require("../../contexts/tour/tour-context");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const AnimatedRectangle = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Rect);
+const SpotCutout = () => {
+  const {
+    spot
+  } = (0, _react.useContext)(_tourContext.TourContext);
+  const spotPadding = 20;
+  const start = (0, _react.useRef)(new _reactNative.Animated.ValueXY({
+    x: 0,
+    y: 0
+  }));
+  const width = (0, _react.useRef)(new _reactNative.Animated.Value(0));
+  const height = (0, _react.useRef)(new _reactNative.Animated.Value(0));
+  (0, _react.useEffect)(() => {
+    const {
+      height: spotHeight,
+      width: spotWidth,
+      x,
+      y
+    } = spot;
+    const w = spotWidth + spotPadding;
+    const h = spotHeight + spotPadding;
+    const paddedX = x - spotPadding / 2;
+    const paddedY = y - spotPadding / 2;
+    const transition = () => {
+      return _reactNative.Animated.parallel([_reactNative.Animated.timing(start.current, {
+        duration: 500,
+        easing: _reactNative.Easing.out(_reactNative.Easing.exp),
+        toValue: {
+          x: paddedX,
+          y: paddedY
+        },
+        useNativeDriver: false
+      }), _reactNative.Animated.timing(width.current, {
+        duration: 500,
+        easing: _reactNative.Easing.out(_reactNative.Easing.exp),
+        toValue: w,
+        useNativeDriver: false
+      }), _reactNative.Animated.timing(height.current, {
+        duration: 500,
+        easing: _reactNative.Easing.out(_reactNative.Easing.exp),
+        toValue: h,
+        useNativeDriver: false
+      })]);
+    };
+    transition().start();
+  }, [spot]);
+  if ([spot.height, spot.width].every(value => value <= 0)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(AnimatedRectangle, {
+    width: width.current,
+    height: height.current,
+    x: start.current.x,
+    y: start.current.y,
+    opacity: 1,
+    rx: 10,
+    fill: "black"
+  });
+};
+exports.SpotCutout = SpotCutout;
+//# sourceMappingURL=SpotCutout.js.map

package/lib/commonjs/components/tour/SpotCutout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSvg","_tourContext","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AnimatedRectangle","Animated","createAnimatedComponent","Rect","SpotCutout","spot","useContext","TourContext","spotPadding","start","useRef","ValueXY","x","y","width","Value","height","useEffect","spotHeight","spotWidth","w","h","paddedX","paddedY","transition","parallel","timing","current","duration","easing","Easing","out","exp","toValue","useNativeDriver","every","value","createElement","opacity","rx","fill","exports"],"sourceRoot":"../../../../src","sources":["components/tour/SpotCutout.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/tour/TourBox.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TourBox = TourBox;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactNative = require("react-native");
+var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
+var _constants = require("../../constants");
+var _theme = require("../../contexts/theme");
+var _testable = require("../../utils/testable");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var PaginationDotTypes = /*#__PURE__*/function (PaginationDotTypes) {
+  PaginationDotTypes[PaginationDotTypes["Filled"] = 0] = "Filled";
+  PaginationDotTypes[PaginationDotTypes["Unfilled"] = 1] = "Unfilled";
+  return PaginationDotTypes;
+}(PaginationDotTypes || {});
+/**
+ * A built-in TourBox component which can be used as a tooltip container for
+ * each step. While it's somewhat customizable, it's not required and can be
+ * replaced by your own component.
+ *
+ * @param props the component props
+ * @returns A TourBox React element
+ */
+function TourBox(props) {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const {
+    leftText = t('Tour.Back'),
+    rightText = t('Tour.Next'),
+    title,
+    hideLeft,
+    hideRight,
+    onLeft,
+    onRight,
+    children,
+    stop,
+    stepOn,
+    stepsOutOf
+  } = props;
+  const {
+    TextTheme,
+    ColorPallet,
+    OnboardingTheme
+  } = (0, _theme.useTheme)();
+  const iconSize = 30;
+  const dismissIconName = 'clear';
+  const iconColor = ColorPallet.notification.infoIcon;
+  const [paginationDots, setPaginationDots] = (0, _react.useState)([]);
+  const [xPos, setXPos] = (0, _react.useState)(0);
+  const swipeThreshold = 75;
+  const styles = _reactNative.StyleSheet.create({
+    container: {
+      backgroundColor: ColorPallet.notification.info,
+      borderColor: ColorPallet.notification.infoBorder,
+      borderRadius: 5,
+      borderWidth: 1,
+      padding: 20,
+      flex: 1,
+      margin: 'auto'
+    },
+    headerContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    },
+    headerTextContainer: {
+      flexGrow: 1
+    },
+    headerText: {
+      ...TextTheme.headingThree,
+      alignSelf: 'flex-start',
+      color: ColorPallet.notification.infoText
+    },
+    dismissIcon: {
+      alignSelf: 'flex-end'
+    },
+    body: {
+      flex: 1,
+      marginVertical: 16
+    },
+    footerContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-around'
+    },
+    navText: {
+      ...TextTheme.bold,
+      color: ColorPallet.brand.primary
+    },
+    pagerContainer: {
+      flexDirection: 'row',
+      alignSelf: 'center'
+    },
+    pagerDot: {
+      ...OnboardingTheme.pagerDot,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      width: 10,
+      height: 10,
+      borderRadius: 5,
+      marginHorizontal: 5
+    },
+    pagerDotActive: {
+      backgroundColor: OnboardingTheme.pagerDotActive.color
+    },
+    pagerDotInactive: {
+      backgroundColor: 'transparent'
+    }
+  });
+  const accessibilityLabel = (0, _react.useMemo)(() => {
+    return stepOn && stepsOutOf ? t('Tour.AccessibilitySteps', {
+      stepOn,
+      stepsOutOf,
+      title
+    }) : title;
+  }, [stepOn, stepsOutOf, title, t]);
+  const handleLeft = (0, _react.useCallback)(() => {
+    onLeft === null || onLeft === void 0 || onLeft();
+  }, [onLeft]);
+  const handleRight = (0, _react.useCallback)(() => {
+    onRight === null || onRight === void 0 || onRight();
+  }, [onRight]);
+  (0, _react.useEffect)(() => {
+    const arr = [];
+    if (typeof stepOn === 'number' && typeof stepsOutOf === 'number') {
+      for (let i = 1; i <= stepsOutOf; i++) {
+        if (i === stepOn) {
+          arr.push(PaginationDotTypes.Filled);
+        } else {
+          arr.push(PaginationDotTypes.Unfilled);
+        }
+      }
+    }
+    setPaginationDots(arr);
+  }, [stepOn, stepsOutOf]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container,
+    onTouchStart: e => setXPos(e.nativeEvent.pageX),
+    onTouchEnd: e => {
+      // if swipe right
+      if (xPos - e.nativeEvent.pageX > swipeThreshold) {
+        handleRight();
+
+        // if swipe left
+      } else if (e.nativeEvent.pageX - xPos > swipeThreshold) {
+        handleLeft();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.headerContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.headerTextContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    allowFontScaling: false,
+    style: styles.headerText,
+    testID: (0, _testable.testIdWithKey)('HeaderText'),
+    accessibilityRole: "header",
+    accessibilityLabel: accessibilityLabel
+  }, title)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.dismissIcon
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: stop,
+    testID: (0, _testable.testIdWithKey)('Close'),
+    accessibilityLabel: t('Global.Close'),
+    accessibilityRole: 'button',
+    hitSlop: _constants.hitSlop
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
+    name: dismissIconName,
+    size: iconSize,
+    color: iconColor
+  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.body
+  }, children), (!hideLeft || !hideRight) && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.footerContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, null, !hideLeft && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    accessibilityLabel: leftText,
+    accessibilityRole: 'button',
+    testID: (0, _testable.testIdWithKey)('Back'),
+    onPress: handleLeft,
+    hitSlop: _constants.hitSlop
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    allowFontScaling: false,
+    style: styles.navText
+  }, leftText))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.pagerContainer
+  }, paginationDots.map((dot, index) => dot === PaginationDotTypes.Filled ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    key: index,
+    style: [styles.pagerDot, styles.pagerDotActive]
+  }) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    key: index,
+    style: [styles.pagerDot, styles.pagerDotInactive]
+  }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, !hideRight && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    accessibilityLabel: rightText,
+    accessibilityRole: 'button',
+    testID: (0, _testable.testIdWithKey)('Next'),
+    onPress: handleRight,
+    hitSlop: _constants.hitSlop
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    allowFontScaling: false,
+    style: styles.navText
+  }, rightText)))));
+}
+//# sourceMappingURL=TourBox.js.map

package/lib/commonjs/components/tour/TourBox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactI18next","_reactNative","_MaterialIcons","_interopRequireDefault","_constants","_theme","_testable","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","PaginationDotTypes","TourBox","props","useTranslation","leftText","rightText","title","hideLeft","hideRight","onLeft","onRight","children","stop","stepOn","stepsOutOf","TextTheme","ColorPallet","OnboardingTheme","useTheme","iconSize","dismissIconName","iconColor","notification","infoIcon","paginationDots","setPaginationDots","useState","xPos","setXPos","swipeThreshold","styles","StyleSheet","create","container","backgroundColor","info","borderColor","infoBorder","borderRadius","borderWidth","padding","flex","margin","headerContainer","flexDirection","justifyContent","headerTextContainer","flexGrow","headerText","headingThree","alignSelf","color","infoText","dismissIcon","body","marginVertical","footerContainer","navText","bold","brand","primary","pagerContainer","pagerDot","borderStyle","width","height","marginHorizontal","pagerDotActive","pagerDotInactive","accessibilityLabel","useMemo","handleLeft","useCallback","handleRight","useEffect","arr","push","Filled","Unfilled","createElement","View","style","onTouchStart","nativeEvent","pageX","onTouchEnd","Text","allowFontScaling","testID","testIdWithKey","accessibilityRole","TouchableOpacity","onPress","hitSlop","name","size","map","dot","index","key"],"sourceRoot":"../../../../src","sources":["components/tour/TourBox.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/tour/TourOverlay.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TourOverlay = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = require("react-native-svg");
+var _constants = require("../../constants");
+var _tourContext = require("../../contexts/tour/tour-context");
+var _testable = require("../../utils/testable");
+var _SpotCutout = require("./SpotCutout");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TourOverlay = props => {
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const {
+    color,
+    currentTour,
+    currentStep,
+    onBackdropPress,
+    backdropOpacity,
+    changeSpot,
+    spot,
+    tourStep
+  } = props;
+  const [viewBox, setViewBox] = (0, _react.useState)(`0 0 ${windowWidth} ${windowHeight}`);
+  const {
+    next,
+    previous,
+    start,
+    stop
+  } = (0, _react.useContext)(_tourContext.TourContext);
+  const [tooltipStyle, setTooltipStyle] = (0, _react.useState)({});
+  const tooltipRef = (0, _react.useRef)(null);
+  const handleBackdropPress = (0, _react.useCallback)(() => {
+    const handler = tourStep.onBackdropPress ?? onBackdropPress;
+    if (handler !== undefined && currentStep !== undefined) {
+      switch (handler) {
+        case 'continue':
+          return next();
+        case 'stop':
+          return stop();
+        default:
+          return handler({
+            currentTour,
+            currentStep,
+            changeSpot,
+            next,
+            previous,
+            start,
+            stop
+          });
+      }
+    }
+  }, [tourStep, onBackdropPress, currentTour, currentStep, changeSpot, next, previous, start, stop]);
+  (0, _react.useEffect)(() => {
+    const gapBetweenSpotAndTooltip = 50;
+    // if origin spot (ie. no spotlight)
+    if (spot.x === 0 && spot.y === 0) {
+      // a relative margin so that the tooltip doesn't start at the very top of the screen
+      const oneSixthOfScreenHeight = windowHeight / 6;
+      setTooltipStyle({
+        left: _constants.tourMargin,
+        right: _constants.tourMargin,
+        top: oneSixthOfScreenHeight
+      });
+      // if spot is in the lower half of the screen
+    } else if (spot.y >= windowHeight / 2) {
+      const bottom = windowHeight - spot.y + gapBetweenSpotAndTooltip;
+      setTooltipStyle({
+        left: _constants.tourMargin,
+        right: _constants.tourMargin,
+        bottom
+      });
+      // if spot is in the upper half of the screen
+    } else {
+      const top = spot.y + gapBetweenSpotAndTooltip + spot.height;
+      setTooltipStyle({
+        left: _constants.tourMargin,
+        right: _constants.tourMargin,
+        top
+      });
+    }
+  }, [windowWidth, windowHeight, spot.width, spot.height, spot.x, spot.y]);
+  (0, _react.useEffect)(() => {
+    // + 1 pixel to account for an svg size rounding issue that would cause
+    // a tiny gap around the overlay
+    setViewBox(`0 0 ${windowWidth + 1} ${windowHeight + 1}`);
+  }, [windowWidth, windowHeight]);
+  return currentStep !== undefined ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    accessibilityViewIsModal: true,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: windowHeight + 1,
+      width: windowWidth + 1
+    },
+    testID: (0, _testable.testIdWithKey)('SpotlightOverlay')
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Svg, {
+    testID: (0, _testable.testIdWithKey)('SpotOverlay'),
+    height: windowHeight + 1,
+    width: windowWidth + 1,
+    viewBox: viewBox,
+    onPress: handleBackdropPress,
+    shouldRasterizeIOS: true,
+    renderToHardwareTextureAndroid: true
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Defs, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Mask, {
+    id: "mask",
+    x: 0,
+    y: 0,
+    height: windowHeight + 1,
+    width: windowWidth + 1
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Rect, {
+    height: windowHeight + 1,
+    width: windowWidth + 1,
+    fill: "#fff"
+  }), /*#__PURE__*/_react.default.createElement(_SpotCutout.SpotCutout, null))), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Rect, {
+    height: windowHeight + 1,
+    width: windowWidth + 1,
+    fill: color,
+    mask: "url(#mask)",
+    opacity: backdropOpacity
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    ref: tooltipRef,
+    testID: (0, _testable.testIdWithKey)('SpotTooltip'),
+    style: {
+      ...tooltipStyle,
+      opacity: 1,
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/_react.default.createElement(tourStep.Render, {
+    currentTour: currentTour,
+    currentStep: currentStep,
+    changeSpot: changeSpot,
+    next: next,
+    previous: previous,
+    stop: stop
+  }))) : null;
+};
+exports.TourOverlay = TourOverlay;
+//# sourceMappingURL=TourOverlay.js.map

package/lib/commonjs/components/tour/TourOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSvg","_constants","_tourContext","_testable","_SpotCutout","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TourOverlay","props","width","windowWidth","height","windowHeight","useWindowDimensions","color","currentTour","currentStep","onBackdropPress","backdropOpacity","changeSpot","spot","tourStep","viewBox","setViewBox","useState","next","previous","start","stop","useContext","TourContext","tooltipStyle","setTooltipStyle","tooltipRef","useRef","handleBackdropPress","useCallback","handler","undefined","useEffect","gapBetweenSpotAndTooltip","x","y","oneSixthOfScreenHeight","left","tourMargin","right","top","bottom","createElement","View","accessibilityViewIsModal","style","position","testID","testIdWithKey","Svg","onPress","shouldRasterizeIOS","renderToHardwareTextureAndroid","Defs","Mask","id","Rect","fill","SpotCutout","mask","opacity","ref","Render","exports"],"sourceRoot":"../../../../src","sources":["components/tour/TourOverlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/views/CredentialCardLogo.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _legacy = require("@bifold/oca/build/legacy");
+var _theme = require("../../contexts/theme");
+var _credential = require("../../utils/credential");
+var _react = require("react");
+var _ThemedText = require("../texts/ThemedText");
+const CredentialCardLogo = ({
+  overlay,
+  brandingOverlayType = _legacy.BrandingOverlayType.Branding10
+}) => {
+  var _overlay$brandingOver, _overlay$brandingOver2, _overlay$brandingOver3, _overlay$brandingOver4;
+  const {
+    CredentialCardShadowTheme
+  } = (0, _theme.useTheme)();
+  const {
+    fontScale
+  } = (0, _reactNative.useWindowDimensions)();
+  const logoHeight = brandingOverlayType === _legacy.BrandingOverlayType.Branding10 ? 80 : 48;
+  const paddingHorizontal = 24;
+  const isBranding11 = brandingOverlayType === _legacy.BrandingOverlayType.Branding11;
+  const textColor = (_overlay$brandingOver = overlay.brandingOverlay) !== null && _overlay$brandingOver !== void 0 && _overlay$brandingOver.secondaryBackgroundColor && overlay.brandingOverlay.secondaryBackgroundColor !== '' ? overlay.brandingOverlay.secondaryBackgroundColor : (_overlay$brandingOver2 = overlay.brandingOverlay) === null || _overlay$brandingOver2 === void 0 ? void 0 : _overlay$brandingOver2.primaryBackgroundColor;
+  const logoText = (0, _react.useMemo)(() => {
+    var _overlay$metaOverlay2, _overlay$metaOverlay3;
+    if (brandingOverlayType === _legacy.BrandingOverlayType.Branding11) {
+      var _overlay$metaOverlay;
+      return (((_overlay$metaOverlay = overlay.metaOverlay) === null || _overlay$metaOverlay === void 0 ? void 0 : _overlay$metaOverlay.issuer) ?? 'I').charAt(0).toUpperCase();
+    }
+    return (((_overlay$metaOverlay2 = overlay.metaOverlay) === null || _overlay$metaOverlay2 === void 0 ? void 0 : _overlay$metaOverlay2.name) ?? ((_overlay$metaOverlay3 = overlay.metaOverlay) === null || _overlay$metaOverlay3 === void 0 ? void 0 : _overlay$metaOverlay3.issuer) ?? 'C').charAt(0).toUpperCase();
+  }, [brandingOverlayType, overlay]);
+  const styles = _reactNative.StyleSheet.create({
+    logoContainer: {
+      width: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
+      height: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
+      backgroundColor: '#ffffff',
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      ...(brandingOverlayType === _legacy.BrandingOverlayType.Branding10 && {
+        top: -0.5 * logoHeight,
+        left: paddingHorizontal,
+        marginBottom: -1 * logoHeight,
+        ...CredentialCardShadowTheme
+      })
+    }
+  });
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.logoContainer
+  }, (_overlay$brandingOver3 = overlay.brandingOverlay) !== null && _overlay$brandingOver3 !== void 0 && _overlay$brandingOver3.logo ? /*#__PURE__*/React.createElement(_reactNative.Image, {
+    source: (0, _credential.toImageSource)((_overlay$brandingOver4 = overlay.brandingOverlay) === null || _overlay$brandingOver4 === void 0 ? void 0 : _overlay$brandingOver4.logo),
+    style: {
+      resizeMode: 'cover',
+      width: logoHeight,
+      height: logoHeight,
+      borderRadius: 8
+    }
+  }) : /*#__PURE__*/React.createElement(_ThemedText.ThemedText, {
+    variant: "title",
+    style: {
+      fontSize: 0.5 * logoHeight,
+      color: isBranding11 ? textColor : '#000'
+    },
+    accessible: false
+  }, logoText));
+};
+var _default = exports.default = CredentialCardLogo;
+//# sourceMappingURL=CredentialCardLogo.js.map

package/lib/commonjs/components/views/CredentialCardLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_legacy","_theme","_credential","_react","_ThemedText","CredentialCardLogo","overlay","brandingOverlayType","BrandingOverlayType","Branding10","_overlay$brandingOver","_overlay$brandingOver2","_overlay$brandingOver3","_overlay$brandingOver4","CredentialCardShadowTheme","useTheme","fontScale","useWindowDimensions","logoHeight","paddingHorizontal","isBranding11","Branding11","textColor","brandingOverlay","secondaryBackgroundColor","primaryBackgroundColor","logoText","useMemo","_overlay$metaOverlay2","_overlay$metaOverlay3","_overlay$metaOverlay","metaOverlay","issuer","charAt","toUpperCase","name","styles","StyleSheet","create","logoContainer","width","height","backgroundColor","borderRadius","justifyContent","alignItems","top","left","marginBottom","React","createElement","View","style","logo","Image","source","toImageSource","resizeMode","ThemedText","variant","fontSize","color","accessible","_default","exports","default"],"sourceRoot":"../../../../src","sources":["components/views/CredentialCardLogo.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/views/CredentialDetailPrimaryHeader.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _legacy = require("@bifold/oca/build/legacy");
+var _CardWatermark = _interopRequireDefault(require("../../components/misc/CardWatermark"));
+var _theme = require("../../contexts/theme");
+var _credential = require("../../utils/credential");
+var _testable = require("../../utils/testable");
+var _reactI18next = require("react-i18next");
+var _helpers = require("../../utils/helpers");
+var _ThemedText = require("../texts/ThemedText");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const paddingHorizontal = 24;
+const paddingVertical = 16;
+const logoHeight = 80;
+const CredentialDetailPrimaryHeader = ({
+  overlay,
+  brandingOverlayType = _legacy.BrandingOverlayType.Branding10,
+  credential
+}) => {
+  var _overlay$brandingOver, _overlay$metaOverlay, _overlay$metaOverlay2, _overlay$metaOverlay3, _overlay$metaOverlay4, _overlay$metaOverlay5, _overlay$metaOverlay6;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const {
+    ColorPallet
+  } = (0, _theme.useTheme)();
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const isBranding11 = brandingOverlayType === _legacy.BrandingOverlayType.Branding11;
+  const styles = _reactNative.StyleSheet.create({
+    primaryHeaderContainer: {
+      paddingHorizontal: isBranding11 ? 16 : paddingHorizontal,
+      paddingVertical,
+      overflow: 'hidden'
+    },
+    textContainer: {
+      color: brandingOverlayType === _legacy.BrandingOverlayType.Branding10 ? (0, _credential.credentialTextColor)(ColorPallet, (_overlay$brandingOver = overlay.brandingOverlay) === null || _overlay$brandingOver === void 0 ? void 0 : _overlay$brandingOver.primaryBackgroundColor) : ColorPallet.brand.primary
+    }
+  });
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    testID: (0, _testable.testIdWithKey)('CredentialDetailsPrimaryHeader'),
+    style: [styles.primaryHeaderContainer, {
+      zIndex: -1
+    }]
+  }, /*#__PURE__*/React.createElement(_reactNative.View, null, ((_overlay$metaOverlay = overlay.metaOverlay) === null || _overlay$metaOverlay === void 0 ? void 0 : _overlay$metaOverlay.watermark) && brandingOverlayType === _legacy.BrandingOverlayType.Branding10 && /*#__PURE__*/React.createElement(_CardWatermark.default, {
+    width: width,
+    height: height,
+    watermark: (_overlay$metaOverlay2 = overlay.metaOverlay) === null || _overlay$metaOverlay2 === void 0 ? void 0 : _overlay$metaOverlay2.watermark
+  }), brandingOverlayType === _legacy.BrandingOverlayType.Branding10 && /*#__PURE__*/React.createElement(_ThemedText.ThemedText, {
+    accessibilityLabel: `${t('Credentials.IssuedBy')} ${(_overlay$metaOverlay3 = overlay.metaOverlay) === null || _overlay$metaOverlay3 === void 0 ? void 0 : _overlay$metaOverlay3.issuer}`,
+    testID: (0, _testable.testIdWithKey)('CredentialIssuer'),
+    variant: "label",
+    style: [styles.textContainer, {
+      paddingLeft: logoHeight + paddingVertical,
+      paddingBottom: paddingVertical,
+      lineHeight: 19,
+      opacity: 0.8
+    }],
+    numberOfLines: 1
+  }, (_overlay$metaOverlay4 = overlay.metaOverlay) === null || _overlay$metaOverlay4 === void 0 ? void 0 : _overlay$metaOverlay4.issuer), /*#__PURE__*/React.createElement(_ThemedText.ThemedText, {
+    accessibilityLabel: `${(_overlay$metaOverlay5 = overlay.metaOverlay) === null || _overlay$metaOverlay5 === void 0 ? void 0 : _overlay$metaOverlay5.name} ${t('Credentials.Credential')}`,
+    testID: (0, _testable.testIdWithKey)('CredentialName'),
+    style: [styles.textContainer, {
+      lineHeight: 24
+    }]
+  }, (_overlay$metaOverlay6 = overlay.metaOverlay) === null || _overlay$metaOverlay6 === void 0 ? void 0 : _overlay$metaOverlay6.name), brandingOverlayType === _legacy.BrandingOverlayType.Branding11 && credential && /*#__PURE__*/React.createElement(_ThemedText.ThemedText, {
+    testID: (0, _testable.testIdWithKey)('IssuedOn'),
+    style: [styles.textContainer, {
+      lineHeight: 24,
+      marginTop: 8,
+      fontSize: 14,
+      color: ColorPallet.grayscale.mediumGrey
+    }]
+  }, t('CredentialDetails.IssuedOn'), " ", (0, _helpers.formatTime)(credential.createdAt, {
+    includeHour: true
+  }))));
+};
+var _default = exports.default = CredentialDetailPrimaryHeader;
+//# sourceMappingURL=CredentialDetailPrimaryHeader.js.map