|
| 1 | +import { useEffect, useRef, useState } from 'react'; |
| 2 | +import { Button } from './ui/button'; |
| 3 | + |
| 4 | +const PROMO_CODE = 'DeepSea25'; |
| 5 | +const PROMO_URL = 'https://fishjam.swmansion.com/?utm_source=deep-sea-stories'; |
| 6 | +const DISMISS_STORAGE_KEY = 'promo-widget-dismissed'; |
| 7 | +const PROMO_HIDE_AFTER = new Date('2026-03-19T00:00:00Z'); |
| 8 | + |
| 9 | +const PROMO_DISMISSED_EVENT = 'promo_dismissed'; |
| 10 | +const PROMO_CODE_DISPLAYED_EVENT = 'promo_code_displayed'; |
| 11 | +const PROMO_CODE_COPIED_EVENT = 'promo_code_copied'; |
| 12 | + |
| 13 | +const readDismissedFromStorage = () => { |
| 14 | + return window.localStorage.getItem(DISMISS_STORAGE_KEY) === 'true'; |
| 15 | +}; |
| 16 | + |
| 17 | +const isExpired = Date.now() >= PROMO_HIDE_AFTER.getTime(); |
| 18 | + |
| 19 | +const sendGAEvent = (event: string) => { |
| 20 | + if (typeof window.gtag !== 'function') { |
| 21 | + console.warn('gtag not defined'); |
| 22 | + return; |
| 23 | + } |
| 24 | + |
| 25 | + try { |
| 26 | + window.gtag('event', event, {}); |
| 27 | + } catch (e) { |
| 28 | + console.error(`Failed to send ${event} event`, e); |
| 29 | + } |
| 30 | +}; |
| 31 | + |
| 32 | +const PromoWidget = () => { |
| 33 | + const [promoVisible, setPromoVisible] = useState(false); |
| 34 | + const [dismissed, setDismissed] = useState(readDismissedFromStorage); |
| 35 | + const [copied, setCopied] = useState(false); |
| 36 | + |
| 37 | + const copyResetRef = useRef<number | null>(null); |
| 38 | + |
| 39 | + useEffect(() => { |
| 40 | + return () => { |
| 41 | + if (copyResetRef.current) { |
| 42 | + window.clearTimeout(copyResetRef.current); |
| 43 | + } |
| 44 | + }; |
| 45 | + }, []); |
| 46 | + |
| 47 | + useEffect(() => { |
| 48 | + if (dismissed) { |
| 49 | + window.localStorage.setItem(DISMISS_STORAGE_KEY, 'true'); |
| 50 | + } |
| 51 | + }, [dismissed]); |
| 52 | + |
| 53 | + const triggerCopiedFeedback = () => { |
| 54 | + setCopied(true); |
| 55 | + if (copyResetRef.current) { |
| 56 | + window.clearTimeout(copyResetRef.current); |
| 57 | + } |
| 58 | + copyResetRef.current = window.setTimeout(() => setCopied(false), 2000); |
| 59 | + }; |
| 60 | + |
| 61 | + const fallbackCopy = () => { |
| 62 | + const textarea = document.createElement('textarea'); |
| 63 | + textarea.value = PROMO_CODE; |
| 64 | + textarea.style.position = 'fixed'; |
| 65 | + textarea.style.opacity = '0'; |
| 66 | + document.body.appendChild(textarea); |
| 67 | + textarea.focus(); |
| 68 | + textarea.select(); |
| 69 | + document.execCommand('copy'); |
| 70 | + document.body.removeChild(textarea); |
| 71 | + triggerCopiedFeedback(); |
| 72 | + sendGAEvent(PROMO_CODE_COPIED_EVENT); |
| 73 | + }; |
| 74 | + |
| 75 | + const handleGetPromo = () => { |
| 76 | + sendGAEvent(PROMO_CODE_DISPLAYED_EVENT); |
| 77 | + setPromoVisible(true); |
| 78 | + }; |
| 79 | + |
| 80 | + const handleCopy = async () => { |
| 81 | + try { |
| 82 | + if (navigator.clipboard?.writeText) { |
| 83 | + await navigator.clipboard.writeText(PROMO_CODE); |
| 84 | + sendGAEvent(PROMO_CODE_COPIED_EVENT); |
| 85 | + triggerCopiedFeedback(); |
| 86 | + return; |
| 87 | + } |
| 88 | + } catch (error) { |
| 89 | + console.warn('Failed to copy using clipboard API, falling back.', error); |
| 90 | + } |
| 91 | + |
| 92 | + fallbackCopy(); |
| 93 | + }; |
| 94 | + |
| 95 | + const handleDismiss = () => { |
| 96 | + sendGAEvent(PROMO_DISMISSED_EVENT); |
| 97 | + setDismissed(true); |
| 98 | + }; |
| 99 | + |
| 100 | + if (dismissed || isExpired) { |
| 101 | + return null; |
| 102 | + } |
| 103 | + |
| 104 | + return ( |
| 105 | + <div className="pointer-events-auto text-primary"> |
| 106 | + <div className="relative w-[min(22rem,_calc(100vw-2rem))] rounded-4xl shadow-amber-100/15 border border-border/80 bg-background/90 p-6 shadow-xl backdrop-blur-2xl"> |
| 107 | + <button |
| 108 | + type="button" |
| 109 | + aria-label="Dismiss promo" |
| 110 | + onClick={handleDismiss} |
| 111 | + className="absolute right-3 top-4 rounded-full bg-background/70 px-2 py-1 text-[0.55rem] font-semibold uppercase tracking-[0.2em] text-primary/60 transition hover:text-primary" |
| 112 | + > |
| 113 | + I'm not interested |
| 114 | + </button> |
| 115 | + |
| 116 | + <div className="flex flex-col gap-5 text-sm text-primary/80"> |
| 117 | + <div> |
| 118 | + <p className="font-display text-[0.55rem] uppercase tracking-[0.6em] text-primary/60"> |
| 119 | + Powered by |
| 120 | + </p> |
| 121 | + <a |
| 122 | + className="font-display text-2xl text-primary underline" |
| 123 | + target="_blank" |
| 124 | + rel="noopener" |
| 125 | + href={PROMO_URL} |
| 126 | + > |
| 127 | + Fishjam |
| 128 | + </a> |
| 129 | + <p className="mt-2"> |
| 130 | + The realtime infrastructure behind Deep Sea Stories. |
| 131 | + <br /> |
| 132 | + Build AI-first audio and video experiences without touching WebRTC |
| 133 | + internals. |
| 134 | + </p> |
| 135 | + </div> |
| 136 | + |
| 137 | + <div> |
| 138 | + <p className="mt-1"> |
| 139 | + Save 25% on your first three months of Regular Jar plan. |
| 140 | + </p> |
| 141 | + </div> |
| 142 | + |
| 143 | + {promoVisible ? ( |
| 144 | + <div className="rounded-3xl border border-border/60 bg-background/80 p-4"> |
| 145 | + <div className="flex items-center justify-between text-[0.65rem] font-display uppercase tracking-[0.4em] text-primary/60"> |
| 146 | + <span>Promo code</span> |
| 147 | + </div> |
| 148 | + <div className="mt-3 flex flex-wrap justify-between items-center gap-3"> |
| 149 | + <span className="font-mono text-lg tracking-[0.4em]"> |
| 150 | + {PROMO_CODE} |
| 151 | + </span> |
| 152 | + <Button |
| 153 | + type="button" |
| 154 | + variant="outline" |
| 155 | + className="h-10 px-4 text-[0.6rem] font-semibold uppercase tracking-[0.3em]" |
| 156 | + onClick={handleCopy} |
| 157 | + > |
| 158 | + {copied ? 'Copied' : 'Copy'} |
| 159 | + </Button> |
| 160 | + </div> |
| 161 | + </div> |
| 162 | + ) : ( |
| 163 | + <Button |
| 164 | + type="button" |
| 165 | + onClick={handleGetPromo} |
| 166 | + className="h-11 w-full text-sm font-display" |
| 167 | + > |
| 168 | + Get a promo code |
| 169 | + </Button> |
| 170 | + )} |
| 171 | + <a |
| 172 | + href={PROMO_URL} |
| 173 | + target="_blank" |
| 174 | + rel="noopener" |
| 175 | + className="mt-1 text-center text-[0.75rem] font-semibold tracking-[0.1em] text-primary/70 underline-offset-4 transition-colors hover:text-primary hover:underline" |
| 176 | + > |
| 177 | + Redeem at fishjam.swmansion.com |
| 178 | + </a> |
| 179 | + </div> |
| 180 | + </div> |
| 181 | + </div> |
| 182 | + ); |
| 183 | +}; |
| 184 | + |
| 185 | +export default PromoWidget; |
0 commit comments