Merge branch 'AW-121-personal-video' into 'develop'

AW-121-personal-video

See merge request witapp/aura-webapp!202

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx

@@ -9,9 +9,11 @@ import PlayPauseButton from "../../../../ui/PlayPauseButton";
 interface IPersonalVideoProps {
   gender: string;
   url: string;
+  classNameContainer?: string;
 }
 
-const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
+const PersonalVideo = React.memo<IPersonalVideoProps>(
+  ({ url, gender, classNameContainer = "" }) => {
     const [isPlaying, setIsPlaying] = useState(false);
     const [isStarted, setIsStarted] = useState(false);
     const [isError, setIsError] = useState(false);
@@ -38,7 +40,9 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
     };
 
     return (
-    <div className={`${styles.container} ym-hide-content`}>
+      <div
+        className={`${styles.container} ym-hide-content ${classNameContainer}`}
+      >
         {!isPlaying && !isError && !isStarted && (
           <Loader className={styles.loader} />
         )}
@@ -79,6 +83,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
         )}
       </div>
     );
-});
+  }
+);
 
 export default PersonalVideo;

src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx

@@ -133,7 +133,13 @@ function TrialPaymentPage() {
       />
       <Header className={styles.header} />
       <TrialPaymentHeader buttonClick={openStripeModal} />
-      {!!videoUrl.length && <PersonalVideo gender={gender} url={videoUrl} />}
+      {!!videoUrl.length && (
+        <PersonalVideo
+          gender={gender}
+          url={videoUrl}
+          classNameContainer={styles["personal-video"]}
+        />
+      )}
       {singleOrWithPartner === "partner" && (
         <WithPartnerInformation
           zodiacSign={zodiacSign}

src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css

@@ -36,3 +36,9 @@
   padding: 0 32px;
   width: calc(100% + 36px) !important;
 }
+
+.personal-video {
+  position: sticky !important;
+  top: 62px;
+  z-index: 30;
+}