diff --git a/src/components/blocked-email.css b/src/components/blocked-email.css index 37fa48a..735fce5 100644 --- a/src/components/blocked-email.css +++ b/src/components/blocked-email.css @@ -94,3 +94,440 @@ transform: scale(1.02); transition: transform 0.3s; } + +/* Hero Section */ +.deposit-page .hero-section { + text-align: center; + margin-bottom: 1.5rem; + padding: 1.5rem 1rem; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 12px; +} + +.deposit-page .hero-subtitle { + font-size: 1.25rem; + margin-top: 1rem; +} + +/* Status Card */ +.status-card { + background: #f8f9fa; + padding: 1rem; + border-radius: 8px; + margin-bottom: 1rem; + border-left: 4px solid #1188E6; + color: #333; +} + +/* Steps */ +.how-it-works { + margin: 1rem 0; +} + +.steps { + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 1rem; +} + +.step { + display: flex; + gap: 1rem; + align-items: flex-start; +} + +.step-number { + background: #1188E6; + color: white; + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + flex-shrink: 0; +} + +.step-content strong { + display: block; + margin-bottom: 0.5rem; + color: #2c3e50; +} + +.step-content p { + margin: 0; + color: #666; +} + +/* Guarantee Box */ +.guarantee-box { + background: #d4edda; + border: 2px solid #28a745; + padding: 1rem; + border-radius: 8px; + margin: 1rem 0; +} + +.guarantee-box h4 { + margin-top: 0; + color: #155724; +} + +/* Why This Works */ +.why-this-works { + background: #e7f3ff; + padding: 1rem; + border-radius: 8px; + margin: 1rem 0; +} + +/* CTA Section */ +.cta-section { + background: #f8f9fa; + padding: 1.5rem; + border-radius: 12px; + text-align: center; + margin: 1.5rem 0; +} + +.cta-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin: 1rem 0; + flex-direction: row; +} + +.learn-more-btn.primary { + background: #1188E6; + color: white; + font-size: 1.1rem; + padding: 1rem 2rem; + min-width: 200px; + flex: 1; + max-width: 250px; +} + +.learn-more-btn.secondary { + background: #6c757d; + color: white; + font-size: 1.1rem; + padding: 1rem 2rem; + min-width: 200px; + flex: 1; + max-width: 250px; +} + +.refund-reminder { + color: #28a745; + font-size: 0.95rem; + margin-top: 1rem; +} + +/* Trust Section */ +.trust-section { + margin: 1.5rem 0; + padding: 1.5rem; + background: white; + border-radius: 8px; +} + +.trust-points { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-top: 1rem; +} + +.trust-point { + text-align: center; +} + +.trust-point .icon { + font-size: 2.5rem; + display: block; + margin-bottom: 0.5rem; +} + +.trust-point strong { + display: block; + margin-bottom: 0.5rem; + color: #2c3e50; +} + +.trust-point p { + color: #666; + font-size: 0.9rem; + margin: 0; +} + +/* Inspiration Section */ +.inspiration-section { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + color: white; + padding: 1.5rem; + border-radius: 12px; + margin: 1.5rem 0; +} + +.inspiration-section a { + color: white; + text-decoration: underline; + font-weight: bold; +} + +/* Success Message */ +.success-message { + background: #d4edda; + border: 2px solid #28a745; + padding: 1.5rem; + border-radius: 12px; + text-align: center; + margin: 1.5rem 0; +} + +.success-message h3 { + color: #155724; + margin-top: 0; +} + +@media (max-width: 768px) { + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .learn-more-btn.primary, + .learn-more-btn.secondary { + min-width: 280px; + max-width: 100%; + flex: none; + } + + .trust-points { + grid-template-columns: 1fr; + } +} + +/* Dark Mode Support */ +@media (prefers-color-scheme: dark) { + .status-card { + background: var(--color-background); + color: var(--color-text); + border-left-color: var(--fyncom-blue); + } + + .how-it-works h3, + .status-card h3 { + color: var(--color-text); + } + + .step-content strong { + color: var(--color-text); + } + + .step-content p { + color: var(--color-text); + opacity: 0.8; + } + + .guarantee-box { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); + } + + .guarantee-box h4 { + color: var(--karmacall-green); + } + + .why-this-works { + background: var(--fyncom-darkest-cyan); + color: var(--color-text); + } + + .why-this-works h4 { + color: var(--color-text); + } + + .cta-section { + background: var(--color-background); + color: var(--color-text); + } + + .cta-section h3 { + color: var(--color-text); + } + + .trust-section { + background: var(--color-background); + color: var(--color-text); + } + + .trust-section h3 { + color: var(--color-text); + } + + .trust-point strong { + color: var(--color-text); + } + + .trust-point p { + color: var(--color-text); + opacity: 0.8; + } + + .success-message { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); + } + + .success-message h3 { + color: var(--karmacall-green); + } +} + +/* Manual Dark Mode Support */ +:root[data-theme="dark"] .status-card { + background: var(--color-background); + color: var(--color-text); + border-left-color: var(--fyncom-blue); +} + +:root[data-theme="dark"] .how-it-works h3, +:root[data-theme="dark"] .status-card h3 { + color: var(--color-text); +} + +:root[data-theme="dark"] .step-content strong { + color: var(--color-text); +} + +:root[data-theme="dark"] .step-content p { + color: var(--color-text); + opacity: 0.8; +} + +:root[data-theme="dark"] .guarantee-box { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); +} + +:root[data-theme="dark"] .guarantee-box h4 { + color: var(--karmacall-green); +} + +:root[data-theme="dark"] .why-this-works { + background: var(--fyncom-darkest-cyan); + color: var(--color-text); +} + +:root[data-theme="dark"] .why-this-works h4 { + color: var(--color-text); +} + +:root[data-theme="dark"] .cta-section { + background: var(--color-background); + color: var(--color-text); +} + +:root[data-theme="dark"] .cta-section h3 { + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-section { + background: var(--color-background); + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-section h3 { + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-point strong { + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-point p { + color: var(--color-text); + opacity: 0.8; +} + +:root[data-theme="dark"] .success-message { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); +} + +:root[data-theme="dark"] .success-message h3 { + color: var(--karmacall-green); +} + +/* Badge styling for v2 */ +.badge { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + background: var(--color-background); + color: var(--color-text); + border: 1px solid var(--color-bar); + border-radius: 20px; + font-size: 0.875rem; + font-weight: 500; +} +/* FAQ Section */ +.faq-section { + margin-top: 2rem; + padding: 1.5rem; + background: #f8f9fa; + border-radius: 8px; +} +.faq-content { + margin-top: 1rem; +} +.faq-item { + margin-bottom: 1rem; +} +.faq-question { + font-weight: bold; + cursor: pointer; +} +.faq-answer { + margin-top: 0.5rem; + padding-left: 1rem; +} +@media (prefers-color-scheme: dark) { + .faq-section { + background: var(--color-background); + color: var(--color-text); + } + .faq-section h3 { + color: var(--color-text); + } + .faq-question { + color: var(--color-text); + } + .faq-answer { + color: var(--color-text); + opacity: 0.85; + } +} +:root[data-theme="dark"] .faq-section { + background: var(--color-background); + color: var(--color-text); +} +:root[data-theme="dark"] .faq-section h3 { + color: var(--color-text); +} +:root[data-theme="dark"] .faq-question { + color: var(--color-text); +} +:root[data-theme="dark"] .faq-answer { + color: var(--color-text); + opacity: 0.85; +} \ No newline at end of file diff --git a/src/pages/make-a-deposit-v2.js b/src/pages/make-a-deposit-v2.js new file mode 100644 index 0000000..8e2b485 --- /dev/null +++ b/src/pages/make-a-deposit-v2.js @@ -0,0 +1,314 @@ +import React, { useEffect, useMemo, useState } from "react" +import Header from "../components/header" +import Footer from "../components/footer" +import Seo from "../components/seo" +import "../components/blocked-email.css" +import { MakeADepositModal } from "../components/Modal" +import { logEvent } from "../utils/analytics" + +/** + * MakeADepositV2 – a UX-focused redesign for your refundable deposit page. + * + * Highlights + * - Clear hero + promise + * - Smart empty-state (no backend data) with explainer + self-serve input + * - Data-present state with rich summary, trust copy, and strong CTAs + * - Inline FAQ and "How it works" with visual steps + * - Subtle motion + modern card layout + * - Handles loading, error, and edge cases + */ + +const API_URL = process.env.GATSBY_API_URL + +export default function MakeADepositV2() { + const [details, setDetails] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [isModalOpen, setIsModalOpen] = useState(false) + const [manualId, setManualId] = useState("") + + // Parse depositId from URL on first load + useEffect(() => { + const search = new URLSearchParams(window.location.search) + const id = search.get("depositId") + if (id) fetchDetails(id) + else setLoading(false) + }, []) + + async function fetchDetails(id) { + try { + setLoading(true) + const res = await fetch(`${API_URL}email/blocked/${id}`) + if (!res.ok) throw new Error("Failed to fetch deposit details") + const data = await res.json() + setDetails(data) + setError(null) + } catch (e) { + setError(e?.message ?? "Something went wrong") + setDetails(null) + } finally { + setLoading(false) + } + } + + const stripeUrl = useMemo(() => { + if (!details) return "https://buy.stripe.com/fZe5obgilbJa5lm001" // default checkout + const email = encodeURIComponent(details.senderEmailRaw || details.senderEmail || "") + const ref = encodeURIComponent(details.blockedEmailLogId || "") + return `https://buy.stripe.com/fZe5obgilbJa5lm001?prefilled_email=${email}&client_reference_id=${ref}` + }, [details]) + + const minDeposit = details?.recipientMin + ? Number(details.recipientMin) >= 0.01 + ? Number(details.recipientMin).toFixed(2) + : Number(details.recipientMin).toFixed(5) + : "0.00" + const deadlineDays = details?.daysDeadline ?? 30 + const labelName = details?.labelName || "INBOX" + const secondaryLabel = details?.emailLabel || "FynFiltered" + + function handleNano() { + setIsModalOpen(true) + } + + return ( +
+ +
+
+
+

+ 🎯 Get your email noticed with a refundable deposit +

+

+ Unknown senders stake a tiny deposit to reach the main inbox. If the recipient engages, the sender gets it back. If not, the user keeps it. Simple. +

+
+ 🛡️ Patent-backed + ⏱️ Time-based escrow + 💰 User‑rewarded +
+
+ + {/* Loading state */} + {loading && ( +
+

📧 Loading Email Details...

+

Fetching your deposit details…

+
+ )} + + {/* Error state */} + {!loading && error && ( +
+

⚠️ We couldn't load that link

+

{error}

+
+ )} + + {/* DATA PRESENT */} + {!loading && !error && details && ( +
+
+
+
+

+ This message is waiting in {secondaryLabel} +

+

+ From {details.senderEmail} to {details.recipientEmail} +

+
+
+
Minimum deposit
+
${minDeposit}
+
+
+
+ +
+

How This Works

+
+
+ 1 +
+ 📧 Move to main inbox +

Pay the deposit to move this email to the recipient's {labelName} immediately.

+
+
+
+ 2 +
+ ⏱️ Refund window +

+ If they respond within {deadlineDays} days, your deposit is automatically refunded. +

+
+
+
+ 3 +
+ 💰 User gets paid if ignored +

If there's no response, the recipient keeps a portion as a reward for their time.

+
+
+
+
+ +
+

Choose Your Deposit Method

+ +

+ Remember: Full refund if they respond within {deadlineDays} days +

+ {isModalOpen && setIsModalOpen(false)} />} +
+ +
+

🔒 Why a deposit?

+

It's an economic good‑faith signal that discourages spam. If the recipient engages, you're refunded automatically.

+
+
🛡️ Patent‑backed, time‑based escrow
+
⏱️ Response‑based, automatic refunds
+
💰 Rewards recipients for attention
+
+
+
+ )} + + {/* EMPTY STATE (NO DATA) */} + {!loading && !error && !details && ( +
+
+

Got a FynCom PayCation email?

+

+ Paste your depositId from the link to see your sender/recipient details and complete a deposit. No worries—if they reply, + you're refunded. +

+ +
+ setManualId(e.target.value)} + style={{ flex: 1, minWidth: "200px", padding: "0.75rem", borderRadius: "8px", border: "1px solid #ccc" }} + /> + +
+
+ +
+

How This Works (It's Simple!)

+
+
+ 1 +
+ 💰 Make a tiny deposit +

Stake a small, refundable amount to signal good faith.

+
+
+
+ 2 +
+ 📧 Jump the queue +

Your email moves to the main inbox instantly.

+
+
+
+ 3 +
+ ⏱️ Auto‑refund on reply +

If they respond within the window, you get it back.

+
+
+
+
+ +
+

Why this works

+

+ Spam is cheap to send. A refundable deposit flips the economics—only serious senders stake it. If it's not useful, the user keeps a portion. +

+ +

Prefer crypto? Use Nano (XNO) via the app wallet.

+
+
+ )} + +
+

