63 lines
3.1 KiB
TypeScript
63 lines
3.1 KiB
TypeScript
import Title from "@/components/Title"
|
|
import styles from "./styles.module.scss"
|
|
import { IPaywallProduct } from "@/api/resources/Paywall"
|
|
import { useTranslations } from "@/hooks/translations"
|
|
import { ELocalesPlacement } from "@/locales"
|
|
import { useEmailsGeneration } from "@/hooks/emailsGeneration/useEmailsGeneration"
|
|
|
|
interface IEmailsListProps {
|
|
products: Array<IPaywallProduct & { weight: number }>
|
|
}
|
|
|
|
function EmailsList({ products }: IEmailsListProps) {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
|
|
const {
|
|
displayEmails,
|
|
countBoughtEmails
|
|
} = useEmailsGeneration(products);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.header}>
|
|
<Title className={styles.title} variant="h2">
|
|
{translate("/trial-choice.v1.emails_list.title", {
|
|
count: countBoughtEmails
|
|
})}
|
|
</Title>
|
|
</div>
|
|
<p className={styles.description}>
|
|
{translate("/trial-choice.v1.emails_list.description", {
|
|
count: displayEmails?.length
|
|
})}
|
|
</p>
|
|
<div className={styles.emails}>
|
|
{displayEmails.map((item) => (
|
|
<div key={item.id} className={`${styles.emailContainer} ${item.willBeRemoved ? styles.removed : ""}`}>
|
|
<div className={styles.priceContainer}>
|
|
{item.willBeRemoved && (
|
|
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect
|
|
width="17"
|
|
height="17"
|
|
rx="8.5"
|
|
fill="#62DFA1"
|
|
/>
|
|
<path d="M7.2586 12C7.08625 12 6.9139 11.9285 6.78205 11.785L4.19724 8.96395C4.13481 8.89628 4.0852 8.8154 4.05132 8.7261C4.01745 8.63679 4 8.54086 4 8.44395C4 8.34704 4.01745 8.2511 4.05132 8.1618C4.0852 8.07249 4.13481 7.99162 4.19724 7.92394C4.32473 7.78583 4.49574 7.70853 4.67379 7.70853C4.85184 7.70853 5.02285 7.78583 5.15034 7.92394L7.2586 10.2245L11.8491 5.21541C11.9766 5.0773 12.1476 5 12.3256 5C12.5037 5 12.6747 5.0773 12.8022 5.21541C12.8648 5.28298 12.9145 5.36382 12.9485 5.45314C12.9825 5.54246 13 5.63844 13 5.73541C13 5.83239 12.9825 5.92837 12.9485 6.01769C12.9145 6.10701 12.8648 6.18785 12.8022 6.25542L7.73515 11.7845C7.60814 11.9234 7.43683 12.0009 7.2586 12Z" fill="#F4F4F4" />
|
|
</svg>
|
|
)}
|
|
<div className={styles.price}>
|
|
${item.price.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
<p className={styles.email}>
|
|
{item.email}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default EmailsList |