Merge branch 'develop' into 'main'
AW-483-484-485-fix-bugs See merge request witapp/aura-webapp!822
This commit is contained in:
Daniil Chemerkin
GitLab
commit
7462a6b3f8
@ -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.<br><br>WIT LAB has already helped millions of people find happiness and discover the whole truth about their relationships.<br><br>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 <trialPeriod1> and which you think is fair for the changes that will happen to you:<br><br>You will discover all the most intimate secrets that the stars have prepared for you and solve relationship issues within just one month;<br><br>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);<br><br>You will save hundreds of dollars on fake and unprofessional astrological predictions and fortune tellers;<br><br>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.<br><br>A <trialPeriod2> trial period costs us <maxTrialPrice>, but please choose the amount that suits you best:",
|
||||
"please-select": "Пожалуйста, выберите",
|
||||
"trial-text": {
|
||||
"v0": "It costs us <price> to compensate our WIT LAB employees for the trial, but please choose the amount you are comfortable with.",
|
||||
"v1": "It cost us <price> to create your compatibility analysis with the help of our WIT LAB specialists. You’re welcome to choose any amount you’re comfortable contributing.",
|
||||
|
||||
@ -200,20 +200,61 @@ function TrialChoice() {
|
||||
})}
|
||||
</p>
|
||||
|
||||
<div className={styles["price-container"]}>
|
||||
<PriceList
|
||||
products={products}
|
||||
activeItem={selectedPrice}
|
||||
classNameItem={`${styles["price-item"]} ${
|
||||
<div className={`${styles["price-container"]}`}>
|
||||
<div
|
||||
className={`${styles.priceListContainer} ${
|
||||
isDisabledButtonClicked && isDisabled
|
||||
? styles["price-item-disabled"]
|
||||
? styles.priceListContainerDisabled
|
||||
: ""
|
||||
}`}
|
||||
classNameItemActive={`${styles["price-item-active"]}`}
|
||||
classNamePricesContainer={styles["prices-container"]}
|
||||
currency={currency}
|
||||
click={handlePriceItem}
|
||||
/>
|
||||
>
|
||||
{isDisabledButtonClicked && isDisabled && (
|
||||
<div className={styles.priceListContainerDisabledText}>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="16" height="16" rx="8" fill="#EF4444" />
|
||||
<path
|
||||
d="M8.75 3C8.75 2.58516 8.41484 2.25 8 2.25C7.58516 2.25 7.25 2.58516 7.25 3V9C7.25 9.41484 7.58516 9.75 8 9.75C8.41484 9.75 8.75 9.41484 8.75 9V3ZM8 12.75C8.24864 12.75 8.4871 12.6512 8.66291 12.4754C8.83873 12.2996 8.9375 12.0611 8.9375 11.8125C8.9375 11.5639 8.83873 11.3254 8.66291 11.1496C8.4871 10.9738 8.24864 10.875 8 10.875C7.75136 10.875 7.5129 10.9738 7.33709 11.1496C7.16127 11.3254 7.0625 11.5639 7.0625 11.8125C7.0625 12.0611 7.16127 12.2996 7.33709 12.4754C7.5129 12.6512 7.75136 12.75 8 12.75Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{translate("/trial-choice.please-select")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PriceList
|
||||
products={products}
|
||||
activeItem={selectedPrice}
|
||||
classNameItem={styles["price-item"]}
|
||||
classNameItemActive={`${styles["price-item-active"]}`}
|
||||
classNamePricesContainer={styles["prices-container"]}
|
||||
currency={currency}
|
||||
showArrow={true}
|
||||
productWidthArrow={products[products.length - 1]}
|
||||
arrowElement={
|
||||
<svg
|
||||
width="16"
|
||||
height="22"
|
||||
viewBox="0 0 16 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={styles.priceItemArrow}
|
||||
>
|
||||
<path
|
||||
d="M8.70711 0.292892C8.31658 -0.0976315 7.68342 -0.0976315 7.29289 0.292892L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292892ZM8 22H9L9 1H8H7L7 22H8Z"
|
||||
fill="#224E90"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
click={handlePriceItem}
|
||||
/>
|
||||
</div>
|
||||
<p className={styles["auxiliary-text"]}>
|
||||
{translate(
|
||||
`${getProperty("text.1")?.value}.${trialPriceTextVariant}`,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<HTMLDivElement>(null);
|
||||
|
||||
@ -67,6 +65,7 @@ function PriceItem({
|
||||
className={compatClassName()}
|
||||
>
|
||||
{removeAfterDot(_price.format())}
|
||||
{arrowElement}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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<IFunnelPaymentVariant>();
|
||||
const [activeProductItem, setActiveProductItem] =
|
||||
useState<IFunnelPaymentVariant>();
|
||||
|
||||
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
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user