@coorpacademy/components 10.30.12-alpha.3 → 11.0.1

package/es/organism/review-stacked-slides/index.native.js

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
 import keys from 'lodash/fp/keys';
+import { useTranslateY } from '@coorpacademy/react-native-animation';
 import Slide from '../review-slide/index.native';
-import useTranslateVertically from '../../behaviours/use-translate-vertically.native';
 export const TOTAL_SLIDES_STACK = 5;
 const style = StyleSheet.create({
   slides: {
@@ -21,15 +21,12 @@ const StackedSlides = props => {
     validateButton,
     correctionPopinProps
   } = props;
-  const {
-    translate,
-    animatedY
-  } = useTranslateVertically({
+  const hideSlides = useTranslateY({
     fromValue: 0,
     toValue: windowHeight,
     duration: 800
   });
-  useEffect(translate, [translate]);
+  useEffect(() => hideSlides.start(), []);
   const indexes = keys(slides).reverse();
   const stackedSlides = indexes.map(slideIndex => {
     const slide = slides[slideIndex];
@@ -43,7 +40,7 @@ const StackedSlides = props => {
     });
   });
   return /*#__PURE__*/React.createElement(Animated.View, {
-    style: [style.slides, animatedY]
+    style: [style.slides, hideSlides.animatedStyle]
   }, stackedSlides);
 };
 

package/es/organism/review-stacked-slides/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useEffect","Animated","StyleSheet","useWindowDimensions","keys","Slide","useTranslateVertically","TOTAL_SLIDES_STACK","style","create","slides","flex","height","width","StackedSlides","props","windowHeight","validateButton","correctionPopinProps","translate","animatedY","fromValue","toValue","duration","indexes","reverse","stackedSlides","map","slideIndex","slide","num","Number","parseInt"],"sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {Animated, StyleSheet, useWindowDimensions} from 'react-native';\nimport keys from 'lodash/fp/keys';\nimport Slide from '../review-slide/index.native';\nimport useTranslateVertically from '../../behaviours/use-translate-vertically.native';\nimport {ReviewStackProps} from './prop-types';\n\nexport const TOTAL_SLIDES_STACK = 5;\n\nconst style = StyleSheet.create({\n  slides: {\n    flex: 1,\n    height: '100%',\n    width: '100%'\n  }\n});\n\nconst StackedSlides = (props: ReviewStackProps) => {\n  const {height: windowHeight} = useWindowDimensions();\n  const {slides, validateButton, correctionPopinProps} = props;\n\n  const {translate, animatedY} = useTranslateVertically({\n    fromValue: 0,\n    toValue: windowHeight,\n    duration: 800\n  });\n\n  useEffect(translate, [translate]);\n\n  const indexes = keys(slides).reverse();\n  const stackedSlides = indexes.map(slideIndex => {\n    const slide = slides[slideIndex];\n\n    return (\n      <Slide\n        {...{\n          num: Number.parseInt(slideIndex),\n          slideIndex,\n          slide,\n          validateButton,\n          correctionPopinProps\n        }}\n        key={slideIndex}\n      />\n    );\n  });\n\n  return <Animated.View style={[style.slides, animatedY]}>{stackedSlides}</Animated.View>;\n};\n\nexport default StackedSlides;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,SAAf,QAA+B,OAA/B;AACA,SAAQC,QAAR,EAAkBC,UAAlB,EAA8BC,mBAA9B,QAAwD,cAAxD;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,OAAOC,KAAP,MAAkB,8BAAlB;AACA,OAAOC,sBAAP,MAAmC,kDAAnC;AAGA,OAAO,MAAMC,kBAAkB,GAAG,CAA3B;AAEP,MAAMC,KAAK,GAAGN,UAAU,CAACO,MAAX,CAAkB;EAC9BC,MAAM,EAAE;IACNC,IAAI,EAAE,CADA;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AADsB,CAAlB,CAAd;;AAQA,MAAMC,aAAa,GAAIC,KAAD,IAA6B;EACjD,MAAM;IAACH,MAAM,EAAEI;EAAT,IAAyBb,mBAAmB,EAAlD;EACA,MAAM;IAACO,MAAD;IAASO,cAAT;IAAyBC;EAAzB,IAAiDH,KAAvD;EAEA,MAAM;IAACI,SAAD;IAAYC;EAAZ,IAAyBd,sBAAsB,CAAC;IACpDe,SAAS,EAAE,CADyC;IAEpDC,OAAO,EAAEN,YAF2C;IAGpDO,QAAQ,EAAE;EAH0C,CAAD,CAArD;EAMAvB,SAAS,CAACmB,SAAD,EAAY,CAACA,SAAD,CAAZ,CAAT;EAEA,MAAMK,OAAO,GAAGpB,IAAI,CAACM,MAAD,CAAJ,CAAae,OAAb,EAAhB;EACA,MAAMC,aAAa,GAAGF,OAAO,CAACG,GAAR,CAAYC,UAAU,IAAI;IAC9C,MAAMC,KAAK,GAAGnB,MAAM,CAACkB,UAAD,CAApB;IAEA,oBACE,oBAAC,KAAD;MAEIE,GAAG,EAAEC,MAAM,CAACC,QAAP,CAAgBJ,UAAhB,CAFT;MAGIA,UAHJ;MAIIC,KAJJ;MAKIZ,cALJ;MAMIC,oBANJ;MAQE,GAAG,EAAEU;IARP,EADF;EAYD,CAfqB,CAAtB;EAiBA,oBAAO,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACpB,KAAK,CAACE,MAAP,EAAeU,SAAf;EAAtB,GAAkDM,aAAlD,CAAP;AACD,CA/BD;;AAiCA,eAAeZ,aAAf"}
+{"version":3,"file":"index.native.js","names":["React","useEffect","Animated","StyleSheet","useWindowDimensions","keys","useTranslateY","Slide","TOTAL_SLIDES_STACK","style","create","slides","flex","height","width","StackedSlides","props","windowHeight","validateButton","correctionPopinProps","hideSlides","fromValue","toValue","duration","start","indexes","reverse","stackedSlides","map","slideIndex","slide","num","Number","parseInt","animatedStyle"],"sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {Animated, StyleSheet, useWindowDimensions} from 'react-native';\nimport keys from 'lodash/fp/keys';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Slide from '../review-slide/index.native';\nimport {ReviewStackProps} from './prop-types';\n\nexport const TOTAL_SLIDES_STACK = 5;\n\nconst style = StyleSheet.create({\n  slides: {\n    flex: 1,\n    height: '100%',\n    width: '100%'\n  }\n});\n\nconst StackedSlides = (props: ReviewStackProps) => {\n  const {height: windowHeight} = useWindowDimensions();\n  const {slides, validateButton, correctionPopinProps} = props;\n\n  const hideSlides = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight,\n    duration: 800\n  });\n\n  useEffect(() => hideSlides.start(), []);\n\n  const indexes = keys(slides).reverse();\n  const stackedSlides = indexes.map(slideIndex => {\n    const slide = slides[slideIndex];\n\n    return (\n      <Slide\n        {...{\n          num: Number.parseInt(slideIndex),\n          slideIndex,\n          slide,\n          validateButton,\n          correctionPopinProps\n        }}\n        key={slideIndex}\n      />\n    );\n  });\n\n  return (\n    <Animated.View style={[style.slides, hideSlides.animatedStyle]}>{stackedSlides}</Animated.View>\n  );\n};\n\nexport default StackedSlides;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,SAAf,QAA+B,OAA/B;AACA,SAAQC,QAAR,EAAkBC,UAAlB,EAA8BC,mBAA9B,QAAwD,cAAxD;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,SAAQC,aAAR,QAA4B,sCAA5B;AACA,OAAOC,KAAP,MAAkB,8BAAlB;AAGA,OAAO,MAAMC,kBAAkB,GAAG,CAA3B;AAEP,MAAMC,KAAK,GAAGN,UAAU,CAACO,MAAX,CAAkB;EAC9BC,MAAM,EAAE;IACNC,IAAI,EAAE,CADA;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AADsB,CAAlB,CAAd;;AAQA,MAAMC,aAAa,GAAIC,KAAD,IAA6B;EACjD,MAAM;IAACH,MAAM,EAAEI;EAAT,IAAyBb,mBAAmB,EAAlD;EACA,MAAM;IAACO,MAAD;IAASO,cAAT;IAAyBC;EAAzB,IAAiDH,KAAvD;EAEA,MAAMI,UAAU,GAAGd,aAAa,CAAC;IAC/Be,SAAS,EAAE,CADoB;IAE/BC,OAAO,EAAEL,YAFsB;IAG/BM,QAAQ,EAAE;EAHqB,CAAD,CAAhC;EAMAtB,SAAS,CAAC,MAAMmB,UAAU,CAACI,KAAX,EAAP,EAA2B,EAA3B,CAAT;EAEA,MAAMC,OAAO,GAAGpB,IAAI,CAACM,MAAD,CAAJ,CAAae,OAAb,EAAhB;EACA,MAAMC,aAAa,GAAGF,OAAO,CAACG,GAAR,CAAYC,UAAU,IAAI;IAC9C,MAAMC,KAAK,GAAGnB,MAAM,CAACkB,UAAD,CAApB;IAEA,oBACE,oBAAC,KAAD;MAEIE,GAAG,EAAEC,MAAM,CAACC,QAAP,CAAgBJ,UAAhB,CAFT;MAGIA,UAHJ;MAIIC,KAJJ;MAKIZ,cALJ;MAMIC,oBANJ;MAQE,GAAG,EAAEU;IARP,EADF;EAYD,CAfqB,CAAtB;EAiBA,oBACE,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACpB,KAAK,CAACE,MAAP,EAAeS,UAAU,CAACc,aAA1B;EAAtB,GAAiEP,aAAjE,CADF;AAGD,CAjCD;;AAmCA,eAAeZ,aAAf"}

package/es/template/activity/engine-stars.css

@@ -211,9 +211,9 @@
 @media tablet, mobile {
   .engineStars {
     width: auto;
-    height: 145px;
+    height: 75px;
     flex: 1 2;
-    justify-content: flex-start;
+    justify-content: flex-end;
     padding-bottom: 8px;
     overflow: none;
     top: 0;
@@ -223,8 +223,8 @@
   }
 
   .engineIcon {
-    width: 50px;
-    height: 48px;
+    width: 30px;
+    height: 25px;
     right: 5px;
   }
 
@@ -235,6 +235,7 @@
     align-items: flex-end;
     align-content: flex-end;
     padding: 0;
+    margin: 0;
     box-sizing: border-box;
   }
 

package/es/template/activity/stars-summary.css

@@ -34,7 +34,9 @@
 }
 
 .myStarsWrapper {
+    display: inline-block;
     max-width: 690px;
+    float: right;
 }
 
 .footerSummaryStars{
@@ -143,8 +145,7 @@
 @media tablet, mobile {
     .myStars,
     .allStars,
-    .totalStars,
-    .myStarsWrapper {
+    .totalStars {
         width: 100%;
     }
 
@@ -169,7 +170,15 @@
         overflow: hidden;
         overflow-x: auto;
     }
-        
+
+    .navigationLeft {
+        display: none;
+    }
+
+    .navigationRight {
+        display: none;
+    }
+
     .iconHeader {
         width: 13px;
         height: 13px;

package/es/template/activity/style.css

@@ -123,7 +123,7 @@
   }
 
   .recommendationWrapper {
-    margin: 24px 40px 24px 24px;
+    display: none;
   }
 
   .wrapperCta {
@@ -142,9 +142,6 @@
   }
 
   .select {
-    margin-left: 24px;
-    margin-right: 40px;
-    margin-top: 30px;
     padding-bottom: 0;
   }
 

package/lib/molecule/card-congrats/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/card-congrats/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAwD1C,QAAA,MAAM,YAAY,yEAQf,iBAAiB,uBA0BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/card-congrats/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAwD1C,QAAA,MAAM,YAAY,yEAQf,iBAAiB,uBAyBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/molecule/card-congrats/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","animation","marginBottom","width","height","card","alignItems","paddingTop","paddingBottom","borderRadius","margin","BOX_STYLE","backgroundColor","colors","white","cardTitle","fontWeight","fontSize","lineHeight","color","text","primary","reward","rewardText","marginHorizontal","iconBig","iconSmall","CardCongrats","animationUri","Icon","value","iconColor","textColor","direction","useTemplateContext","styleSheet","setStylesheet","useState","useEffect","_stylesheet","uri","flexDirection"],"sources":["../../../src/molecule/card-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport {CardCongratsProps} from './types';\n\ntype StyleSheetType = {\n  animation: ViewStyle;\n  card: ViewStyle;\n  cardTitle: TextStyle;\n  iconBig: ViewStyle;\n  iconSmall: ViewStyle;\n  reward: ViewStyle;\n  rewardText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    animation: {\n      marginBottom: 12,\n      width: 132,\n      height: 132\n    },\n    // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n    card: {\n      alignItems: 'center',\n      paddingTop: 32,\n      paddingBottom: 24,\n      borderRadius: 24,\n      margin: 10,\n      width: 280,\n      height: 317,\n      ...BOX_STYLE,\n      backgroundColor: theme.colors.white\n    },\n    cardTitle: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      color: theme.colors.text.primary\n    },\n    reward: {\n      alignItems: 'center'\n    },\n    rewardText: {\n      fontWeight: '700',\n      fontSize: 64,\n      lineHeight: 77,\n      marginHorizontal: 10\n    },\n    iconBig: {\n      width: 70,\n      height: 70\n    },\n    iconSmall: {\n      width: 53,\n      height: 53\n    }\n  });\n\nconst CardCongrats = ({\n  animationUri,\n  Icon,\n  value,\n  text,\n  iconColor,\n  textColor,\n  direction\n}: CardCongratsProps) => {\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.card}>\n      <View style={styleSheet.animation}>\n        {animationUri ? <LottieView source={{uri: animationUri}} autoPlay loop={false} /> : null}\n      </View>\n      <Text style={styleSheet.cardTitle}>{text}</Text>\n      <View style={[styleSheet.reward, {flexDirection: direction}]}>\n        <Text style={[styleSheet.rewardText, {color: textColor}]}>{value}</Text>\n        <Icon style={styleSheet.iconSmall} color={iconColor} />\n      </View>\n    </View>\n  );\n};\n\nexport default CardCongrats;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAaA,MAAMA,gBAAgB,GAAIC,KAAD,IACvBC,uBAAA,CAAWC,MAAX,CAAkB;EAChBC,SAAS,EAAE;IACTC,YAAY,EAAE,EADL;IAETC,KAAK,EAAE,GAFE;IAGTC,MAAM,EAAE;EAHC,CADK;EAMhB;EACAC,IAAI;IACFC,UAAU,EAAE,QADV;IAEFC,UAAU,EAAE,EAFV;IAGFC,aAAa,EAAE,EAHb;IAIFC,YAAY,EAAE,EAJZ;IAKFC,MAAM,EAAE,EALN;IAMFP,KAAK,EAAE,GANL;IAOFC,MAAM,EAAE;EAPN,GAQCO,iBARD;IASFC,eAAe,EAAEd,KAAK,CAACe,MAAN,CAAaC;EAT5B,EAPY;EAkBhBC,SAAS,EAAE;IACTC,UAAU,EAAE,KADH;IAETC,QAAQ,EAAE,EAFD;IAGTC,UAAU,EAAE,EAHH;IAITC,KAAK,EAAErB,KAAK,CAACe,MAAN,CAAaO,IAAb,CAAkBC;EAJhB,CAlBK;EAwBhBC,MAAM,EAAE;IACNhB,UAAU,EAAE;EADN,CAxBQ;EA2BhBiB,UAAU,EAAE;IACVP,UAAU,EAAE,KADF;IAEVC,QAAQ,EAAE,EAFA;IAGVC,UAAU,EAAE,EAHF;IAIVM,gBAAgB,EAAE;EAJR,CA3BI;EAiChBC,OAAO,EAAE;IACPtB,KAAK,EAAE,EADA;IAEPC,MAAM,EAAE;EAFD,CAjCO;EAqChBsB,SAAS,EAAE;IACTvB,KAAK,EAAE,EADE;IAETC,MAAM,EAAE;EAFC;AArCK,CAAlB,CADF;;AA4CA,MAAMuB,YAAY,GAAG,CAAC;EACpBC,YADoB;EAEpBC,IAFoB;EAGpBC,KAHoB;EAIpBV,IAJoB;EAKpBW,SALoB;EAMpBC,SANoB;EAOpBC;AAPoB,CAAD,KAQI;EACvB,MAAM;IAACnC;EAAD,IAAU,IAAAoC,mCAAA,GAAhB;EAEA,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAgC,IAAhC,CAApC;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,MAAMC,WAAW,GAAG1C,gBAAgB,CAACC,KAAD,CAApC;;IACAsC,aAAa,CAACG,WAAD,CAAb;EACD,CAHD,EAGG,CAACzC,KAAD,CAHH;;EAKA,IAAI,CAACqC,UAAL,EAAiB;IACf,OAAO,IAAP;EACD;;EAED,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEA,UAAU,CAAC9B;EAAxB,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE8B,UAAU,CAAClC;EAAxB,GACG2B,YAAY,gBAAG,6BAAC,0BAAD;IAAY,MAAM,EAAE;MAACY,GAAG,EAAEZ;IAAN,CAApB;IAAyC,QAAQ,MAAjD;IAAkD,IAAI,EAAE;EAAxD,EAAH,GAAuE,IADtF,CADF,eAIE,6BAAC,iBAAD;IAAM,KAAK,EAAEO,UAAU,CAACpB;EAAxB,GAAoCK,IAApC,CAJF,eAKE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACe,UAAU,CAACb,MAAZ,EAAoB;MAACmB,aAAa,EAAER;IAAhB,CAApB;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACE,UAAU,CAACZ,UAAZ,EAAwB;MAACJ,KAAK,EAAEa;IAAR,CAAxB;EAAb,GAA2DF,KAA3D,CADF,eAEE,6BAAC,IAAD;IAAM,KAAK,EAAEK,UAAU,CAACT,SAAxB;IAAmC,KAAK,EAAEK;EAA1C,EAFF,CALF,CADF;AAYD,CAlCD;;eAoCeJ,Y"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","animation","marginBottom","width","height","card","alignItems","paddingTop","paddingBottom","borderRadius","margin","BOX_STYLE","backgroundColor","colors","white","cardTitle","fontWeight","fontSize","lineHeight","color","text","primary","reward","rewardText","marginHorizontal","iconBig","iconSmall","CardCongrats","animationUri","Icon","value","iconColor","textColor","direction","useTemplateContext","styleSheet","setStylesheet","useState","useEffect","_stylesheet","uri","flexDirection"],"sources":["../../../src/molecule/card-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport {CardCongratsProps} from './types';\n\ntype StyleSheetType = {\n  animation: ViewStyle;\n  card: ViewStyle;\n  cardTitle: TextStyle;\n  iconBig: ViewStyle;\n  iconSmall: ViewStyle;\n  reward: ViewStyle;\n  rewardText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    animation: {\n      marginBottom: 12,\n      width: 132,\n      height: 132\n    },\n    // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n    card: {\n      alignItems: 'center',\n      paddingTop: 32,\n      paddingBottom: 24,\n      borderRadius: 24,\n      margin: 10,\n      width: 280,\n      height: 317,\n      ...BOX_STYLE,\n      backgroundColor: theme.colors.white\n    },\n    cardTitle: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      color: theme.colors.text.primary\n    },\n    reward: {\n      alignItems: 'center'\n    },\n    rewardText: {\n      fontWeight: '700',\n      fontSize: 64,\n      lineHeight: 77,\n      marginHorizontal: 10\n    },\n    iconBig: {\n      width: 70,\n      height: 70\n    },\n    iconSmall: {\n      width: 53,\n      height: 53\n    }\n  });\n\nconst CardCongrats = ({\n  animationUri,\n  Icon,\n  value,\n  text,\n  iconColor,\n  textColor,\n  direction\n}: CardCongratsProps) => {\n  const {theme} = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.card}>\n      <View style={styleSheet.animation}>\n        {animationUri ? <LottieView source={{uri: animationUri}} autoPlay loop={false} /> : null}\n      </View>\n      <Text style={styleSheet.cardTitle}>{text}</Text>\n      <View style={[styleSheet.reward, {flexDirection: direction}]}>\n        <Text style={[styleSheet.rewardText, {color: textColor}]}>{value}</Text>\n        <Icon style={styleSheet.iconSmall} color={iconColor} />\n      </View>\n    </View>\n  );\n};\n\nexport default CardCongrats;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAaA,MAAMA,gBAAgB,GAAIC,KAAD,IACvBC,uBAAA,CAAWC,MAAX,CAAkB;EAChBC,SAAS,EAAE;IACTC,YAAY,EAAE,EADL;IAETC,KAAK,EAAE,GAFE;IAGTC,MAAM,EAAE;EAHC,CADK;EAMhB;EACAC,IAAI;IACFC,UAAU,EAAE,QADV;IAEFC,UAAU,EAAE,EAFV;IAGFC,aAAa,EAAE,EAHb;IAIFC,YAAY,EAAE,EAJZ;IAKFC,MAAM,EAAE,EALN;IAMFP,KAAK,EAAE,GANL;IAOFC,MAAM,EAAE;EAPN,GAQCO,iBARD;IASFC,eAAe,EAAEd,KAAK,CAACe,MAAN,CAAaC;EAT5B,EAPY;EAkBhBC,SAAS,EAAE;IACTC,UAAU,EAAE,KADH;IAETC,QAAQ,EAAE,EAFD;IAGTC,UAAU,EAAE,EAHH;IAITC,KAAK,EAAErB,KAAK,CAACe,MAAN,CAAaO,IAAb,CAAkBC;EAJhB,CAlBK;EAwBhBC,MAAM,EAAE;IACNhB,UAAU,EAAE;EADN,CAxBQ;EA2BhBiB,UAAU,EAAE;IACVP,UAAU,EAAE,KADF;IAEVC,QAAQ,EAAE,EAFA;IAGVC,UAAU,EAAE,EAHF;IAIVM,gBAAgB,EAAE;EAJR,CA3BI;EAiChBC,OAAO,EAAE;IACPtB,KAAK,EAAE,EADA;IAEPC,MAAM,EAAE;EAFD,CAjCO;EAqChBsB,SAAS,EAAE;IACTvB,KAAK,EAAE,EADE;IAETC,MAAM,EAAE;EAFC;AArCK,CAAlB,CADF;;AA4CA,MAAMuB,YAAY,GAAG,CAAC;EACpBC,YADoB;EAEpBC,IAFoB;EAGpBC,KAHoB;EAIpBV,IAJoB;EAKpBW,SALoB;EAMpBC,SANoB;EAOpBC;AAPoB,CAAD,KAQI;EACvB,MAAM;IAACnC;EAAD,IAAU,IAAAoC,mCAAA,GAAhB;EACA,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAgC,IAAhC,CAApC;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,MAAMC,WAAW,GAAG1C,gBAAgB,CAACC,KAAD,CAApC;;IACAsC,aAAa,CAACG,WAAD,CAAb;EACD,CAHD,EAGG,CAACzC,KAAD,CAHH;;EAKA,IAAI,CAACqC,UAAL,EAAiB;IACf,OAAO,IAAP;EACD;;EAED,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEA,UAAU,CAAC9B;EAAxB,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE8B,UAAU,CAAClC;EAAxB,GACG2B,YAAY,gBAAG,6BAAC,0BAAD;IAAY,MAAM,EAAE;MAACY,GAAG,EAAEZ;IAAN,CAApB;IAAyC,QAAQ,MAAjD;IAAkD,IAAI,EAAE;EAAxD,EAAH,GAAuE,IADtF,CADF,eAIE,6BAAC,iBAAD;IAAM,KAAK,EAAEO,UAAU,CAACpB;EAAxB,GAAoCK,IAApC,CAJF,eAKE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACe,UAAU,CAACb,MAAZ,EAAoB;MAACmB,aAAa,EAAER;IAAhB,CAApB;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACE,UAAU,CAACZ,UAAZ,EAAwB;MAACJ,KAAK,EAAEa;IAAR,CAAxB;EAAb,GAA2DF,KAA3D,CADF,eAEE,6BAAC,IAAD;IAAM,KAAK,EAAEK,UAAU,CAACT,SAAxB;IAAmC,KAAK,EAAEK;EAA1C,EAFF,CALF,CADF;AAYD,CAjCD;;eAmCeJ,Y"}

package/lib/molecule/review-correction-popin/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAgC,0BAA0B,EAAC,MAAM,cAAc,CAAC;AAyPvF,QAAA,MAAM,qBAAqB,kDAMxB,0BAA0B,uBAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAgC,0BAA0B,EAAC,MAAM,cAAc,CAAC;AA4PvF,QAAA,MAAM,qBAAqB,kDAMxB,0BAA0B,uBAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/molecule/review-correction-popin/index.native.js

@@ -9,6 +9,8 @@ var _reactNative = require("react-native");
 
 var _novaIcons = require("@coorpacademy/nova-icons");
 
+var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
+
 var _index = _interopRequireDefault(require("../../atom/html/index.native"));
 
 var _index2 = _interopRequireDefault(require("../../atom/text/index.native"));
@@ -17,8 +19,6 @@ var _index3 = _interopRequireDefault(require("../../hoc/touchable/index.native")
 
 var _templateContext = require("../../template/app-review/template-context");
 
-var _useUpdateOpacity = _interopRequireDefault(require("../../behaviours/use-update-opacity.native"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -198,17 +198,16 @@ const KlfButton = ({
   styleSheet
 }) => {
   const [displayTooltip, setDisplayTooltip] = (0, _react.useState)(false);
-  const {
-    fadeIn,
-    fadeOut,
-    animatedOpacity
-  } = (0, _useUpdateOpacity.default)({
+  const fadeIn = (0, _reactNativeAnimation.useAnimateProp)({
+    property: 'opacity',
+    fromValue: 0,
+    toValue: 1,
     easing: _reactNative.Easing.bezier(0.25, 1, 0.5, 1)
   });
   const handlePressKey = (0, _react.useCallback)(() => {
     setDisplayTooltip(!displayTooltip);
-    !displayTooltip ? fadeIn() : fadeOut();
-  }, [displayTooltip, fadeIn, fadeOut]);
+    !displayTooltip ? fadeIn.start() : fadeIn.revert();
+  }, [displayTooltip, fadeIn]);
   const {
     buttonKlf,
     buttonKlfActive,
@@ -227,7 +226,7 @@ const KlfButton = ({
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: containerButtonKlf
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
-    style: [containerTooltip, animatedOpacity]
+    style: [containerTooltip, fadeIn.animatedStyle]
   }, /*#__PURE__*/_react.default.createElement(_index3.default, {
     style: buttonTooltip,
     accessibilityLabel: `aria-label-tooltip`,

package/lib/molecule/review-correction-popin/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","type","StyleSheet","create","wrapper","height","color","colors","white","display","popin","padding","spacing","medium","borderRadius","flexDirection","alignItems","backgroundColor","negative","positive","shadowColor","shadowOpacity","shadowOffset","width","shadowRadius","elevation","correctionSection","iconCircle","justifyContent","opacity","icon","resultLabel","fontSize","fontWeight","lineHeight","marginLeft","textTransform","feedbackSection","marginVertical","labelContainer","alignSelf","paddingHorizontal","tiny","paddingVertical","micro","marginBottom","label","extraBold","htmlInfoMessage","button","base","small","buttonText","cta","bold","textAlign","containerButtonKlf","buttonKlf","buttonKlfActive","buttonKlfText","iconKey","marginRight","containerTooltip","zIndex","position","black","buttonTooltip","bottom","right","htmlTooltipText","text","primary","triangleTooltip","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderTopWidth","borderLeftColor","borderTopColor","borderRightColor","borderBottomColor","transform","rotate","left","top","KlfButton","klf","styleSheet","displayTooltip","setDisplayTooltip","useState","fadeIn","fadeOut","animatedOpacity","useUpdateOpacity","easing","Easing","bezier","handlePressKey","useCallback","tooltip","ICONS","RightIcon","wrong","WrongIcon","ReviewCorrectionPopin","information","next","templateContext","useTemplateContext","setStylesheet","handlePressNext","onClick","Icon","useEffect","_stylesheet","message"],"sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {Animated, Easing, TextStyle, StyleSheet, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon,\n  NovaLineLoginKey1 as KlfIcon\n} from '@coorpacademy/nova-icons';\nimport Html from '../../atom/html/index.native';\nimport {Theme} from '../../variables/theme.native';\nimport Text from '../../atom/text/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport useUpdateOpacity from '../../behaviours/use-update-opacity.native';\nimport {ReviewCorrectionPopinKLFProps, ReviewCorrectionPopinProps} from './prop-types';\n\ninterface StyleSheetType {\n  wrapper: ViewStyle;\n  popin: ViewStyle;\n  correctionSection: ViewStyle;\n  iconCircle: ViewStyle;\n  icon: ViewStyle;\n  resultLabel: TextStyle;\n  feedbackSection: ViewStyle;\n  labelContainer: ViewStyle;\n  label: TextStyle;\n  htmlInfoMessage: TextStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n  buttonKlf: ViewStyle;\n  buttonKlfActive: TextStyle;\n  buttonKlfText: TextStyle;\n  iconKey: ViewStyle;\n  containerTooltip: ViewStyle;\n  buttonTooltip: ViewStyle;\n  containerButtonKlf: ViewStyle;\n  triangleTooltip: ViewStyle;\n  htmlTooltipText: TextStyle;\n}\n\nconst createStyleSheet = (theme: Theme, type: string): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      height: 'auto',\n      color: theme.colors.white,\n      display: 'flex'\n    },\n    popin: {\n      padding: theme.spacing.medium,\n      borderRadius: 16,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowOpacity: 0.5,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 15,\n      elevation: 4\n    },\n    correctionSection: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: '80%'\n    },\n    iconCircle: {\n      width: 60,\n      height: 60,\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      opacity: 0.7,\n      borderRadius: 50\n    },\n    icon: {\n      height: 30,\n      width: 30\n    },\n    resultLabel: {\n      color: theme.colors.white,\n      fontSize: 24,\n      fontWeight: '600',\n      lineHeight: 24,\n      marginLeft: 12,\n      textTransform: 'uppercase'\n    },\n    feedbackSection: {\n      marginVertical: theme.spacing.medium\n    },\n    labelContainer: {\n      alignSelf: 'flex-start',\n      backgroundColor: 'rgba(255, 255, 255, 0.3)',\n      borderRadius: 56,\n      paddingHorizontal: theme.spacing.tiny,\n      paddingVertical: theme.spacing.micro,\n      marginBottom: 8\n    },\n    label: {\n      color: theme.colors.white,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.extraBold,\n      lineHeight: 17\n    },\n    htmlInfoMessage: {\n      color: theme.colors.white,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 19\n    },\n    button: {\n      alignSelf: 'stretch',\n      backgroundColor: theme.colors.white,\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small\n    },\n    buttonText: {\n      color: theme.colors.cta,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    containerButtonKlf: {\n      width: '100%'\n    },\n    buttonKlf: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(255, 255, 255, 0.1)',\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small,\n      marginBottom: theme.spacing.tiny\n    },\n    buttonKlfActive: {\n      backgroundColor:\n        'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'\n    },\n    buttonKlfText: {\n      color: 'white',\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    iconKey: {\n      width: 12,\n      height: 12,\n      marginRight: theme.spacing.tiny\n    },\n    containerTooltip: {\n      zIndex: 30,\n      position: 'relative',\n      shadowColor: theme.colors.black,\n      shadowOpacity: 0.3,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 8\n    },\n    buttonTooltip: {\n      flexDirection: 'column',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      borderRadius: 15,\n      padding: theme.spacing.small,\n      width: '112%',\n      position: 'absolute',\n      bottom: 4,\n      right: -15,\n      zIndex: 20\n    },\n    htmlTooltipText: {\n      color: theme.colors.text.primary,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 22,\n      textAlign: 'center'\n    },\n    triangleTooltip: {\n      width: 0,\n      height: 0,\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderLeftWidth: 13,\n      borderRightWidth: 13,\n      borderBottomWidth: 13,\n      borderTopWidth: 13,\n      borderLeftColor: 'transparent',\n      borderTopColor: 'transparent',\n      borderRightColor: theme.colors.white,\n      borderBottomColor: theme.colors.white,\n      transform: [{rotate: '45deg'}],\n      position: 'absolute',\n      left: 110,\n      top: -20,\n      borderRadius: 4\n    }\n  });\n\nconst KlfButton = ({\n  klf,\n  styleSheet\n}: {\n  klf: ReviewCorrectionPopinKLFProps;\n  styleSheet: StyleSheetType;\n}) => {\n  const [displayTooltip, setDisplayTooltip] = useState(false);\n  const {fadeIn, fadeOut, animatedOpacity} = useUpdateOpacity({\n    easing: Easing.bezier(0.25, 1, 0.5, 1)\n  });\n\n  const handlePressKey = useCallback(() => {\n    setDisplayTooltip(!displayTooltip);\n    !displayTooltip ? fadeIn() : fadeOut();\n  }, [displayTooltip, fadeIn, fadeOut]);\n\n  const {\n    buttonKlf,\n    buttonKlfActive,\n    buttonKlfText,\n    containerButtonKlf,\n    containerTooltip,\n    buttonTooltip,\n    htmlTooltipText,\n    iconKey,\n    triangleTooltip\n  } = styleSheet;\n\n  const {label, tooltip} = klf;\n\n  return (\n    <View style={containerButtonKlf}>\n      <Animated.View style={[containerTooltip, animatedOpacity]}>\n        <Touchable\n          style={buttonTooltip}\n          accessibilityLabel={`aria-label-tooltip`}\n          isHighlight\n          onPress={handlePressKey}\n          testID=\"button-tooltip\"\n        >\n          <Html style={htmlTooltipText}>{tooltip}</Html>\n        </Touchable>\n        <View style={triangleTooltip} />\n      </Animated.View>\n      <Touchable\n        style={displayTooltip ? {...buttonKlf, ...buttonKlfActive} : buttonKlf}\n        accessibilityLabel={`aria-label-${label}`}\n        onPress={handlePressKey}\n        testID=\"button-klf\"\n      >\n        <KlfIcon style={iconKey} color=\"white\" />\n        <Text style={buttonKlfText}>{label}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nconst ICONS = {\n  right: RightIcon,\n  wrong: WrongIcon\n};\n\nconst ReviewCorrectionPopin = ({\n  information,\n  klf,\n  next,\n  type,\n  resultLabel\n}: ReviewCorrectionPopinProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const handlePressNext = next.onClick;\n\n  const Icon = ICONS[type];\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme, type);\n    setStylesheet(_stylesheet);\n  }, [theme, type]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.wrapper}>\n      <View style={styleSheet.popin}>\n        <View style={styleSheet.correctionSection}>\n          <View style={styleSheet.iconCircle}>\n            <Icon\n              style={styleSheet.icon}\n              color={type === 'wrong' ? theme.colors.negative : theme.colors.positive}\n            />\n          </View>\n          <Text style={styleSheet.resultLabel}>{resultLabel}</Text>\n        </View>\n        <View style={styleSheet.feedbackSection} accessibilityLabel=\"answer-information\">\n          <View style={styleSheet.labelContainer} needsOffscreenAlphaCompositing>\n            <Text accessibilityLabel={information.label} style={styleSheet.label}>\n              {information.label}\n            </Text>\n          </View>\n          <Html style={styleSheet.htmlInfoMessage}>{information.message}</Html>\n        </View>\n        {klf && type === 'wrong' ? <KlfButton styleSheet={styleSheet} klf={klf} /> : null}\n        <Touchable\n          style={styleSheet.button}\n          onPress={handlePressNext}\n          accessibilityLabel={next['aria-label']}\n          testID={next['data-name']}\n        >\n          <Text style={styleSheet.buttonText}>{next.label}</Text>\n        </Touchable>\n      </View>\n    </View>\n  );\n};\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","type","StyleSheet","create","wrapper","height","color","colors","white","display","popin","padding","spacing","medium","borderRadius","flexDirection","alignItems","backgroundColor","negative","positive","shadowColor","shadowOpacity","shadowOffset","width","shadowRadius","elevation","correctionSection","iconCircle","justifyContent","opacity","icon","resultLabel","fontSize","fontWeight","lineHeight","marginLeft","textTransform","feedbackSection","marginVertical","labelContainer","alignSelf","paddingHorizontal","tiny","paddingVertical","micro","marginBottom","label","extraBold","htmlInfoMessage","button","base","small","buttonText","cta","bold","textAlign","containerButtonKlf","buttonKlf","buttonKlfActive","buttonKlfText","iconKey","marginRight","containerTooltip","zIndex","position","black","buttonTooltip","bottom","right","htmlTooltipText","text","primary","triangleTooltip","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderTopWidth","borderLeftColor","borderTopColor","borderRightColor","borderBottomColor","transform","rotate","left","top","KlfButton","klf","styleSheet","displayTooltip","setDisplayTooltip","useState","fadeIn","useAnimateProp","property","fromValue","toValue","easing","Easing","bezier","handlePressKey","useCallback","start","revert","tooltip","animatedStyle","ICONS","RightIcon","wrong","WrongIcon","ReviewCorrectionPopin","information","next","templateContext","useTemplateContext","setStylesheet","handlePressNext","onClick","Icon","useEffect","_stylesheet","message"],"sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {Animated, Easing, TextStyle, StyleSheet, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon,\n  NovaLineLoginKey1 as KlfIcon\n} from '@coorpacademy/nova-icons';\nimport {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport Html from '../../atom/html/index.native';\nimport {Theme} from '../../variables/theme.native';\nimport Text from '../../atom/text/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ReviewCorrectionPopinKLFProps, ReviewCorrectionPopinProps} from './prop-types';\n\ninterface StyleSheetType {\n  wrapper: ViewStyle;\n  popin: ViewStyle;\n  correctionSection: ViewStyle;\n  iconCircle: ViewStyle;\n  icon: ViewStyle;\n  resultLabel: TextStyle;\n  feedbackSection: ViewStyle;\n  labelContainer: ViewStyle;\n  label: TextStyle;\n  htmlInfoMessage: TextStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n  buttonKlf: ViewStyle;\n  buttonKlfActive: TextStyle;\n  buttonKlfText: TextStyle;\n  iconKey: ViewStyle;\n  containerTooltip: ViewStyle;\n  buttonTooltip: ViewStyle;\n  containerButtonKlf: ViewStyle;\n  triangleTooltip: ViewStyle;\n  htmlTooltipText: TextStyle;\n}\n\nconst createStyleSheet = (theme: Theme, type: string): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      height: 'auto',\n      color: theme.colors.white,\n      display: 'flex'\n    },\n    popin: {\n      padding: theme.spacing.medium,\n      borderRadius: 16,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowOpacity: 0.5,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 15,\n      elevation: 4\n    },\n    correctionSection: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: '80%'\n    },\n    iconCircle: {\n      width: 60,\n      height: 60,\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      opacity: 0.7,\n      borderRadius: 50\n    },\n    icon: {\n      height: 30,\n      width: 30\n    },\n    resultLabel: {\n      color: theme.colors.white,\n      fontSize: 24,\n      fontWeight: '600',\n      lineHeight: 24,\n      marginLeft: 12,\n      textTransform: 'uppercase'\n    },\n    feedbackSection: {\n      marginVertical: theme.spacing.medium\n    },\n    labelContainer: {\n      alignSelf: 'flex-start',\n      backgroundColor: 'rgba(255, 255, 255, 0.3)',\n      borderRadius: 56,\n      paddingHorizontal: theme.spacing.tiny,\n      paddingVertical: theme.spacing.micro,\n      marginBottom: 8\n    },\n    label: {\n      color: theme.colors.white,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.extraBold,\n      lineHeight: 17\n    },\n    htmlInfoMessage: {\n      color: theme.colors.white,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 19\n    },\n    button: {\n      alignSelf: 'stretch',\n      backgroundColor: theme.colors.white,\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small\n    },\n    buttonText: {\n      color: theme.colors.cta,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    containerButtonKlf: {\n      width: '100%'\n    },\n    buttonKlf: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(255, 255, 255, 0.1)',\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small,\n      marginBottom: theme.spacing.tiny\n    },\n    buttonKlfActive: {\n      backgroundColor:\n        'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'\n    },\n    buttonKlfText: {\n      color: 'white',\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    iconKey: {\n      width: 12,\n      height: 12,\n      marginRight: theme.spacing.tiny\n    },\n    containerTooltip: {\n      zIndex: 30,\n      position: 'relative',\n      shadowColor: theme.colors.black,\n      shadowOpacity: 0.3,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 8\n    },\n    buttonTooltip: {\n      flexDirection: 'column',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      borderRadius: 15,\n      padding: theme.spacing.small,\n      width: '112%',\n      position: 'absolute',\n      bottom: 4,\n      right: -15,\n      zIndex: 20\n    },\n    htmlTooltipText: {\n      color: theme.colors.text.primary,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 22,\n      textAlign: 'center'\n    },\n    triangleTooltip: {\n      width: 0,\n      height: 0,\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderLeftWidth: 13,\n      borderRightWidth: 13,\n      borderBottomWidth: 13,\n      borderTopWidth: 13,\n      borderLeftColor: 'transparent',\n      borderTopColor: 'transparent',\n      borderRightColor: theme.colors.white,\n      borderBottomColor: theme.colors.white,\n      transform: [{rotate: '45deg'}],\n      position: 'absolute',\n      left: 110,\n      top: -20,\n      borderRadius: 4\n    }\n  });\n\nconst KlfButton = ({\n  klf,\n  styleSheet\n}: {\n  klf: ReviewCorrectionPopinKLFProps;\n  styleSheet: StyleSheetType;\n}) => {\n  const [displayTooltip, setDisplayTooltip] = useState(false);\n  const fadeIn = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    easing: Easing.bezier(0.25, 1, 0.5, 1)\n  });\n\n  const handlePressKey = useCallback(() => {\n    setDisplayTooltip(!displayTooltip);\n    !displayTooltip ? fadeIn.start() : fadeIn.revert();\n  }, [displayTooltip, fadeIn]);\n\n  const {\n    buttonKlf,\n    buttonKlfActive,\n    buttonKlfText,\n    containerButtonKlf,\n    containerTooltip,\n    buttonTooltip,\n    htmlTooltipText,\n    iconKey,\n    triangleTooltip\n  } = styleSheet;\n\n  const {label, tooltip} = klf;\n\n  return (\n    <View style={containerButtonKlf}>\n      <Animated.View style={[containerTooltip, fadeIn.animatedStyle]}>\n        <Touchable\n          style={buttonTooltip}\n          accessibilityLabel={`aria-label-tooltip`}\n          isHighlight\n          onPress={handlePressKey}\n          testID=\"button-tooltip\"\n        >\n          <Html style={htmlTooltipText}>{tooltip}</Html>\n        </Touchable>\n        <View style={triangleTooltip} />\n      </Animated.View>\n      <Touchable\n        style={displayTooltip ? {...buttonKlf, ...buttonKlfActive} : buttonKlf}\n        accessibilityLabel={`aria-label-${label}`}\n        onPress={handlePressKey}\n        testID=\"button-klf\"\n      >\n        <KlfIcon style={iconKey} color=\"white\" />\n        <Text style={buttonKlfText}>{label}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nconst ICONS = {\n  right: RightIcon,\n  wrong: WrongIcon\n};\n\nconst ReviewCorrectionPopin = ({\n  information,\n  klf,\n  next,\n  type,\n  resultLabel\n}: ReviewCorrectionPopinProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const handlePressNext = next.onClick;\n\n  const Icon = ICONS[type];\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme, type);\n    setStylesheet(_stylesheet);\n  }, [theme, type]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.wrapper}>\n      <View style={styleSheet.popin}>\n        <View style={styleSheet.correctionSection}>\n          <View style={styleSheet.iconCircle}>\n            <Icon\n              style={styleSheet.icon}\n              color={type === 'wrong' ? theme.colors.negative : theme.colors.positive}\n            />\n          </View>\n          <Text style={styleSheet.resultLabel}>{resultLabel}</Text>\n        </View>\n        <View style={styleSheet.feedbackSection} accessibilityLabel=\"answer-information\">\n          <View style={styleSheet.labelContainer} needsOffscreenAlphaCompositing>\n            <Text accessibilityLabel={information.label} style={styleSheet.label}>\n              {information.label}\n            </Text>\n          </View>\n          <Html style={styleSheet.htmlInfoMessage}>{information.message}</Html>\n        </View>\n        {klf && type === 'wrong' ? <KlfButton styleSheet={styleSheet} klf={klf} /> : null}\n        <Touchable\n          style={styleSheet.button}\n          onPress={handlePressNext}\n          accessibilityLabel={next['aria-label']}\n          testID={next['data-name']}\n        >\n          <Text style={styleSheet.buttonText}>{next.label}</Text>\n        </Touchable>\n      </View>\n    </View>\n  );\n};\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}

package/lib/organism/review-congrats/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-congrats/index.native.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAoDjD,QAAA,MAAM,cAAc,UAAW,mBAAmB,uBAiJjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-congrats/index.native.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAkEjD,QAAA,MAAM,cAAc,UAAW,mBAAmB,uBA+JjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/organism/review-congrats/index.native.js

@@ -13,6 +13,8 @@ var _lottieReactNative = _interopRequireDefault(require("lottie-react-native"));
 
 var _novaIcons = require("@coorpacademy/nova-icons");
 
+var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
+
 var _templateContext = require("../../template/app-review/template-context");
 
 var _index = _interopRequireDefault(require("../../atom/button/index.native"));
@@ -21,10 +23,6 @@ var _shadow = require("../../variables/shadow");
 
 var _index2 = _interopRequireDefault(require("../../molecule/card-congrats/index.native"));
 
-var _useTranslateVertically = _interopRequireDefault(require("../../behaviours/use-translate-vertically.native"));
-
-var _useUpdateOpacity = _interopRequireDefault(require("../../behaviours/use-update-opacity.native"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -73,6 +71,19 @@ const createStyleSheet = theme => _reactNative.StyleSheet.create({
   }
 });
 
+const fadeIn = {
+  property: 'opacity',
+  fromValue: 0,
+  toValue: 1,
+  duration: 350
+};
+const translateHorizontally = {
+  property: 'translateX',
+  fromValue: 180,
+  toValue: 0,
+  duration: 800
+};
+
 const ReviewCongrats = props => {
   const {
     'aria-label': ariaLabel,
@@ -86,76 +97,53 @@ const ReviewCongrats = props => {
   const {
     theme
   } = (0, _templateContext.useTemplateContext)();
-  const {
-    height: windowHeight
-  } = (0, _reactNative.useWindowDimensions)();
   const [styleSheet, setStylesheet] = (0, _react.useState)(null);
   const [isCongratsTranslationDone, setCongratsTranslationDone] = (0, _react.useState)(false);
   const [isRankShown, setRankShown] = (0, _react.useState)(false);
-  const {
-    translate: translateCongratsUp,
-    animatedY: animatedCongratsY
-  } = (0, _useTranslateVertically.default)({
-    fromValue: windowHeight,
-    toValue: 0,
-    delay: 750,
-    onFinished: () => {
+  const scrollViewRef = (0, _react.useRef)(null);
+  const showCongrats = (0, _reactNativeAnimation.useAnimateProp)({
+    property: 'opacity',
+    fromValue: 0,
+    toValue: 1,
+    duration: 950,
+    onComplete: () => {
       setCongratsTranslationDone(true);
     }
   });
-  const {
-    translate: translateRankUp,
-    animatedY: animatedRankY
-  } = (0, _useTranslateVertically.default)({
-    fromValue: 150,
-    duration: 750,
-    toValue: 0
+  const translateCongrats = (0, _reactNativeAnimation.useTranslateY)({
+    fromValue: 100,
+    toValue: 0,
+    duration: 550
   });
-  const {
-    fadeIn: showRank,
-    animatedOpacity: animatedRankOpacity
-  } = (0, _useUpdateOpacity.default)({
-    onFadeInFinished: () => {
+  const showConfettis = (0, _reactNativeAnimation.useAnimateProp)(fadeIn);
+  const fadeInRank = (0, _reactNativeAnimation.useAnimateProp)(fadeIn);
+  const translateRank = (0, _reactNativeAnimation.useTranslateX)(_extends({}, translateHorizontally, {
+    onComplete: () => {
       setRankShown(true);
+      setTimeout(() => {
+        scrollViewRef?.current?.scrollToEnd();
+      }, 700);
     }
-  });
-  const scrollViewRef = (0, _react.useRef)(null);
-  const {
-    translate: translateStarsUp,
-    animatedY: animatedStarsY
-  } = (0, _useTranslateVertically.default)({
-    fromValue: 150,
-    toValue: 0,
-    duration: 750,
-    delay: 250
-  });
-  const {
-    fadeIn: showStars,
-    animatedOpacity: animatedStarsOpacity
-  } = (0, _useUpdateOpacity.default)({
-    delay: 250
-  });
+  }));
+  const animatedRank = [fadeInRank.animatedStyle, translateRank.animatedStyle];
+  const fadeInStars = (0, _reactNativeAnimation.useAnimateProp)(_extends({}, fadeIn, {
+    delay: 1000
+  }));
+  const translateStars = (0, _reactNativeAnimation.useTranslateX)(_extends({}, translateHorizontally, {
+    delay: 1000
+  }));
+  const showButton1 = (0, _reactNativeAnimation.useAnimateProp)(fadeIn);
+  const showButton2 = (0, _reactNativeAnimation.useAnimateProp)(fadeIn);
+  const congratsSequence = (0, _reactNativeAnimation.sequence)([(0, _reactNativeAnimation.parallel)([showCongrats, translateCongrats]), (0, _reactNativeAnimation.parallel)([showConfettis, fadeInRank, translateRank]), (0, _reactNativeAnimation.parallel)([fadeInStars, translateStars]), (0, _reactNativeAnimation.sequence)([showButton1, showButton2])]);
+  (0, _react.useEffect)(() => {
+    congratsSequence.start(); // (required only once on mount)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   (0, _react.useEffect)(() => {
     const _stylesheet = createStyleSheet(theme);
 
     setStylesheet(_stylesheet);
   }, [theme]);
-  (0, _react.useEffect)(() => {
-    translateCongratsUp();
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (isCongratsTranslationDone) {
-      showRank();
-      translateRankUp();
-    }
-  }, [isCongratsTranslationDone, showRank, translateRankUp]);
-  (0, _react.useEffect)(() => {
-    if (isRankShown) {
-      scrollViewRef?.current?.scrollToEnd();
-      translateStarsUp();
-      showStars();
-    }
-  }, [isRankShown, translateStarsUp, showStars]);
 
   if (!styleSheet) {
     return null;
@@ -164,7 +152,7 @@ const ReviewCongrats = props => {
   const handleContinueRevisingPress = buttonRevising?.onClick || _noop2.default;
   const handleReviseAnotherSkillPress = buttonRevisingSkill?.onClick || _noop2.default;
   return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
-    style: [styleSheet.congrats, animatedCongratsY],
+    style: [styleSheet.congrats, translateCongrats.animatedStyle, showCongrats.animatedStyle],
     accessibilityLabel: ariaLabel
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: styleSheet.title
@@ -175,7 +163,7 @@ const ReviewCongrats = props => {
     style: styleSheet.scrollView,
     contentContainerStyle: styleSheet.scrollViewContent
   }, cardCongratsRank ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
-    style: [animatedRankOpacity, animatedRankY]
+    style: animatedRank
   }, /*#__PURE__*/_react.default.createElement(_index2.default, {
     animationUri: cardCongratsRank.animationLottie.animationSrc,
     text: cardCongratsRank.reviewCardTitle,
@@ -185,7 +173,7 @@ const ReviewCongrats = props => {
     textColor: theme.colors.text.primary,
     direction: "row-reverse"
   })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
-    style: [animatedStarsOpacity, animatedStarsY]
+    style: [fadeInStars.animatedStyle, translateStars.animatedStyle]
   }, /*#__PURE__*/_react.default.createElement(_index2.default, {
     animationUri: isRankShown ? cardCongratsStar.animationLottie.animationSrc : null,
     Icon: _novaIcons.NovaCompositionCoorpacademyStar,
@@ -194,9 +182,11 @@ const ReviewCongrats = props => {
     iconColor: theme.colors.battle,
     textColor: theme.colors.battle,
     direction: "row"
-  }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }))), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: styleSheet.buttons
-  }, buttonRevisingSkill ? /*#__PURE__*/_react.default.createElement(_index.default, {
+  }, buttonRevisingSkill ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: showButton1.animatedStyle
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
     onPress: handleReviseAnotherSkillPress,
     accessibilityLabel: buttonRevisingSkill['aria-label'],
     submitValue: buttonRevisingSkill.label,
@@ -206,13 +196,15 @@ const ReviewCongrats = props => {
     textStyle: {
       color: '#123'
     }
-  }) : null, buttonRevising ? /*#__PURE__*/_react.default.createElement(_index.default, {
+  })) : null, buttonRevising ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: showButton2.animatedStyle
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
     onPress: handleContinueRevisingPress,
     accessibilityLabel: buttonRevising['aria-label'],
     submitValue: buttonRevising.label
-  }) : null), isCongratsTranslationDone ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })) : null), isCongratsTranslationDone ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     pointerEvents: "none",
-    style: styleSheet.confettis
+    style: [styleSheet.confettis, showConfettis.animatedStyle]
   }, /*#__PURE__*/_react.default.createElement(_lottieReactNative.default, {
     source: {
       uri: animationLottie.animationSrc

package/lib/organism/review-congrats/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","congrats","position","width","height","flexDirection","alignItems","paddingVertical","flex","buttons","paddingHorizontal","justifyContent","title","fontWeight","fontSize","lineHeight","marginVertical","color","colors","text","primary","confettis","flexGrow","pointerEvents","scrollView","scrollViewContent","ReviewCongrats","props","ariaLabel","animationLottie","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","useTemplateContext","windowHeight","useWindowDimensions","styleSheet","setStylesheet","useState","isCongratsTranslationDone","setCongratsTranslationDone","isRankShown","setRankShown","translate","translateCongratsUp","animatedY","animatedCongratsY","useTranslateVertically","fromValue","toValue","delay","onFinished","translateRankUp","animatedRankY","duration","fadeIn","showRank","animatedOpacity","animatedRankOpacity","useUpdateOpacity","onFadeInFinished","scrollViewRef","useRef","translateStarsUp","animatedStarsY","showStars","animatedStarsOpacity","useEffect","_stylesheet","current","scrollToEnd","handleContinueRevisingPress","onClick","handleReviseAnotherSkillPress","animationSrc","reviewCardTitle","reviewCardValue","rankSuffix","RankIcon","positive","StarIcon","battle","label","BOX_STYLE","backgroundColor","uri"],"sources":["../../../src/organism/review-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {\n  Animated,\n  ScrollView,\n  StyleSheet,\n  Text,\n  TextStyle,\n  useWindowDimensions,\n  View,\n  ViewStyle\n} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {noop} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport CardCongrats from '../../molecule/card-congrats/index.native';\nimport useTranslateVertically from '../../behaviours/use-translate-vertically.native';\nimport useUpdateOpacity from '../../behaviours/use-update-opacity.native';\nimport {ReviewCongratsProps} from './prop-types';\n\ntype StyleSheetType = {\n  buttons: ViewStyle;\n  congrats: ViewStyle;\n  confettis: ViewStyle;\n  scrollView: ViewStyle;\n  scrollViewContent: ViewStyle;\n  title: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    congrats: {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingVertical: 90,\n      flex: 1\n    },\n    buttons: {\n      width: '100%',\n      paddingHorizontal: 20,\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      flex: 1\n    },\n    title: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      marginVertical: 20,\n      color: theme.colors.text.primary\n    },\n    confettis: {\n      flexGrow: 1,\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'box-none'\n    },\n    scrollView: {\n      height: 300\n    },\n    scrollViewContent: {\n      alignItems: 'center',\n      paddingHorizontal: 40\n    }\n  });\n\nconst ReviewCongrats = (props: ReviewCongratsProps) => {\n  const {\n    'aria-label': ariaLabel,\n    animationLottie,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const {theme} = useTemplateContext();\n  const {height: windowHeight} = useWindowDimensions();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [isCongratsTranslationDone, setCongratsTranslationDone] = useState<boolean>(false);\n  const [isRankShown, setRankShown] = useState<boolean>(false);\n\n  const {translate: translateCongratsUp, animatedY: animatedCongratsY} = useTranslateVertically({\n    fromValue: windowHeight,\n    toValue: 0,\n    delay: 750,\n    onFinished: () => {\n      setCongratsTranslationDone(true);\n    }\n  });\n\n  const {translate: translateRankUp, animatedY: animatedRankY} = useTranslateVertically({\n    fromValue: 150,\n    duration: 750,\n    toValue: 0\n  });\n\n  const {fadeIn: showRank, animatedOpacity: animatedRankOpacity} = useUpdateOpacity({\n    onFadeInFinished: () => {\n      setRankShown(true);\n    }\n  });\n\n  const scrollViewRef = useRef<ScrollView>(null);\n\n  const {translate: translateStarsUp, animatedY: animatedStarsY} = useTranslateVertically({\n    fromValue: 150,\n    toValue: 0,\n    duration: 750,\n    delay: 250\n  });\n\n  const {fadeIn: showStars, animatedOpacity: animatedStarsOpacity} = useUpdateOpacity({\n    delay: 250\n  });\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  useEffect(() => {\n    translateCongratsUp();\n  }, []);\n\n  useEffect(() => {\n    if (isCongratsTranslationDone) {\n      showRank();\n      translateRankUp();\n    }\n  }, [isCongratsTranslationDone, showRank, translateRankUp]);\n\n  useEffect(() => {\n    if (isRankShown) {\n      scrollViewRef?.current?.scrollToEnd();\n      translateStarsUp();\n      showStars();\n    }\n  }, [isRankShown, translateStarsUp, showStars]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handleContinueRevisingPress = buttonRevising?.onClick || noop;\n  const handleReviseAnotherSkillPress = buttonRevisingSkill?.onClick || noop;\n\n  return (\n    <Animated.View style={[styleSheet.congrats, animatedCongratsY]} accessibilityLabel={ariaLabel}>\n      <Text style={styleSheet.title}>{title}</Text>\n      <ScrollView\n        ref={scrollViewRef}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        style={styleSheet.scrollView}\n        contentContainerStyle={styleSheet.scrollViewContent}\n      >\n        {cardCongratsRank ? (\n          <Animated.View style={[animatedRankOpacity, animatedRankY]}>\n            <CardCongrats\n              animationUri={cardCongratsRank.animationLottie.animationSrc}\n              text={cardCongratsRank.reviewCardTitle}\n              value={`${cardCongratsRank.reviewCardValue} ${cardCongratsRank.rankSuffix}`}\n              Icon={RankIcon}\n              iconColor={theme.colors.positive}\n              textColor={theme.colors.text.primary}\n              direction=\"row-reverse\"\n            />\n          </Animated.View>\n        ) : null}\n        <Animated.View style={[animatedStarsOpacity, animatedStarsY]}>\n          <CardCongrats\n            animationUri={isRankShown ? cardCongratsStar.animationLottie.animationSrc : null}\n            Icon={StarIcon}\n            text={cardCongratsStar.reviewCardTitle}\n            value={cardCongratsStar.reviewCardValue}\n            iconColor={theme.colors.battle}\n            textColor={theme.colors.battle}\n            direction=\"row\"\n          />\n        </Animated.View>\n      </ScrollView>\n\n      <View style={styleSheet.buttons}>\n        {buttonRevisingSkill ? (\n          <Button\n            onPress={handleReviseAnotherSkillPress}\n            accessibilityLabel={buttonRevisingSkill['aria-label']}\n            submitValue={buttonRevisingSkill.label}\n            style={{...BOX_STYLE, backgroundColor: '#fff'}}\n            textStyle={{color: '#123'}}\n          />\n        ) : null}\n        {buttonRevising ? (\n          <Button\n            onPress={handleContinueRevisingPress}\n            accessibilityLabel={buttonRevising['aria-label']}\n            submitValue={buttonRevising.label}\n          />\n        ) : null}\n      </View>\n\n      {isCongratsTranslationDone ? (\n        <View pointerEvents=\"none\" style={styleSheet.confettis}>\n          <LottieView source={{uri: animationLottie.animationSrc}} autoPlay loop={false} />\n        </View>\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default ReviewCongrats;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","congrats","position","width","height","flexDirection","alignItems","paddingVertical","flex","buttons","paddingHorizontal","justifyContent","title","fontWeight","fontSize","lineHeight","marginVertical","color","colors","text","primary","confettis","flexGrow","pointerEvents","scrollView","scrollViewContent","fadeIn","property","fromValue","toValue","duration","translateHorizontally","ReviewCongrats","props","ariaLabel","animationLottie","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","useTemplateContext","styleSheet","setStylesheet","useState","isCongratsTranslationDone","setCongratsTranslationDone","isRankShown","setRankShown","scrollViewRef","useRef","showCongrats","useAnimateProp","onComplete","translateCongrats","useTranslateY","showConfettis","fadeInRank","translateRank","useTranslateX","setTimeout","current","scrollToEnd","animatedRank","animatedStyle","fadeInStars","delay","translateStars","showButton1","showButton2","congratsSequence","sequence","parallel","useEffect","start","_stylesheet","handleContinueRevisingPress","onClick","handleReviseAnotherSkillPress","animationSrc","reviewCardTitle","reviewCardValue","rankSuffix","RankIcon","positive","StarIcon","battle","label","BOX_STYLE","backgroundColor","uri"],"sources":["../../../src/organism/review-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {Animated, ScrollView, StyleSheet, Text, TextStyle, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {noop} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport {\n  sequence,\n  parallel,\n  useAnimateProp,\n  useTranslateY,\n  useTranslateX\n} from '@coorpacademy/react-native-animation';\nimport type {AnimatePropParams} from '@coorpacademy/react-native-animation/es/use-animate-prop';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport CardCongrats from '../../molecule/card-congrats/index.native';\nimport {ReviewCongratsProps} from './prop-types';\n\ntype StyleSheetType = {\n  buttons: ViewStyle;\n  congrats: ViewStyle;\n  confettis: ViewStyle;\n  scrollView: ViewStyle;\n  scrollViewContent: ViewStyle;\n  title: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    congrats: {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingVertical: 90,\n      flex: 1\n    },\n    buttons: {\n      width: '100%',\n      paddingHorizontal: 20,\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      flex: 1\n    },\n    title: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      marginVertical: 20,\n      color: theme.colors.text.primary\n    },\n    confettis: {\n      flexGrow: 1,\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'box-none'\n    },\n    scrollView: {\n      height: 300\n    },\n    scrollViewContent: {\n      alignItems: 'center',\n      paddingHorizontal: 40\n    }\n  });\n\nconst fadeIn: AnimatePropParams = {\n  property: 'opacity',\n  fromValue: 0,\n  toValue: 1,\n  duration: 350\n};\n\nconst translateHorizontally = {\n  property: 'translateX',\n  fromValue: 180,\n  toValue: 0,\n  duration: 800\n};\n\nconst ReviewCongrats = (props: ReviewCongratsProps) => {\n  const {\n    'aria-label': ariaLabel,\n    animationLottie,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [isCongratsTranslationDone, setCongratsTranslationDone] = useState<boolean>(false);\n  const [isRankShown, setRankShown] = useState<boolean>(false);\n\n  const scrollViewRef = useRef<ScrollView>(null);\n\n  const showCongrats = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 950,\n    onComplete: () => {\n      setCongratsTranslationDone(true);\n    }\n  });\n\n  const translateCongrats = useTranslateY({\n    fromValue: 100,\n    toValue: 0,\n    duration: 550\n  });\n\n  const showConfettis = useAnimateProp(fadeIn);\n  const fadeInRank = useAnimateProp(fadeIn);\n  const translateRank = useTranslateX({\n    ...translateHorizontally,\n    onComplete: () => {\n      setRankShown(true);\n      setTimeout(() => {\n        scrollViewRef?.current?.scrollToEnd();\n      }, 700);\n    }\n  });\n\n  const animatedRank = [fadeInRank.animatedStyle, translateRank.animatedStyle];\n\n  const fadeInStars = useAnimateProp({\n    ...fadeIn,\n    delay: 1000\n  });\n\n  const translateStars = useTranslateX({\n    ...translateHorizontally,\n    delay: 1000\n  });\n\n  const showButton1 = useAnimateProp(fadeIn);\n  const showButton2 = useAnimateProp(fadeIn);\n\n  const congratsSequence = sequence([\n    parallel([showCongrats, translateCongrats]),\n    parallel([showConfettis, fadeInRank, translateRank]),\n    parallel([fadeInStars, translateStars]),\n    sequence([showButton1, showButton2])\n  ]);\n\n  useEffect(() => {\n    congratsSequence.start();\n    // (required only once on mount)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handleContinueRevisingPress = buttonRevising?.onClick || noop;\n  const handleReviseAnotherSkillPress = buttonRevisingSkill?.onClick || noop;\n\n  return (\n    <Animated.View\n      style={[styleSheet.congrats, translateCongrats.animatedStyle, showCongrats.animatedStyle]}\n      accessibilityLabel={ariaLabel}\n    >\n      <Text style={styleSheet.title}>{title}</Text>\n      <ScrollView\n        ref={scrollViewRef}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        style={styleSheet.scrollView}\n        contentContainerStyle={styleSheet.scrollViewContent}\n      >\n        {cardCongratsRank ? (\n          <Animated.View style={animatedRank}>\n            <CardCongrats\n              animationUri={cardCongratsRank.animationLottie.animationSrc}\n              text={cardCongratsRank.reviewCardTitle}\n              value={`${cardCongratsRank.reviewCardValue} ${cardCongratsRank.rankSuffix}`}\n              Icon={RankIcon}\n              iconColor={theme.colors.positive}\n              textColor={theme.colors.text.primary}\n              direction=\"row-reverse\"\n            />\n          </Animated.View>\n        ) : null}\n        <Animated.View style={[fadeInStars.animatedStyle, translateStars.animatedStyle]}>\n          <CardCongrats\n            animationUri={isRankShown ? cardCongratsStar.animationLottie.animationSrc : null}\n            Icon={StarIcon}\n            text={cardCongratsStar.reviewCardTitle}\n            value={cardCongratsStar.reviewCardValue}\n            iconColor={theme.colors.battle}\n            textColor={theme.colors.battle}\n            direction=\"row\"\n          />\n        </Animated.View>\n      </ScrollView>\n\n      <Animated.View style={styleSheet.buttons}>\n        {buttonRevisingSkill ? (\n          <Animated.View style={showButton1.animatedStyle}>\n            <Button\n              onPress={handleReviseAnotherSkillPress}\n              accessibilityLabel={buttonRevisingSkill['aria-label']}\n              submitValue={buttonRevisingSkill.label}\n              style={{...BOX_STYLE, backgroundColor: '#fff'}}\n              textStyle={{color: '#123'}}\n            />\n          </Animated.View>\n        ) : null}\n        {buttonRevising ? (\n          <Animated.View style={showButton2.animatedStyle}>\n            <Button\n              onPress={handleContinueRevisingPress}\n              accessibilityLabel={buttonRevising['aria-label']}\n              submitValue={buttonRevising.label}\n            />\n          </Animated.View>\n        ) : null}\n      </Animated.View>\n\n      {isCongratsTranslationDone ? (\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[styleSheet.confettis, showConfettis.animatedStyle]}\n        >\n          <LottieView source={{uri: animationLottie.animationSrc}} autoPlay loop={false} />\n        </Animated.View>\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default ReviewCongrats;\n"],"mappings":"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"}

package/lib/organism/review-slide/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAa,gBAAgB,EAAa,MAAM,cAAc,CAAC;AA6JtE,QAAA,MAAM,KAAK,UAAW,gBAAgB,gBA8CrC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAa,gBAAgB,EAAa,MAAM,cAAc,CAAC;AA+JtE,QAAA,MAAM,KAAK,UAAW,gBAAgB,gBA8CrC,CAAC;AAEF,eAAe,KAAK,CAAC"}