@bifold/core 1.0.0

package/lib/module/components/tour/HomeTourSteps.js

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'react-native';
+import { useTheme } from '../../contexts/theme';
+import { TourBox } from './TourBox';
+export const homeTourSteps = [{
+  Render: props => {
+    const {
+      currentTour,
+      currentStep,
+      next,
+      stop,
+      previous
+    } = props;
+    const {
+      t
+    } = useTranslation();
+    const {
+      ColorPallet,
+      TextTheme
+    } = useTheme();
+    return /*#__PURE__*/React.createElement(TourBox, {
+      title: t('Tour.AddAndShare'),
+      leftText: t('Tour.Skip'),
+      rightText: t('Tour.Next'),
+      onLeft: stop,
+      onRight: next,
+      currentTour: currentTour,
+      currentStep: currentStep,
+      previous: previous,
+      stop: stop,
+      next: next
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        ...TextTheme.normal,
+        color: ColorPallet.notification.infoText
+      },
+      allowFontScaling: false
+    }, t('Tour.AddAndShareDescription')));
+  }
+}, {
+  Render: props => {
+    const {
+      currentTour,
+      currentStep,
+      next,
+      stop,
+      previous
+    } = props;
+    const {
+      t
+    } = useTranslation();
+    const {
+      ColorPallet,
+      TextTheme
+    } = useTheme();
+    return /*#__PURE__*/React.createElement(TourBox, {
+      title: t('Tour.Notifications'),
+      leftText: t('Tour.Back'),
+      rightText: t('Tour.Next'),
+      onLeft: previous,
+      onRight: next,
+      currentTour: currentTour,
+      currentStep: currentStep,
+      next: next,
+      stop: stop,
+      previous: previous
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        ...TextTheme.normal,
+        color: ColorPallet.notification.infoText
+      },
+      allowFontScaling: false
+    }, t('Tour.NotificationsDescription')));
+  }
+}, {
+  Render: props => {
+    const {
+      currentTour,
+      currentStep,
+      next,
+      stop,
+      previous
+    } = props;
+    const {
+      t
+    } = useTranslation();
+    const {
+      ColorPallet,
+      TextTheme
+    } = useTheme();
+    return /*#__PURE__*/React.createElement(TourBox, {
+      title: t('Tour.YourCredentials'),
+      leftText: t('Tour.Back'),
+      rightText: t('Tour.Done'),
+      onLeft: previous,
+      onRight: stop,
+      currentTour: currentTour,
+      currentStep: currentStep,
+      next: next,
+      stop: stop,
+      previous: previous
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        ...TextTheme.normal,
+        color: ColorPallet.notification.infoText
+      },
+      allowFontScaling: false
+    }, t('Tour.YourCredentialsDescription')));
+  }
+}];
+//# sourceMappingURL=HomeTourSteps.js.map

package/lib/module/components/tour/HomeTourSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useTranslation","Text","useTheme","TourBox","homeTourSteps","Render","props","currentTour","currentStep","next","stop","previous","t","ColorPallet","TextTheme","createElement","title","leftText","rightText","onLeft","onRight","style","normal","color","notification","infoText","allowFontScaling"],"sourceRoot":"../../../../src","sources":["components/tour/HomeTourSteps.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/tour/ProofRequestTourSteps.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'react-native';
+import { useTheme } from '../../contexts/theme';
+import { TourBox } from './TourBox';
+export const proofRequestTourSteps = [{
+  Render: props => {
+    const {
+      currentTour,
+      currentStep,
+      next,
+      stop,
+      previous
+    } = props;
+    const {
+      t
+    } = useTranslation();
+    const {
+      ColorPallet,
+      TextTheme
+    } = useTheme();
+    return /*#__PURE__*/React.createElement(TourBox, {
+      title: t('Tour.ProofRequests'),
+      hideLeft: true,
+      rightText: t('Tour.Done'),
+      onRight: stop,
+      currentTour: currentTour,
+      currentStep: currentStep,
+      previous: previous,
+      stop: stop,
+      next: next
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        ...TextTheme.normal,
+        color: ColorPallet.notification.infoText
+      },
+      allowFontScaling: false
+    }, t('Tour.ProofRequestsDescription')));
+  }
+}];
+//# sourceMappingURL=ProofRequestTourSteps.js.map