Why Trust This System?

+
+
+ 🔒 + Secure Payments +

Processed through Stripe & Nano crypto

+
+
+ + Instant Results +

Your email moves to their inbox immediately

+
+
+ 💰 + Fair Pricing +

Tiny amounts that prove you're real

+
+
+
+ +
+

💡 Like This Idea?

+

+ Tired of spam in your own inbox? You can use this same system! Sign up at app.fyncom.com to + filter your emails and earn rewards when genuine senders reach out to you. +

+
+ +
+

FAQ

+
+
+ Do I lose money if they never read it? +

+ If there's no response in the refund window, the recipient keeps a portion of the deposit as a reward for their time. +

+
+
+ What if I'm an approved contact? +

Known contacts are automatically whitelisted—no deposit needed.

+
+
+ Is this secure? +

Deposits are processed through trusted providers, and refunds are automatic based on recipient engagement.

+
+
+
+
+
+ ) +} diff --git a/src/pages/make-a-deposit-v3.js b/src/pages/make-a-deposit-v3.js new file mode 100644 index 0000000..c44993c --- /dev/null +++ b/src/pages/make-a-deposit-v3.js @@ -0,0 +1,312 @@ +import React, { useEffect, useMemo, useState } from "react" +import Header from "../components/header" +import Footer from "../components/footer" +import Seo from "../components/seo" +import "../components/blocked-email.css" +import { MakeADepositModal } from "../components/Modal" +import { logEvent } from "../utils/analytics" + +/** + * MakeADepositV3 – a UX-focused redesign for your refundable deposit page. + * + * Highlights + * - Clear hero + promise + * - Smart empty-state (no backend data) with explainer + self-serve input + * - Data-present state with rich summary, trust copy, and strong CTAs + * - Inline FAQ and "How it works" with visual steps + * - Subtle motion + modern card layout + * - Handles loading, error, and edge cases + */ + +const API_URL = process.env.GATSBY_API_URL + +export default function MakeADepositV2() { + const [details, setDetails] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [isModalOpen, setIsModalOpen] = useState(false) + const [manualId, setManualId] = useState("") + + // Parse depositId from URL on first load + useEffect(() => { + const search = new URLSearchParams(window.location.search) + const id = search.get("depositId") + if (id) fetchDetails(id) + else setLoading(false) + }, []) + + async function fetchDetails(id) { + try { + setLoading(true) + const res = await fetch(`${API_URL}email/blocked/${id}`) + if (!res.ok) throw new Error("Failed to fetch deposit details") + const data = await res.json() + setDetails(data) + setError(null) + } catch (e) { + setError(e?.message ?? "Something went wrong") + setDetails(null) + } finally { + setLoading(false) + } + } + + const stripeUrl = useMemo(() => { + if (!details) return "https://buy.stripe.com/fZe5obgilbJa5lm001" // default checkout + const email = encodeURIComponent(details.senderEmailRaw || details.senderEmail || "") + const ref = encodeURIComponent(details.blockedEmailLogId || "") + return `https://buy.stripe.com/fZe5obgilbJa5lm001?prefilled_email=${email}&client_reference_id=${ref}` + }, [details]) + + const minDeposit = details?.recipientMin ? Number(details.recipientMin).toFixed(2) : "0.00" + const deadlineDays = details?.daysDeadline ?? 30 + const labelName = details?.labelName || "INBOX" + const secondaryLabel = details?.emailLabel || "FynFiltered" + + function handleNano() { + setIsModalOpen(true) + } + + return ( +
+ +
+
+
+

+ 🎯 Get your email noticed with a refundable deposit +

+

+ Unknown senders stake a tiny deposit to reach the main inbox. If the recipient engages, the sender gets it back. If not, the user keeps it. Simple. +

+
+ 🛡️ Patent-backed + ⏱️ Time-based escrow + 💰 User‑rewarded +
+
+ + {/* Loading state */} + {loading && ( +
+

📧 Loading Email Details...

+

Fetching your deposit details…

+
+ )} + + {/* Error state */} + {!loading && error && ( +
+

⚠️ We couldn't load that link

+

{error}

+
+ )} + + {/* DATA PRESENT */} + {!loading && !error && details && ( +
+
+
+
+

+ This message is waiting in {secondaryLabel} +

+

+ From {details.senderEmail} to {details.recipientEmail} +

+
+
+
Minimum deposit
+
${minDeposit}
+
+
+
+ +
+

How This Works

+
+
+ 1 +
+ 📧 Move to main inbox +

Pay the deposit to move this email to the recipient's {labelName} immediately.

+
+
+
+ 2 +
+ ⏱️ Refund window +

+ If they respond within {deadlineDays} days, your deposit is automatically refunded. +

+
+
+
+ 3 +
+ 💰 User gets paid if ignored +

If there's no response, the recipient keeps a portion as a reward for their time.

+
+
+
+
+ +
+

Choose Your Deposit Method

+ +

+ Remember: Full refund if they respond within {deadlineDays} days +

+ {isModalOpen && setIsModalOpen(false)} />} +
+ +
+

🔒 Why a deposit?

+

It's an economic good‑faith signal that discourages spam. If the recipient engages, you're refunded automatically.

+
+
🛡️ Patent‑backed, time‑based escrow
+
⏱️ Response‑based, automatic refunds
+
💰 Rewards recipients for attention
+
+
+
+ )} + + {/* EMPTY STATE (NO DATA) */} + {!loading && !error && !details && ( +
+
+

Got a FynCom PayCation email?

+

+ Paste your depositId from the link to see your sender/recipient details and complete a deposit. No worries—if they reply, + you're refunded. +

+ +
+ setManualId(e.target.value)} + style={{ flex: 1, minWidth: "200px", padding: "0.75rem", borderRadius: "8px", border: "1px solid #ccc" }} + /> + +
+
+ +
+

How This Works (It's Simple!)

+
+
+ 1 +
+ 💰 Make a tiny deposit +

Stake a small, refundable amount to signal good faith.

+
+
+
+ 2 +
+ 📧 Jump the queue +

Your email moves to the main inbox instantly.

+
+
+
+ 3 +
+ ⏱️ Auto‑refund on reply +

If they respond within the window, you get it back.

+
+
+
+
+ +
+

Why this works

+

+ Spam is cheap to send. A refundable deposit flips the economics—only serious senders stake it. If it's not useful, the user keeps a portion. +

+ +

Prefer crypto? Use Nano (XNO) via the app wallet.

+
+
+ )} + +
+

