diff --git a/public/locales/compatibility-v2/en/male_en.json b/public/locales/compatibility-v2/en/male_en.json index b8569ad..5331639 100644 --- a/public/locales/compatibility-v2/en/male_en.json +++ b/public/locales/compatibility-v2/en/male_en.json @@ -644,6 +644,7 @@ }, "/trial-choice": { "description": "WIT LAB is the only accurate app with reliable fate line analysis, verified by professionals and guaranteed to provide precise predictions.

WIT LAB has already helped millions of people find happiness and discover the whole truth about their relationships.

Your fate analysis, which will completely change your life, is almost ready! Before we provide it to you, we would like to offer you the opportunity to choose the amount you consider reasonable to try WIT LAB for and which you think is fair for the changes that will happen to you:

You will discover all the most intimate secrets that the stars have prepared for you and solve relationship issues within just one month;

You will once and for all put the finishing touches on unresolved issues and forget about problems that have been haunting you for years (if not decades);

You will save hundreds of dollars on fake and unprofessional astrological predictions and fortune tellers;

You will receive not only a personal analysis but also personalized daily horoscopes, learn who and how is draining your energy, and get other personalized readings.

A trial period costs us , but please choose the amount that suits you best:", + "please-select": "Пожалуйста, выберите", "trial-text": { "v0": "It costs us to compensate our WIT LAB employees for the trial, but please choose the amount you are comfortable with.", "v1": "It cost us to create your compatibility analysis with the help of our WIT LAB specialists. You’re welcome to choose any amount you’re comfortable contributing.", diff --git a/src/components/CompatibilityV2/pages/TrialChoice/index.tsx b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx index d395fb0..869f1a5 100644 --- a/src/components/CompatibilityV2/pages/TrialChoice/index.tsx +++ b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx @@ -200,20 +200,61 @@ function TrialChoice() { })}

-
- +
+ > + {isDisabledButtonClicked && isDisabled && ( +
+ + + + + + {translate("/trial-choice.please-select")} +
+ )} + + + + + } + click={handlePriceItem} + /> +

{translate( `${getProperty("text.1")?.value}.${trialPriceTextVariant}`, diff --git a/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss b/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss index 08b71b9..8569e2f 100644 --- a/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss +++ b/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss @@ -38,14 +38,21 @@ font-size: 20px; font-weight: 500; - &:last-child::after { - content: ""; + // &:last-child::after { + // content: ""; + // position: absolute; + // width: 2px; + // height: 20px; + // background-color: #224e90; + // bottom: -30px; + // left: 50%; + // } + + & > .priceItemArrow { position: absolute; - width: 2px; - height: 20px; - background-color: #224e90; - bottom: -30px; + bottom: -29px; left: 50%; + transform: translateX(-50%); } &.price-item-active { @@ -81,6 +88,47 @@ display: flex; flex-direction: column; gap: 32px; + + &.price-container-disabled { + background: #fef2f2; + border: 1px solid rgba(254, 202, 202, 1); + } +} + +.priceListContainer { + width: fit-content; + margin-inline: auto; + transition: all 0.2s ease; + + &.priceListContainerDisabled { + background: #fef2f2; + border: 1px solid rgba(254, 202, 202, 1); + padding: 20px 12px 10px; + border-radius: 8px; + + & > .priceListContainerDisabledText { + color: rgba(185, 28, 28, 1); + font-size: 16px; + line-height: 24px; + display: flex; + align-items: center; + gap: 15px; + padding-left: 6px; + margin-bottom: 20px; + } + + & .price-item { + border: 1px solid rgba(156, 163, 175, 1); + color: #000; + background-color: #fff; + box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1), + 0px 2px 4px 0px rgba(0, 0, 0, 0.1); + + &:last-child { + border-width: 3px; + } + } + } } .auxiliary-text { @@ -128,7 +176,7 @@ bottom: calc(0dvh + 16px); &.button-v1-disabled { - opacity: 0.85; + opacity: 0.2; } } } diff --git a/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx b/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx index dfdacd3..a91bcc1 100644 --- a/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx +++ b/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx @@ -12,6 +12,7 @@ interface PriceItemProps { className?: string; classNameActive?: string; currency: Currency; + arrowElement?: React.ReactNode; click: (id: string) => void; } @@ -22,16 +23,13 @@ function PriceItem({ className = "", classNameActive = "", currency = Currency.USD, + arrowElement, click, }: PriceItemProps): JSX.Element { const dispatch = useDispatch(); const locale = Locale.EN; - const _price = new Price( - roundToWhole(value), - currency, - locale - ); + const _price = new Price(roundToWhole(value), currency, locale); const itemRef = useRef(null); @@ -67,6 +65,7 @@ function PriceItem({ className={compatClassName()} > {removeAfterDot(_price.format())} + {arrowElement}

); } diff --git a/src/components/pages/ABDesign/v1/components/PriceList/index.tsx b/src/components/pages/ABDesign/v1/components/PriceList/index.tsx index 724079f..72c6457 100644 --- a/src/components/pages/ABDesign/v1/components/PriceList/index.tsx +++ b/src/components/pages/ABDesign/v1/components/PriceList/index.tsx @@ -14,6 +14,9 @@ interface PriceListProps { classNamePricesContainer?: string; currency?: Currency; preActiveItems?: string[]; + showArrow?: boolean; + productWidthArrow?: IFunnelPaymentVariant; + arrowElement?: React.ReactNode; click: () => void; } @@ -29,9 +32,13 @@ function PriceList({ classNamePricesContainer = "", preActiveItems = [], currency = Currency.USD, + showArrow = false, + productWidthArrow, + arrowElement, }: PriceListProps): JSX.Element { const dispatch = useDispatch(); - const [activeProductItem, setActiveProductItem] = useState(); + const [activeProductItem, setActiveProductItem] = + useState(); const priceItemClick = (id: string) => { const activeProduct = products.find((item) => item.id === String(id)); @@ -61,6 +68,11 @@ function PriceList({ classNameActive={classNameItemActive} click={priceItemClick} currency={currency} + arrowElement={ + showArrow && productWidthArrow?.id === product.id + ? arrowElement + : null + } /> ))}