package/lib/module/components/tour/ProofRequestTourSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useTranslation","Text","useTheme","TourBox","proofRequestTourSteps","Render","props","currentTour","currentStep","next","stop","previous","t","ColorPallet","TextTheme","createElement","title","hideLeft","rightText","onRight","style","normal","color","notification","infoText","allowFontScaling"],"sourceRoot":"../../../../src","sources":["components/tour/ProofRequestTourSteps.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,OAAO,QAAQ,WAAW;AAEnC,OAAO,MAAMC,qBAAiC,GAAG,CAC/C;EACEC,MAAM,EAAGC,KAAkB,IAAK;IAC9B,MAAM;MAAEC,WAAW;MAAEC,WAAW;MAAEC,IAAI;MAAEC,IAAI;MAAEC;IAAS,CAAC,GAAGL,KAAK;IAChE,MAAM;MAAEM;IAAE,CAAC,GAAGZ,cAAc,CAAC,CAAC;IAC9B,MAAM;MAAEa,WAAW;MAAEC;IAAU,CAAC,GAAGZ,QAAQ,CAAC,CAAC;IAC7C,oBACEH,KAAA,CAAAgB,aAAA,CAACZ,OAAO;MACNa,KAAK,EAAEJ,CAAC,CAAC,oBAAoB,CAAE;MAC/BK,QAAQ;MACRC,SAAS,EAAEN,CAAC,CAAC,WAAW,CAAE;MAC1BO,OAAO,EAAET,IAAK;MACdH,WAAW,EAAEA,WAAY;MACzBC,WAAW,EAAEA,WAAY;MACzBG,QAAQ,EAAEA,QAAS;MACnBD,IAAI,EAAEA,IAAK;MACXD,IAAI,EAAEA;IAAK,gBAEXV,KAAA,CAAAgB,aAAA,CAACd,IAAI;MACHmB,KAAK,EAAE;QACL,GAAGN,SAAS,CAACO,MAAM;QACnBC,KAAK,EAAET,WAAW,CAACU,YAAY,CAACC;MAClC,CAAE;MACFC,gBAAgB,EAAE;IAAM,GAEvBb,CAAC,CAAC,+BAA+B,CAC9B,CACC,CAAC;EAEd;AACF,CAAC,CACF","ignoreList":[]}

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

