AW-136-personal-video-to-trial-page

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

@@ -15,6 +15,7 @@ import { EPlacementKeys } from "@/api/resources/Paywall";
 import { getRandomArbitrary } from "@/services/random-value";
 import Loader from "@/components/Loader";
 import metricService, { EGoals } from "@/services/metric/metricService";
+import PersonalVideo from "../TrialPayment/components/PersonalVideo";
 
 function TrialChoicePage() {
   const dispatch = useDispatch();
@@ -29,6 +30,7 @@ function TrialChoicePage() {
   const { products, isLoading, getText } = usePaywall({
     placementKey: EPlacementKeys["aura.placement.redesign.main"],
   });
+  const { videoUrl } = useSelector(selectors.selectPersonalVideo);
 
   useEffect(() => {
     const randomDelay = getRandomArbitrary(3000, 5000);
@@ -58,17 +60,36 @@ function TrialChoicePage() {
       ref={pageRef}
       style={{
         backgroundColor: gender === "male" ? "#C1E5FF" : "#f7ebff",
+        paddingTop: !videoUrl.length ? "15px" : "0px",
       }}
     >
-      <BackgroundTopBlob
-        width={pageWidth}
-        className={styles["background-top-blob"]}
-        height={180}
-      />
-      <Header className={styles.header} />
+      {!videoUrl.length && (
+        <>
+          <BackgroundTopBlob
+            width={pageWidth}
+            className={styles["background-top-blob"]}
+            height={180}
+          />
+          <Header className={styles.header} />
+        </>
+      )}
+      {!!videoUrl.length && (
+        <PersonalVideo
+          gender={gender}
+          url={videoUrl}
+          classNameContainer={styles["personal-video"]}
+        />
+      )}
       {!isLoading && (
         <>
-          <p className={styles.text} style={{ marginTop: "60px" }}>
+          <p
+            className={styles.text}
+            style={{
+              marginTop: !videoUrl.length
+                ? "60px"
+                : "calc((100% + 84px) / 16* 9 + 16px)",
+            }}
+          >
             {getText("text.0", {
               replacementSelector: "b",
               color: "#1C38EA",
@@ -119,15 +140,17 @@ function TrialChoicePage() {
             />
           </div>
           <p className={styles.email}>{email}</p>
-          <QuestionnaireGreenButton
-            className={styles.button}
-            disabled={isDisabled}
-            onClick={handleNext}
-          >
-            {getText("text.button.1", {
-              color: "#1C38EA",
-            })}
-          </QuestionnaireGreenButton>
+          {!isDisabled && (
+            <QuestionnaireGreenButton
+              className={styles.button}
+              disabled={isDisabled}
+              onClick={handleNext}
+            >
+              {getText("text.button.1", {
+                color: "#1C38EA",
+              })}
+            </QuestionnaireGreenButton>
+          )}
           <p className={styles["auxiliary-text"]}>
             {getText("text.4", {
               color: "#1C38EA",

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

@@ -5,7 +5,7 @@
   min-height: 100dvh;
   height: fit-content;
   background-color: #fff0f0;
-  padding: 15px 42px 60px;
+  padding: 0 42px 126px;
   width: 100%;
   max-width: 500px;
 }
@@ -133,10 +133,17 @@
   font-size: 18px;
   min-height: 0;
   height: 50px;
+  position: fixed;
+  bottom: calc(0dvh + 16px);
+  width: calc(100% - 84px);
 }
 
 .email {
   font-weight: 500;
+  word-break: break-all;
+  white-space: normal;
+  line-height: 1.3;
+  text-align: center;
 }
 
 .loader {
@@ -144,4 +151,12 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+.personal-video {
+  position: fixed !important;
+  top: 0dvh;
+  z-index: 30;
+  margin-top: 0 !important;
+  border-radius: 0 !important;
 }

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

@@ -1,5 +1,6 @@
 .container {
     width: 100%;
+    max-width: 500px;
     margin: 24px 0 16px;
     position: relative;
     overflow: hidden;

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

@@ -69,7 +69,7 @@ function WithPartnerInformation(props: IWithPartnerInformationProps) {
         <ul>
           <li>
             <h6>Zodiac sign</h6>
-            <p>{partnerZodiacSign.length ? partnerZodiacSign : "-"}</p>
+            <p>{partnerZodiacSign?.length ? partnerZodiacSign : "-"}</p>
           </li>
           <li>
             <h6>Gender</h6>

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

@@ -24,7 +24,6 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
 import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 import PaymentModal from "@/components/PaymentModal";
-import PersonalVideo from "./components/PersonalVideo";
 import metricService, { EGoals } from "@/services/metric/metricService";
 
 function TrialPaymentPage() {
@@ -55,7 +54,6 @@ function TrialPaymentPage() {
     "single" | "partner"
   >("single");
   const { subPlan } = useParams();
-  const { videoUrl } = useSelector(selectors.selectPersonalVideo);
 
   useEffect(() => {
     if (subPlan) {
@@ -137,13 +135,6 @@ function TrialPaymentPage() {
       </div>
       <Header className={styles.header} />
       <TrialPaymentHeader buttonClick={openStripeModal} />
-      {!!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

@@ -41,10 +41,4 @@
   top: 32px;
   padding: 0 14px;
   width: 100%;
-}
-
-.personal-video {
-  position: sticky !important;
-  top: 62px;
-  z-index: 30;
 }