Why Trust This System?

+
+
+ 🔒 + Secure Payments +

Processed through Stripe & Nano crypto

+
+
+ + Instant Results +

Your email moves to their inbox immediately

+
+
+ 💰 + Fair Pricing +

Tiny amounts that prove you're real

+
+
+
+ +
+

💡 Like This Idea?

+

+ Tired of spam in your own inbox? You can use this same system! Sign up at app.fyncom.com to + filter your emails and earn rewards when genuine senders reach out to you. +

+
+ +
+

FAQ

+
+
+ Do I lose money if they never read it? +

+ If there's no response in the refund window, the recipient keeps a portion of the deposit as a reward for their time. +

+
+
+ What if I'm an approved contact? +

Known contacts are automatically whitelisted—no deposit needed.

+
+
+ Is this secure? +

+ Deposits are processed through trusted providers, and refunds are automatic based on recipient engagement. +

+
+
+
+
+
+ ) +} diff --git a/src/pages/make-a-deposit.js b/src/pages/make-a-deposit.js index 2d72350..5132376 100644 --- a/src/pages/make-a-deposit.js +++ b/src/pages/make-a-deposit.js @@ -14,7 +14,7 @@ import { logEvent } from "../utils/analytics" const MakeADeposit = () => { const [blockedEmailDetails, setBlockedEmailDetails] = useState(null) const location = useLocation() - const [dynamicMessage, setDynamicMessage] = useState("You're seeing this because you've gotten a \"PayCation\" email.") + const [dynamicMessage, setDynamicMessage] = useState("") const [isModalOpen, setIsModalOpen] = useState(false) const [urlToExecute, setUrlToExecute] = useState(null) const [stripeUrl, setStripeUrl] = useState("") @@ -54,24 +54,66 @@ const MakeADeposit = () => { const data = await response.json() const depositPaid = data.depositPaid console.log("deposit paid status: " + depositPaid) - const secondaryLabel = data.emailLabel ? data.emailLabel : "FynFiltered" - const fynMail = "FynMail" + if (depositPaid) { // provide extra info - we'll handle this later as it's an edge case for now } - setBlockedEmailDetails(data) // Update the state, which will re-render the component + setBlockedEmailDetails(data) + + // Format the deposit amount properly (avoiding scientific notation) + const formattedAmount = formatDepositAmount(data.recipientMin) + const newMessage = data.depositPaid - ? `Thank you for your $${data.recipientMin} deposit... [rest of the message]` - : `

Your email (${data.senderEmail}) to ${data.recipientEmail} landed in their - ${data.labelName}, but was moved to a secondary inbox, ${secondaryLabel}, - because they don't know you. -

-

${data.recipientEmail} requires a $${data.recipientMin} - refundable deposit for your email to move to their main inbox and be marked as ${fynMail}. If you pay - this deposit, ${data.recipientEmail} will be notified and they will immediately see your email. If - ${data.recipientEmail} responds to your FynMail within ${data.daysDeadline} days, - you will get your deposit back. Then you may manage your deposit refund by accessing app.fyncom.com. -

` + ? `
+

✓ Deposit Received!

+

Thank you for your ${formattedAmount} deposit. ${data.recipientEmail} has been notified and will see your email in their main +inbox.

+
` + : `
+
+

📧 Your Email Status

+

Your email from ${data.senderEmail} to ${data.recipientEmail} was automatically filtered.

+
+ +
+

How This Works (It's Simple!)

+
+
+ 1 +
+ Make a tiny deposit of ${formattedAmount} +

This moves your email to their main inbox instantly

+
+
+
+ 2 +
+ ${data.recipientEmail} gets notified immediately +

Your message goes to the top of their inbox

+
+
+
+ 3 +
+ Get your full refund when they reply +

If they respond within ${data.daysDeadline} days, you pay nothing

+
+
+
+
+ +
+

💯 100% Money-Back Guarantee

+

You only pay if ${data.recipientEmail} doesn't respond within ${data.daysDeadline} days. + Most people respond within 24-48 hours, so you'll likely get your full deposit back.

+
+ +
+

Why does this work?

+

This micro-deposit proves you're a real person with a genuine message, not spam. It helps ${data.recipientEmail} + prioritize legitimate emails while earning a small reward for managing their inbox effectively.

+
+
` setDynamicMessage(newMessage) } else { throw new Error("Failed to fetch email details") @@ -81,65 +123,188 @@ const MakeADeposit = () => { } } + // Format deposit amount to avoid scientific notation and add context + const formatDepositAmount = amount => { + const numAmount = parseFloat(amount) + + // Format with appropriate decimals + let formatted = numAmount.toFixed(8).replace(/\.?0+$/, "") + + // Add context for very small amounts + if (numAmount <= 0.0001) { + const emailsPer1Cent = 0.01 / numAmount + if (emailsPer1Cent >= 1000) { + const thousands = Math.round(emailsPer1Cent / 1000) + return `$${formatted} (just 1¢ per ${thousands}k emails!)` + } else { + return `$${formatted} (just 1¢ per ${Math.round(emailsPer1Cent)} emails!)` + } + } + + return `$${formatted}` + } + // Function to render the payment button or any other elements based on the blocked email details function renderPaymentButton() { if (blockedEmailDetails) { console.log("data is here from {}", blockedEmailDetails) - // Render your button and use the details from blockedEmailDetails const stripeUrl = `https://buy.stripe.com/fZe5obgilbJa5lm001?prefilled_email=${blockedEmailDetails.senderEmailRaw}&client_reference_id=${blockedEmailDetails.blockedEmailLogId}` - // todo - only use this if you plan to show a button to everyone that visits this page. - const stripeUrlDefault = `https://buy.stripe.com/fZe5obgilbJa5lm001` + return ( - <> - logEvent("Deposit", "Click", "Stripe Deposit")} - > - Deposit cash - - +
+

Choose Your Deposit Method

+
+ logEvent("Deposit", "Click", "Stripe Deposit")} + > + 💳 Deposit with Card + + +
+

+ Remember: Full refund if they respond within {blockedEmailDetails.daysDeadline} days +

{isModalOpen && } - +
) } else { - console.log("no data present") + return ( +
+

Loading email details...

+
+ ) } } return (
-
-

Get Your Email Noticed. Make a Deposit.

- - Pay a small, refundable deposit to get your email to my main inbox & get my immediate attention. If I respond, you get your deposit back. Simple! - -
+
+
+
+

🎯 Get Your Email to the Top of Their Inbox

+
+
+

+ Make a tiny deposit. Get immediate attention. Pay nothing if they respond. +

+
+ 🛡️ Patent-backed + ⏱️ Time-based escrow + 💰 User‑rewarded +
+
+
+ + {dynamicMessage ? ( +
+ ) : ( +
+
+

📧 Your Email Was Filtered

+

+ You're here because someone is using FynCom's email filtering system. Your message was automatically moved to a secondary folder, but you can + get it prioritized! +

+
+ +
+

How This Works (It's Simple!)

+
+
+ 1 +
+ Make a tiny refundable deposit +

This moves your email to their main inbox instantly

+
+
+
+ 2 +
+ Recipient gets notified immediately +

Your message goes to the top of their inbox

+
+
+
+ 3 +
+ Get your full refund when they reply +

If they respond within their deadline, you pay nothing

+
+
+
+
+ +
+

💯 100% Money-Back Guarantee

+

+ You only pay if the recipient doesn't respond within their specified timeframe. Most people respond within 24-48 hours, so you'll likely get + your full deposit back. +

+
+ +
+

Why does this work?

+

+ This micro-deposit proves you're a real person with a genuine message, not spam. It helps email recipients prioritize legitimate messages while + earning a small reward for managing their inbox effectively. +

+
+
+ )} + {renderPaymentButton()} -

- Still here? Why not read something interesting? Ever get annoying calls? Emails? DMs? Read below to find out how we're helping fix that problem by - getting people paid to block scam / spam and respond to good messages. -

-

Why Do Spam Calls Still Exist?

-

...and how can I stop scams, but get useful outreach?

-

- That's the thought that started FynCom on a journey of exploring an emerging market based in "communications + currency" to create trust between - strangers with shared interests. Here's our paper we wrote to record our thought process - it later became{" "} - our 1st patent, app, and is the basis for how we - came to be. Thanks for reading!
- - Team FynCom -

- + +
+

Why Trust This System?

+
+
+ 🔒 + Secure Payments +

Processed through Stripe & Nano crypto

+
+
+ + Instant Results +

Your email moves to their inbox immediately

+
+
+ 💰 + Fair Pricing +

Tiny amounts that prove you're real

+
+
+
+ +
+

💡 Like This Idea?

+

+ Tired of spam in your own inbox? You can use this same system! Sign up at app.fyncom.com to + filter your emails and earn rewards when genuine senders reach out to you. +

+
+ +
+

Why Do Spam Calls & Emails Still Exist?

+

We asked ourselves this question and built a solution. Here's how we're fixing communication for everyone.

+

+ Our approach creates trust between strangers with shared interests using tiny "proof-of-intent" deposits. Read our original white paper that became{" "} + our first patent, powers our KarmaCall app, and + forms the foundation of FynCom. +

+ +