@@ -0,0 +1,64 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { Rect } from 'react-native-svg';
+import { TourContext } from '../../contexts/tour/tour-context';
+const AnimatedRectangle = Animated.createAnimatedComponent(Rect);
+export const SpotCutout = () => {
+  const {
+    spot
+  } = useContext(TourContext);
+  const spotPadding = 20;
+  const start = useRef(new Animated.ValueXY({
+    x: 0,
+    y: 0
+  }));
+  const width = useRef(new Animated.Value(0));
+  const height = useRef(new Animated.Value(0));
+  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 Animated.parallel([Animated.timing(start.current, {
+        duration: 500,
+        easing: Easing.out(Easing.exp),
+        toValue: {
+          x: paddedX,
+          y: paddedY
+        },
+        useNativeDriver: false
+      }), Animated.timing(width.current, {
+        duration: 500,
+        easing: Easing.out(Easing.exp),
+        toValue: w,
+        useNativeDriver: false
+      }), Animated.timing(height.current, {
+        duration: 500,
+        easing: Easing.out(Easing.exp),
+        toValue: h,
+        useNativeDriver: false
+      })]);
+    };
+    transition().start();
+  }, [spot]);
+  if ([spot.height, spot.width].every(value => value <= 0)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(AnimatedRectangle, {
+    width: width.current,
+    height: height.current,
+    x: start.current.x,
+    y: start.current.y,
+    opacity: 1,
+    rx: 10,
+    fill: "black"
+  });
+};
+//# sourceMappingURL=SpotCutout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useContext","useEffect","useRef","Animated","Easing","Rect","TourContext","AnimatedRectangle","createAnimatedComponent","SpotCutout","spot","spotPadding","start","ValueXY","x","y","width","Value","height","spotHeight","spotWidth","w","h","paddedX","paddedY","transition","parallel","timing","current","duration","easing","out","exp","toValue","useNativeDriver","every","value","createElement","opacity","rx","fill"],"sourceRoot":"../../../../src","sources":["components/tour/SpotCutout.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC5D,SAASC,QAAQ,EAAEC,MAAM,QAAQ,cAAc;AAC/C,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,SAASC,WAAW,QAAQ,kCAAkC;AAE9D,MAAMC,iBAAiB,GAAGJ,QAAQ,CAACK,uBAAuB,CAACH,IAAI,CAAC;AAEhE,OAAO,MAAMI,UAAU,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAK,CAAC,GAAGV,UAAU,CAACM,WAAW,CAAC;EACxC,MAAMK,WAAW,GAAG,EAAE;EAEtB,MAAMC,KAAK,GAAGV,MAAM,CAAC,IAAIC,QAAQ,CAACU,OAAO,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC,CAAC;EAC1D,MAAMC,KAAK,GAAGd,MAAM,CAAC,IAAIC,QAAQ,CAACc,KAAK,CAAC,CAAC,CAAC,CAAC;EAC3C,MAAMC,MAAM,GAAGhB,MAAM,CAAC,IAAIC,QAAQ,CAACc,KAAK,CAAC,CAAC,CAAC,CAAC;EAE5ChB,SAAS,CAAC,MAAM;IACd,MAAM;MAAEiB,MAAM,EAAEC,UAAU;MAAEH,KAAK,EAAEI,SAAS;MAAEN,CAAC;MAAEC;IAAE,CAAC,GAAGL,IAAI;IAC3D,MAAMW,CAAC,GAAGD,SAAS,GAAGT,WAAW;IACjC,MAAMW,CAAC,GAAGH,UAAU,GAAGR,WAAW;IAClC,MAAMY,OAAO,GAAGT,CAAC,GAAGH,WAAW,GAAG,CAAC;IACnC,MAAMa,OAAO,GAAGT,CAAC,GAAGJ,WAAW,GAAG,CAAC;IAEnC,MAAMc,UAAU,GAAGA,CAAA,KAAmC;MACpD,OAAOtB,QAAQ,CAACuB,QAAQ,CAAC,CACvBvB,QAAQ,CAACwB,MAAM,CAACf,KAAK,CAACgB,OAAO,EAAE;QAC7BC,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAE1B,MAAM,CAAC2B,GAAG,CAAC3B,MAAM,CAAC4B,GAAG,CAAC;QAC9BC,OAAO,EAAE;UAAEnB,CAAC,EAAES,OAAO;UAAER,CAAC,EAAES;QAAQ,CAAC;QACnCU,eAAe,EAAE;MACnB,CAAC,CAAC,EACF/B,QAAQ,CAACwB,MAAM,CAACX,KAAK,CAACY,OAAO,EAAE;QAC7BC,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAE1B,MAAM,CAAC2B,GAAG,CAAC3B,MAAM,CAAC4B,GAAG,CAAC;QAC9BC,OAAO,EAAEZ,CAAC;QACVa,eAAe,EAAE;MACnB,CAAC,CAAC,EACF/B,QAAQ,CAACwB,MAAM,CAACT,MAAM,CAACU,OAAO,EAAE;QAC9BC,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAE1B,MAAM,CAAC2B,GAAG,CAAC3B,MAAM,CAAC4B,GAAG,CAAC;QAC9BC,OAAO,EAAEX,CAAC;QACVY,eAAe,EAAE;MACnB,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;IAEDT,UAAU,CAAC,CAAC,CAACb,KAAK,CAAC,CAAC;EACtB,CAAC,EAAE,CAACF,IAAI,CAAC,CAAC;EAEV,IAAI,CAACA,IAAI,CAACQ,MAAM,EAAER,IAAI,CAACM,KAAK,CAAC,CAACmB,KAAK,CAAEC,KAAK,IAAKA,KAAK,IAAI,CAAC,CAAC,EAAE;IAC1D,OAAO,IAAI;EACb;EAEA,oBACErC,KAAA,CAAAsC,aAAA,CAAC9B,iBAAiB;IAChBS,KAAK,EAAEA,KAAK,CAACY,OAAQ;IACrBV,MAAM,EAAEA,MAAM,CAACU,OAAQ;IACvBd,CAAC,EAAEF,KAAK,CAACgB,OAAO,CAACd,CAAE;IACnBC,CAAC,EAAEH,KAAK,CAACgB,OAAO,CAACb,CAAE;IACnBuB,OAAO,EAAE,CAAE;IACXC,EAAE,EAAE,EAAG;IACPC,IAAI,EAAC;EAAO,CACb,CAAC;AAEN,CAAC","ignoreList":[]}

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

