Merge pull request #67 from pennyteenycat/develop

Develop

src/app/[locale]/(email-marketing)/em/(soulmate)/s/v1/landing/page.tsx

@@ -12,12 +12,13 @@ import {
   SpecialOffer,
   Statistics,
   WhatGet,
-} from "@/components/domains/email-marketing/compatibility/v2";
+} from "@/components/domains/email-marketing/soulmate/v1";
 import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders";
 import {
   IFunnelPaymentPlacement,
   IFunnelPaymentVariant,
 } from "@/entities/session/funnel/types";
+import { loadUser } from "@/entities/user/loaders";
 import { Currency, ELocalesPlacement } from "@/types";
 
 import styles from "./page.module.scss";
@@ -26,11 +27,18 @@ const payload = {
   funnel: ELocalesPlacement.EmailMarketingSoulmateV1,
 };
 
+function getUsernameFromEmail(email: string): string {
+  const localPart = email.split("@")[0];
+  return `@${localPart}`;
+}
+
 export default async function EmailMarketingSoulmateV1Landing() {
-  const payment = (await loadFunnelPaymentById(
-    payload,
-    "main"
-  )) as IFunnelPaymentPlacement | null;
+  const [payment, user] = await Promise.all([
+    loadFunnelPaymentById(payload, "main") as Promise<IFunnelPaymentPlacement | null>,
+    loadUser(),
+  ]);
+
+  const username = getUsernameFromEmail(user.email);
 
   const variant = payment?.variants?.[0];
   const currency = payment?.currency || Currency.USD;
@@ -43,7 +51,7 @@ export default async function EmailMarketingSoulmateV1Landing() {
       <HeaderTimer />
       <Header />
       <HiBlock />
-      <WhatGet />
+      <WhatGet username={username} />
       <SpecialOffer
         variant={variant as IFunnelPaymentVariant}
         currency={currency}

src/app/[locale]/(email-marketing)/em/(soulmate)/s/v1/special-offer/page.tsx

@@ -5,7 +5,7 @@ import {
   HeaderTimer,
   PricingSummary,
   SpecialOfferButtonWrapper,
-} from "@/components/domains/email-marketing/compatibility/v2";
+} from "@/components/domains/email-marketing/soulmate/v1";
 import { Typography } from "@/components/ui";
 import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders";
 import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types";
@@ -14,8 +14,6 @@ import { getPeriodTextServer } from "@/shared/utils/period-server";
 import { getFormattedPrice } from "@/shared/utils/price";
 import { Currency, ELocalesPlacement } from "@/types";
 
-import GuaranteeIcon from "./guarantee.svg";
-
 import styles from "./page.module.scss";
 
 const payload = {
@@ -55,7 +53,39 @@ export default async function SpecialOfferPage() {
           {t("start-trial", { days: trialInterval })}
         </Typography>
         <Typography as="p" className={styles.contentDescription}>
-          <GuaranteeIcon />
+          <svg
+            width="20"
+            height="23"
+            viewBox="0 0 20 23"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <mask
+              id="mask0_339_96"
+              style={{ maskType: "luminance" }}
+              maskUnits="userSpaceOnUse"
+              x="0"
+              y="0"
+              width="20"
+              height="23"
+            >
+              <path d="M0 0H20V22.6667H0V0Z" fill="white" />
+            </mask>
+            <g mask="url(#mask0_339_96)">
+              <path
+                d="M15.2679 1.12718C13.3208 1.12718 11.4571 0.727467 10 0C8.54335 0.727467 6.67945 1.12718 4.73211 1.12718C3.01673 1.12718 1.36526 0.816768 0 0.245102V9.65372C0 15.7775 4.47844 21.5946 10 22.6664C15.5218 21.5946 20 15.7775 20 9.65372V0.245102C18.635 0.816768 16.9835 1.12718 15.2679 1.12718Z"
+                fill="#00AE37"
+              />
+            </g>
+            <path
+              d="M8.03704 15.101L3.87109 10.9977L5.11941 9.76813L8.03704 12.6419L14.8802 5.90137L16.1285 7.13091L8.03704 15.101Z"
+              fill="white"
+            />
+            <path
+              d="M13.9968 20.9727C17.2096 18.7979 19.5429 14.9801 19.9398 10.8858L16.1286 7.13184L8.03711 15.1019L13.9968 20.9727Z"
+              fill="#008E28"
+            />
+          </svg>
           {t("cancel-anytime")}
         </Typography>
 

src/components/domains/email-marketing/compatibility/v2/MoneyBackGuarantee/MoneyBackGuarantee.tsx

@@ -1,51 +0,0 @@
-import { getTranslations } from "next-intl/server";
-
-import { Typography } from "@/components/ui";
-import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";
-
-import GuaranteeIcon from "./guarantee.svg";
-
-import styles from "./MoneyBackGuarantee.module.scss";
-
-export default async function MoneyBackGuarantee() {
-  const t = await getTranslations(
-    translatePathEmailMarketingSoulmateV1("Landing.money-back-guarantee")
-  );
-  return (
-    <div className={styles.container}>
-      <div className={styles.iconContainer}>
-        <GuaranteeIcon />
-      </div>
-      <Typography as="h3" color="white" className={styles.title}>
-        {t("title")}
-      </Typography>
-      <Typography as="p" className={styles.term}>
-        {t("term")}
-      </Typography>
-      <div className={styles.descriptionContainer}>
-        <Typography as="p" className={styles.description}>
-          {t.rich("description", {
-            bold: chunks => <b>{chunks}</b>,
-          })}
-        </Typography>
-      </div>
-      <div className={styles.footer}>
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125L7.53125 10.5312C7.2375 10.825 6.7625 10.825 6.47188 10.5312L4.47188 8.53125C4.17813 8.2375 4.17813 7.7625 4.47188 7.47188C4.76562 7.18125 5.24062 7.17813 5.53125 7.47188L7 8.94063L10.4688 5.46875C10.7625 5.175 11.2375 5.175 11.5281 5.46875C11.8187 5.7625 11.8219 6.2375 11.5281 6.52812L11.5312 6.53125Z"
-            fill="#BBF7D0"
-          />
-        </svg>
-        <Typography as="p" className={styles.text}>
-          {t("footer")}
-        </Typography>
-      </div>
-    </div>
-  );
-}

src/components/domains/email-marketing/soulmate/v1/MoneyBackGuarantee/MoneyBackGuarantee.tsx

@@ -0,0 +1,120 @@
+import { getTranslations } from "next-intl/server";
+
+import { Typography } from "@/components/ui";
+import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";
+
+import styles from "./MoneyBackGuarantee.module.scss";
+
+export default async function MoneyBackGuarantee() {
+  const t = await getTranslations(
+    translatePathEmailMarketingSoulmateV1("Landing.money-back-guarantee")
+  );
+  return (
+    <div className={styles.container}>
+      <div className={styles.iconContainer}>
+        <svg
+          width="48"
+          height="52"
+          viewBox="0 0 48 52"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g filter="url(#filter0_d_334_11403)">
+            <mask
+              id="mask0_334_11403"
+              style={{ maskType: "luminance" }}
+              maskUnits="userSpaceOnUse"
+              x="9"
+              y="7"
+              width="30"
+              height="34"
+            >
+              <path d="M9 7H39V41H9V7Z" fill="white" />
+            </mask>
+            <g mask="url(#mask0_334_11403)">
+              <path
+                d="M31.9018 8.69077C28.9812 8.69077 26.1857 8.0912 24 7C21.815 8.0912 19.0192 8.69077 16.0982 8.69077C13.5251 8.69077 11.0479 8.22515 9 7.36765V21.4806C9 30.6662 15.7177 39.3919 24 40.9996C32.2827 39.3919 39 30.6662 39 21.4806V7.36765C36.9525 8.22515 34.4753 8.69077 31.9018 8.69077Z"
+                fill="#00AE37"
+              />
+            </g>
+            <path
+              d="M21.056 29.652L14.8071 23.497L16.6796 21.6527L21.056 25.9633L31.3208 15.8525L33.1933 17.6969L21.056 29.652Z"
+              fill="white"
+            />
+            <path
+              d="M29.9952 38.4586C34.8143 35.1964 38.3144 29.4696 38.9098 23.3282L33.1929 17.6973L21.0557 29.6524L29.9952 38.4586Z"
+              fill="#008E28"
+            />
+          </g>
+          <defs>
+            <filter
+              id="filter0_d_334_11403"
+              x="0"
+              y="0"
+              width="48"
+              height="52"
+              filterUnits="userSpaceOnUse"
+              colorInterpolationFilters="sRGB"
+            >
+              <feFlood floodOpacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha"
+              />
+              <feOffset dy="2" />
+              <feGaussianBlur stdDeviation="4.5" />
+              <feComposite in2="hardAlpha" operator="out" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="BackgroundImageFix"
+                result="effect1_dropShadow_334_11403"
+              />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect1_dropShadow_334_11403"
+                result="shape"
+              />
+            </filter>
+          </defs>
+        </svg>
+      </div>
+      <Typography as="h3" color="white" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography as="p" className={styles.term}>
+        {t("term")}
+      </Typography>
+      <div className={styles.descriptionContainer}>
+        <Typography as="p" className={styles.description}>
+          {t.rich("description", {
+            bold: chunks => <b>{chunks}</b>,
+          })}
+        </Typography>
+      </div>
+      <div className={styles.footer}>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125L7.53125 10.5312C7.2375 10.825 6.7625 10.825 6.47188 10.5312L4.47188 8.53125C4.17813 8.2375 4.17813 7.7625 4.47188 7.47188C4.76562 7.18125 5.24062 7.17813 5.53125 7.47188L7 8.94063L10.4688 5.46875C10.7625 5.175 11.2375 5.175 11.5281 5.46875C11.8187 5.7625 11.8219 6.2375 11.5281 6.52812L11.5312 6.53125Z"
+            fill="#BBF7D0"
+          />
+        </svg>
+        <Typography as="p" className={styles.text}>
+          {t("footer")}
+        </Typography>
+      </div>
+    </div>
+  );
+}

src/components/domains/email-marketing/soulmate/v1/SearchCompatiblePartnerCard/SearchCompatiblePartnerCard.tsx

@@ -9,9 +9,6 @@ import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/transl
 
 import styles from "./SearchCompatiblePartnerCard.module.scss";
 
-// TODO
-const username = "@annAgejsdbvjsbdv";
-
 interface IBar {
   text: string;
   percent: string;
@@ -21,7 +18,13 @@ interface IBar {
   };
 }
 
-export default function SearchCompatiblePartnerCard() {
+interface ISearchCompatiblePartnerCardProps {
+  username: string;
+}
+
+export default function SearchCompatiblePartnerCard({
+  username,
+}: ISearchCompatiblePartnerCardProps) {
   const t = useTranslations(
     translatePathEmailMarketingSoulmateV1(
       "Landing.what-get.search-compatible-partner"

src/components/domains/email-marketing/soulmate/v1/WhatGet/WhatGet.tsx

@@ -10,7 +10,11 @@ import SearchCompatiblePartnerCard from "../SearchCompatiblePartnerCard/SearchCo
 
 import styles from "./WhatGet.module.scss";
 
-export default async function WhatGet() {
+interface IWhatGetProps {
+  username: string;
+}
+
+export default async function WhatGet({ username }: IWhatGetProps) {
   const t = await getTranslations(
     translatePathEmailMarketingSoulmateV1("Landing.what-get")
   );
@@ -23,7 +27,7 @@ export default async function WhatGet() {
       <DetailedPortraitCard />
       <GuideCard />
       <IndividualAdviceCard />
-      <SearchCompatiblePartnerCard />
+      <SearchCompatiblePartnerCard username={username} />
     </div>
   );
 }