2.9.8

Move info boxes to model popups

assets/js/components/DayTabs.js

@@ -11,6 +11,7 @@
 //    selectedDay            - index of the active day tab
 //    setSelectedDay         - setter for selectedDay
 //    isPro                  - boolean Pro status
+//    openRestore            - opens the "Already subscribed?" restore modal
 //    FREE_DAYS              - number of free days
 //    proPromptDay           - index of locked day that was clicked
 //    setProPromptDay        - setter for proPromptDay
@@ -47,6 +48,7 @@ import htm from '../../vendor/htm.js';
 import { confidenceBand } from '../utils.js';
 import { FREE_DAYS, FILTER_PROFILES, OUTDOORS_VARIANTS, profileButtonOrder, activityVariantKeys, placeVariantKeys, workVariantKeys } from '../config.js';
 import { CloudIcon, PrecipIcon, CustomSelect } from '../components.js';
+import { SubscribeModal } from './SubscribeModal.js';
 
 const html = htm.bind(h);
 
@@ -80,6 +82,7 @@ export function DayTabs({
   days,
   selectedDay, setSelectedDay,
   isPro,
+  openRestore,
   proPromptDay, setProPromptDay,
   proPromptSource, setProPromptSource,
   activeProfile, activateProfile, activeCols,
@@ -447,131 +450,12 @@ export function DayTabs({
           detail: 'Extra unlocks the full 14-day forecast, customisable columns, specialist profiles, and an ad-free view.',
         };
         return html`
-          <div style=${{
-            margin: '12px 0',
-            padding: '18px 22px',
-            background: '#fdf8ee',
-            border: '1.5px solid #c9b08a',
-            borderLeft: '4px solid #c8922a',
-            borderRadius: '0 4px 4px 0',
-            display: 'flex',
-            flexWrap: 'wrap',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: '14px',
-          }}>
-            <div style=${{ flex: '1 1 320px', minWidth: '260px' }}>
-              <div style=${{
-                fontFamily: 'Fraunces, serif',
-                fontStyle: 'italic',
-                fontSize: '19px',
-                fontWeight: 700,
-                color: '#1e1208',
-                marginBottom: '6px',
-                lineHeight: 1.25,
-              }}>
-                <span style=${{ fontStyle: 'normal' }}>🔒</span> ${promptCopy.title}
-              </div>
-              <div style=${{
-                fontFamily: 'Manrope, sans-serif',
-                fontSize: '13.5px',
-                color: '#4a3420',
-                lineHeight: 1.65,
-              }}>
-                ${promptCopy.detail}
-              </div>
-              <div style=${{
-                fontFamily: 'Manrope, sans-serif',
-                fontWeight: 700,
-                fontSize: '11px',
-                textTransform: 'uppercase',
-                letterSpacing: '0.07em',
-                color: '#c8922a',
-                marginTop: '10px',
-              }}>
-                £2 / month  ·  cancel any time
-              </div>
-            </div>
-            <div style=${{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-              alignItems: 'flex-end',
-            }}>
-              <a
-                href="https://buy.stripe.com/9B63cw7vl8k15Ei9DQd7q00"
-                target="_blank"
-                rel="noopener noreferrer"
-                style=${{
-                  display: 'inline-block',
-                  padding: '10px 18px',
-                  background: '#c8922a',
-                  color: '#fff',
-                  textDecoration: 'none',
-                  fontFamily: 'Manrope, sans-serif',
-                  fontWeight: 700,
-                  fontSize: '11px',
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.07em',
-                  borderRadius: '3px',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                Subscribe — £2/month
-              </a>
-              <a
-                href="/restore.php"
-                style=${{
-                  fontFamily: 'Manrope, sans-serif',
-                  fontWeight: 700,
-                  fontSize: '10px',
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.07em',
-                  color: '#c8922a',
-                  textDecoration: 'none',
-                  borderBottom: '1px solid rgba(200,146,42,0.4)',
-                  paddingBottom: '1px',
-                }}
-              >
-                Already subscribed? Restore access →
-              </a>
-              <a
-                href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00"
-                target="_blank"
-                rel="noopener noreferrer"
-                style=${{
-                  fontFamily: 'Manrope, sans-serif',
-                  fontWeight: 700,
-                  fontSize: '10px',
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.07em',
-                  color: '#b09870',
-                  textDecoration: 'none',
-                  borderBottom: '1px solid rgba(176,152,112,0.4)',
-                  paddingBottom: '1px',
-                }}
-              >
-                Manage or cancel subscription →
-              </a>
-              <button
-                onClick=${() => setProPromptDay(null)}
-                style=${{
-                  background: 'transparent',
-                  border: 'none',
-                  cursor: 'pointer',
-                  fontFamily: 'Manrope, sans-serif',
-                  fontWeight: 700,
-                  fontSize: '10px',
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.07em',
-                  color: '#b09870',
-                  padding: '2px 4px',
-                }}
-              >
-                dismiss
-              </button>
-            </div>
-          </div>`;
+          <${SubscribeModal}
+            title=${promptCopy.title}
+            detail=${promptCopy.detail}
+            onClose=${() => setProPromptDay(null)}
+            openRestore=${openRestore}
+          />`;
       })()}