@@ -0,0 +1,199 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { hitSlop } from '../../constants';
+import { useTheme } from '../../contexts/theme';
+import { testIdWithKey } from '../../utils/testable';
+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
+ */
+export function TourBox(props) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    leftText = t('Tour.Back'),
+    rightText = t('Tour.Next'),
+    title,
+    hideLeft,
+    hideRight,
+    onLeft,
+    onRight,
+    children,
+    stop,
+    stepOn,
+    stepsOutOf
+  } = props;
+  const {
+    TextTheme,
+    ColorPallet,
+    OnboardingTheme
+  } = useTheme();
+  const iconSize = 30;
+  const dismissIconName = 'clear';
+  const iconColor = ColorPallet.notification.infoIcon;
+  const [paginationDots, setPaginationDots] = useState([]);
+  const [xPos, setXPos] = useState(0);
+  const swipeThreshold = 75;
+  const styles = 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 = useMemo(() => {
+    return stepOn && stepsOutOf ? t('Tour.AccessibilitySteps', {
+      stepOn,
+      stepsOutOf,
+      title
+    }) : title;
+  }, [stepOn, stepsOutOf, title, t]);
+  const handleLeft = useCallback(() => {
+    onLeft === null || onLeft === void 0 || onLeft();
+  }, [onLeft]);
+  const handleRight = useCallback(() => {
+    onRight === null || onRight === void 0 || onRight();
+  }, [onRight]);
+  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.createElement(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.createElement(View, {
+    style: styles.headerContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.headerTextContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    allowFontScaling: false,
+    style: styles.headerText,
+    testID: testIdWithKey('HeaderText'),
+    accessibilityRole: "header",
+    accessibilityLabel: accessibilityLabel
+  }, title)), /*#__PURE__*/React.createElement(View, {
+    style: styles.dismissIcon
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: stop,
+    testID: testIdWithKey('Close'),
+    accessibilityLabel: t('Global.Close'),
+    accessibilityRole: 'button',
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: dismissIconName,
+    size: iconSize,
+    color: iconColor
+  })))), /*#__PURE__*/React.createElement(View, {
+    style: styles.body
+  }, children), (!hideLeft || !hideRight) && /*#__PURE__*/React.createElement(View, {
+    style: styles.footerContainer
+  }, /*#__PURE__*/React.createElement(View, null, !hideLeft && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    accessibilityLabel: leftText,
+    accessibilityRole: 'button',
+    testID: testIdWithKey('Back'),
+    onPress: handleLeft,
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React.createElement(Text, {
+    allowFontScaling: false,
+    style: styles.navText
+  }, leftText))), /*#__PURE__*/React.createElement(View, {
+    style: styles.pagerContainer
+  }, paginationDots.map((dot, index) => dot === PaginationDotTypes.Filled ? /*#__PURE__*/React.createElement(View, {
+    key: index,
+    style: [styles.pagerDot, styles.pagerDotActive]
+  }) : /*#__PURE__*/React.createElement(View, {
+    key: index,
+    style: [styles.pagerDot, styles.pagerDotInactive]
+  }))), /*#__PURE__*/React.createElement(View, null, !hideRight && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    accessibilityLabel: rightText,
+    accessibilityRole: 'button',
+    testID: testIdWithKey('Next'),
+    onPress: handleRight,
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React.createElement(Text, {
+    allowFontScaling: false,
+    style: styles.navText
+  }, rightText)))));
+}
+//# sourceMappingURL=TourBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","useTranslation","StyleSheet","Text","TouchableOpacity","View","Icon","hitSlop","useTheme","testIdWithKey","PaginationDotTypes","TourBox","props","t","leftText","rightText","title","hideLeft","hideRight","onLeft","onRight","children","stop","stepOn","stepsOutOf","TextTheme","ColorPallet","OnboardingTheme","iconSize","dismissIconName","iconColor","notification","infoIcon","paginationDots","setPaginationDots","xPos","setXPos","swipeThreshold","styles","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","handleLeft","handleRight","arr","i","push","Filled","Unfilled","createElement","style","onTouchStart","e","nativeEvent","pageX","onTouchEnd","allowFontScaling","testID","accessibilityRole","onPress","name","size","map","dot","index","key"],"sourceRoot":"../../../../src","sources":["components/tour/TourBox.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,138 @@
+import React, { useCallback, useContext, useRef, useState, useEffect } from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { Defs, Mask, Rect, Svg } from 'react-native-svg';
+import { tourMargin } from '../../constants';
+import { TourContext } from '../../contexts/tour/tour-context';
+import { testIdWithKey } from '../../utils/testable';
+import { SpotCutout } from './SpotCutout';
+export const TourOverlay = props => {
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = useWindowDimensions();
+  const {
+    color,
+    currentTour,
+    currentStep,
+    onBackdropPress,
+    backdropOpacity,
+    changeSpot,
+    spot,
+    tourStep
+  } = props;
+  const [viewBox, setViewBox] = useState(`0 0 ${windowWidth} ${windowHeight}`);
+  const {
+    next,
+    previous,
+    start,
+    stop
+  } = useContext(TourContext);
+  const [tooltipStyle, setTooltipStyle] = useState({});
+  const tooltipRef = useRef(null);
+  const handleBackdropPress = 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]);
+  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: tourMargin,
+        right: 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: tourMargin,
+        right: tourMargin,
+        bottom
+      });
+      // if spot is in the upper half of the screen
+    } else {
+      const top = spot.y + gapBetweenSpotAndTooltip + spot.height;
+      setTooltipStyle({
+        left: tourMargin,
+        right: tourMargin,
+        top
+      });
+    }
+  }, [windowWidth, windowHeight, spot.width, spot.height, spot.x, spot.y]);
+  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.createElement(View, {
+    accessibilityViewIsModal: true,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: windowHeight + 1,
+      width: windowWidth + 1
+    },
+    testID: testIdWithKey('SpotlightOverlay')
+  }, /*#__PURE__*/React.createElement(Svg, {
+    testID: testIdWithKey('SpotOverlay'),
+    height: windowHeight + 1,
+    width: windowWidth + 1,
+    viewBox: viewBox,
+    onPress: handleBackdropPress,
+    shouldRasterizeIOS: true,
+    renderToHardwareTextureAndroid: true
+  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(Mask, {
+    id: "mask",
+    x: 0,
+    y: 0,
+    height: windowHeight + 1,
+    width: windowWidth + 1
+  }, /*#__PURE__*/React.createElement(Rect, {
+    height: windowHeight + 1,
+    width: windowWidth + 1,
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement(SpotCutout, null))), /*#__PURE__*/React.createElement(Rect, {
+    height: windowHeight + 1,
+    width: windowWidth + 1,
+    fill: color,
+    mask: "url(#mask)",
+    opacity: backdropOpacity
+  })), /*#__PURE__*/React.createElement(View, {
+    ref: tooltipRef,
+    testID: testIdWithKey('SpotTooltip'),
+    style: {
+      ...tooltipStyle,
+      opacity: 1,
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/React.createElement(tourStep.Render, {
+    currentTour: currentTour,
+    currentStep: currentStep,
+    changeSpot: changeSpot,
+    next: next,
+    previous: previous,
+    stop: stop
+  }))) : null;
+};
+//# sourceMappingURL=TourOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useContext","useRef","useState","useEffect","View","useWindowDimensions","Defs","Mask","Rect","Svg","tourMargin","TourContext","testIdWithKey","SpotCutout","TourOverlay","props","width","windowWidth","height","windowHeight","color","currentTour","currentStep","onBackdropPress","backdropOpacity","changeSpot","spot","tourStep","viewBox","setViewBox","next","previous","start","stop","tooltipStyle","setTooltipStyle","tooltipRef","handleBackdropPress","handler","undefined","gapBetweenSpotAndTooltip","x","y","oneSixthOfScreenHeight","left","right","top","bottom","createElement","accessibilityViewIsModal","style","position","testID","onPress","shouldRasterizeIOS","renderToHardwareTextureAndroid","id","fill","mask","opacity","ref","Render"],"sourceRoot":"../../../../src","sources":["components/tour/TourOverlay.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,66 @@
+import { Image, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { BrandingOverlayType } from '@bifold/oca/build/legacy';
+import { useTheme } from '../../contexts/theme';
+import { toImageSource } from '../../utils/credential';
+import { useMemo } from 'react';
+import { ThemedText } from '../texts/ThemedText';
+const CredentialCardLogo = ({
+  overlay,
+  brandingOverlayType = BrandingOverlayType.Branding10
+}) => {
+  var _overlay$brandingOver, _overlay$brandingOver2, _overlay$brandingOver3, _overlay$brandingOver4;
+  const {
+    CredentialCardShadowTheme
+  } = useTheme();
+  const {
+    fontScale
+  } = useWindowDimensions();
+  const logoHeight = brandingOverlayType === BrandingOverlayType.Branding10 ? 80 : 48;
+  const paddingHorizontal = 24;
+  const isBranding11 = brandingOverlayType === 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 = useMemo(() => {
+    var _overlay$metaOverlay2, _overlay$metaOverlay3;
+    if (brandingOverlayType === 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 = 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 === BrandingOverlayType.Branding10 && {
+        top: -0.5 * logoHeight,
+        left: paddingHorizontal,
+        marginBottom: -1 * logoHeight,
+        ...CredentialCardShadowTheme
+      })
+    }
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.logoContainer
+  }, (_overlay$brandingOver3 = overlay.brandingOverlay) !== null && _overlay$brandingOver3 !== void 0 && _overlay$brandingOver3.logo ? /*#__PURE__*/React.createElement(Image, {
+    source: 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, {
+    variant: "title",
+    style: {
+      fontSize: 0.5 * logoHeight,
+      color: isBranding11 ? textColor : '#000'
+    },
+    accessible: false
+  }, logoText));
+};
+export default CredentialCardLogo;
+//# sourceMappingURL=CredentialCardLogo.js.map