create-snapify-app 0.0.0-stage → 1.1.0

package/template/apps/landing/src/LegalPages.tsx

@@ -0,0 +1,158 @@
+/**
+ * Snapify — Conditions d’utilisation (Tunisie & France)
+ * © 2026 NOVALABS WEB DESIGN
+ */
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function LegalShell({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="lp-wrap" style={{ padding: '48px 0 80px', maxWidth: 820 }}>
+      <p style={{ fontSize: 13, color: 'var(--color-muted)', marginBottom: 8 }}>
+        <Link to="/" style={{ color: 'var(--color-teal-dark)' }}>
+          ← Accueil
+        </Link>
+      </p>
+      <h1 style={{ fontSize: '1.75rem', fontWeight: 800, marginBottom: 8 }}>{title}</h1>
+      <p style={{ color: 'var(--color-muted)', fontSize: 14, marginBottom: 32 }}>Dernière mise à jour : 24 octobre 2026</p>
+      <div className="lp-legal" style={{ lineHeight: 1.7, fontSize: 15 }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function Block({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section style={{ marginBottom: 28 }}>
+      <h2 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: 8 }}>{title}</h2>
+      <div style={{ color: '#334155' }}>{children}</div>
+    </section>
+  );
+}
+
+/** CGU marché Tunisie (TND, droit tunisien). */
+export function ConditionsTunisiePage() {
+  return (
+    <LegalShell title="Conditions d’utilisation — Tunisie">
+      <Block title="1. Éditeur">
+        <p>
+          Le service Snapify est édité par <strong>NOVALABS WEB DESIGN</strong>, Tunisie — contact :{' '}
+          <a href="mailto:contact@novalabs.tn">contact@novalabs.tn</a> · +216 24 734 647.
+        </p>
+      </Block>
+      <Block title="2. Objet">
+        <p>
+          Les présentes conditions régissent l’utilisation du site snapify.tn, de la marketplace, de l’espace client et la
+          souscription à la licence annuelle Snapify (CMS) pour le marché tunisien. Les montants sont exprimés en dinars
+          tunisiens (DT / TND).
+        </p>
+      </Block>
+      <Block title="3. Licence Snapify">
+        <p>
+          La licence est <strong>annuelle</strong> et personnelle au titulaire. Elle couvre le droit d’utiliser le CMS
+          Snapify sur le domaine indiqué lors de la commande. L’hébergement, le nom de domaine et les frais tiers restent à
+          la charge du client. L’installation est réalisée après paiement effectif et réception des accès nécessaires.
+        </p>
+      </Block>
+      <Block title="4. Paiement">
+        <p>
+          Les paiements en ligne sont traités via Flouci (ou virement selon accord). Une facture peut être émise via
+          l’espace client. Tout défaut de paiement peut entraîner la suspension du service.
+        </p>
+      </Block>
+      <Block title="5. Espace client">
+        <p>
+          Le client dispose d’un espace (/espace-client sur snapify.tn ou snapify.fr) pour suivre ses demandes, tickets support,
+          paiements et factures. Il s’engage à protéger ses identifiants et à signaler toute utilisation abusive.
+        </p>
+      </Block>
+      <Block title="6. Support & tickets">
+        <p>
+          Le support est fourni via tickets. Les délais de réponse sont indicatifs et dépendent de la charge. Les signalements
+          de bugs doivent être précis (URL, étapes, captures si possible).
+        </p>
+      </Block>
+      <Block title="7. Données personnelles">
+        <p>
+          Les données collectées (identité, contact, projet) servent à l’exécution du contrat et au suivi commercial. Pour
+          toute demande d’accès ou de suppression : contact@novalabs.tn.
+        </p>
+      </Block>
+      <Block title="8. Responsabilité">
+        <p>
+          Snapify est fourni « en l’état ». NOVALABS n’est pas responsable des panne d’hébergeur tiers, pertes de données
+          hors de son contrôle, ou contenus publiés par le client. Le client reste responsable de la légalité de ses contenus.
+        </p>
+      </Block>
+      <Block title="9. Droit applicable">
+        <p>Les présentes sont soumises au droit tunisien. En cas de litige, compétence des tribunaux de Tunis, sauf disposition contraire d’ordre public.</p>
+      </Block>
+      <p style={{ marginTop: 32, fontSize: 14 }}>
+        Voir aussi :{' '}
+        <Link to="/conditions-utilisation-france" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+          Conditions France
+        </Link>
+      </p>
+    </LegalShell>
+  );
+}
+
+/** CGU marché France (EUR, droit français / RGPD). */
+export function ConditionsFrancePage() {
+  return (
+    <LegalShell title="Conditions d’utilisation — France">
+      <Block title="1. Éditeur">
+        <p>
+          Le service Snapify (offre France) est opéré par <strong>NOVALABS WEB DESIGN</strong> — contact :{' '}
+          <a href="mailto:contact@novalabs.tn">contact@novalabs.tn</a>. Site : snapify.fr.
+        </p>
+      </Block>
+      <Block title="2. Objet">
+        <p>
+          Les présentes conditions s’appliquent aux utilisateurs situés hors Tunisie / marché France : souscription licence
+          Snapify, marketplace et espace client. Les prix affichés sont en euros (€), conversion indicative depuis la grille
+          TND.
+        </p>
+      </Block>
+      <Block title="3. Licence & prestation">
+        <p>
+          Licence annuelle pour un domaine. Installation après paiement. L’hébergement et le domaine restent à la charge du
+          client. Toute évolution majeure du CMS peut faire l’objet d’une communication préalable.
+        </p>
+      </Block>
+      <Block title="4. Paiement & facturation">
+        <p>
+          Paiement sécurisé (Flouci ou modalité convenue). Factures téléchargeables depuis l’espace client. En cas de
+          rejet ou litige bancaire, l’accès peut être suspendu jusqu’à régularisation.
+        </p>
+      </Block>
+      <Block title="5. Données personnelles (RGPD)">
+        <p>
+          Responsable de traitement : NOVALABS WEB DESIGN. Finalités : contrat, support, facturation. Base légale :
+          exécution du contrat et intérêt légitime. Droits d’accès, rectification, effacement, limitation, portabilité :
+          contact@novalabs.tn. Vous pouvez introduire une réclamation auprès de la CNIL (France) ou de l’autorité locale
+          compétente.
+        </p>
+      </Block>
+      <Block title="6. Support">
+        <p>Tickets support et signalement de bugs via l’espace client. Pas de garantie de disponibilité 24/7 sauf SLA écrit.</p>
+      </Block>
+      <Block title="7. Limitation de responsabilité">
+        <p>
+          Dans les limites autorisées par le droit français, la responsabilité de NOVALABS est limitée au montant annuel de
+          la licence payée. Exclusion des dommages indirects (perte d’exploitation, image, etc.).
+        </p>
+      </Block>
+      <Block title="8. Droit applicable">
+        <p>Droit français. Litiges : tribunaux compétents de Paris, sous réserve des règles protectrices du consommateur.</p>
+      </Block>
+      <p style={{ marginTop: 32, fontSize: 14 }}>
+        Voir aussi :{' '}
+        <Link to="/conditions-utilisation" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+          Conditions Tunisie
+        </Link>
+      </p>
+    </LegalShell>
+  );
+}

package/template/apps/landing/src/OrderPage.tsx

@@ -0,0 +1,381 @@
+/**
+ * Snapify Landing — formulaire de commande licence (699 DT / an)
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Check, Globe2, Lock, Server, ShieldCheck, User } from 'lucide-react';
+import { INTL_PRICE, type Copy } from './copy';
+import type { DemoInfo, OrderOptions } from './types';
+
+const THEMES = [
+  { id: 'mahdia', label: 'Mahdia', img: '/landing/shot-mahdia.jpg' },
+  { id: 'sidibou', label: 'SidiBou', img: '/landing/shot-sidibou.jpg' },
+  { id: 'dogga', label: 'Dogga', img: '/landing/shot-dogga.jpg' },
+];
+
+type Form = {
+  name: string;
+  company: string;
+  email: string;
+  phone: string;
+  gouvernorat: string;
+  city: string;
+  siteType: string;
+  domain: string;
+  domainStatus: 'owned' | 'to-register';
+  theme: string;
+  providerId: string;
+  providerOther: string;
+  hostingType: string;
+  accessType: string;
+  serverIp: string;
+  message: string;
+  acceptTerms: boolean;
+};
+
+const EMPTY: Form = {
+  name: '',
+  company: '',
+  email: '',
+  phone: '',
+  gouvernorat: '',
+  city: '',
+  siteType: 'vitrine',
+  domain: '',
+  domainStatus: 'owned',
+  theme: 'mahdia',
+  providerId: '',
+  providerOther: '',
+  hostingType: 'unknown',
+  accessType: 'unknown',
+  serverIp: '',
+  message: '',
+  acceptTerms: false,
+};
+
+function Step({ n, icon, title, sub, children }: { n: number; icon: React.ReactNode; title: string; sub: string; children: React.ReactNode }) {
+  return (
+    <section className="lp-card">
+      <header className="lp-step">
+        <span className="lp-step-n">{n}</span>
+        <div>
+          <h3>
+            {icon} {title}
+          </h3>
+          <p>{sub}</p>
+        </div>
+      </header>
+      {children}
+    </section>
+  );
+}
+
+function Field({ label, hint, optional, children, wide }: { label: string; hint?: string; optional?: boolean; children: React.ReactNode; wide?: boolean }) {
+  return (
+    <label className={`lp-field${wide ? ' lp-field-wide' : ''}`}>
+      <span>
+        {label}
+        {optional ? <em> (facultatif)</em> : <b aria-hidden> *</b>}
+      </span>
+      {children}
+      {hint && <small>{hint}</small>}
+    </label>
+  );
+}
+
+function Chips({ value, options, onChange }: { value: string; options: { id: string; label: string }[]; onChange: (id: string) => void }) {
+  return (
+    <div className="lp-chips" role="radiogroup">
+      {options.map((o) => (
+        <button
+          key={o.id}
+          type="button"
+          role="radio"
+          aria-checked={value === o.id}
+          className={`lp-chip${value === o.id ? ' is-on' : ''}`}
+          onClick={() => onChange(o.id)}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function OrderPage({ demo, copy, intl }: { demo: DemoInfo | null; copy: Copy; intl: boolean }) {
+  const [opts, setOpts] = useState<OrderOptions | null>(null);
+  const [f, setF] = useState<Form>(EMPTY);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+
+  useEffect(() => {
+    fetch(`/api/platform/order-options?market=${intl ? 'fr' : 'tn'}`)
+      .then((r) => r.json())
+      .then((data: OrderOptions) => {
+        setOpts(data);
+        setF((prev) => ({ ...prev, gouvernorat: '' }));
+      })
+      .catch(() => setErr('Impossible de charger la liste des hébergeurs. Rechargez la page.'));
+  }, [intl]);
+
+  const set = <K extends keyof Form>(k: K, v: Form[K]) => setF((prev) => ({ ...prev, [k]: v }));
+
+  const groups = useMemo(() => {
+    const p = opts?.providers || [];
+    const tn = p.filter((x) => x.group === 'tn');
+    const intlHosts = p.filter((x) => x.group === 'intl');
+    const other = p.filter((x) => x.group === 'other');
+    if (intl) {
+      return [
+        { label: `Hébergeurs France / internationaux (${intlHosts.length})`, items: intlHosts },
+        { label: 'Autre', items: other },
+      ];
+    }
+    return [
+      { label: `Hébergeurs en Tunisie (${tn.length})`, items: tn },
+      { label: 'Hébergeurs internationaux', items: intlHosts },
+      { label: 'Autre', items: other },
+    ];
+  }, [opts, intl]);
+
+  const provider = opts?.providers.find((p) => p.id === f.providerId);
+  const noHosting = f.providerId === 'none';
+  const price = intl ? INTL_PRICE : demo?.priceLabel || '699 DT';
+  const siteTypeLabel = opts?.siteTypes.find((s) => s.id === f.siteType)?.label;
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr('');
+    if (!f.acceptTerms) {
+      setErr('Veuillez accepter les conditions pour continuer.');
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await fetch('/api/platform/license/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(noHosting ? { ...f, hostingType: 'unknown', accessType: 'unknown', serverIp: '' } : f),
+      });
+      const data = (await res.json()) as { link?: string; error?: string };
+      if (!res.ok || !data.link) throw new Error(data.error || 'Erreur lors de la création du paiement');
+      window.location.href = data.link;
+    } catch (ex) {
+      setErr(ex instanceof Error ? ex.message : 'Erreur');
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="lp-section lp-order">
+      <div className="lp-wrap">
+        <div className="lp-order-head">
+          <span className="lp-badge">
+            <ShieldCheck className="h-3.5 w-3.5" /> Paiement sécurisé Flouci · Installation sous 48 h
+          </span>
+          <h2>{copy.order.title}</h2>
+          <p className="sub">{copy.order.sub}</p>
+        </div>
+
+        <form className="lp-order-grid" onSubmit={submit}>
+          <div className="lp-order-main">
+            <Step n={1} icon={<User className="h-4 w-4" />} title="Vos coordonnées" sub="Pour vous contacter et établir la facture.">
+              <div className="lp-grid-2">
+                <Field label="Nom complet">
+                  <input required autoComplete="name" value={f.name} onChange={(e) => set('name', e.target.value)} placeholder="Prénom Nom" />
+                </Field>
+                <Field label="Société / enseigne" optional>
+                  <input autoComplete="organization" value={f.company} onChange={(e) => set('company', e.target.value)} placeholder="Ma société SARL" />
+                </Field>
+                <Field label="E-mail">
+                  <input
+                    required
+                    type="email"
+                    autoComplete="email"
+                    value={f.email}
+                    onChange={(e) => set('email', e.target.value)}
+                    placeholder={intl ? 'vous@exemple.fr' : 'vous@exemple.tn'}
+                  />
+                </Field>
+                <Field label="Téléphone / WhatsApp">
+                  <input
+                    required
+                    type="tel"
+                    autoComplete="tel"
+                    value={f.phone}
+                    onChange={(e) => set('phone', e.target.value)}
+                    placeholder={intl ? '+33 6 XX XX XX XX' : '+216 XX XXX XXX'}
+                  />
+                </Field>
+                <Field label={opts?.regionLabel || (intl ? 'Région' : 'Gouvernorat')}>
+                  <select required value={f.gouvernorat} onChange={(e) => set('gouvernorat', e.target.value)}>
+                    <option value="">Sélectionner…</option>
+                    {opts?.gouvernorats.map((g) => (
+                      <option key={g} value={g}>
+                        {g}
+                      </option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="Ville" optional>
+                  <input
+                    autoComplete="address-level2"
+                    value={f.city}
+                    onChange={(e) => set('city', e.target.value)}
+                    placeholder={intl ? 'Lyon, Paris…' : 'La Marsa'}
+                  />
+                </Field>
+              </div>
+            </Step>
+
+            <Step n={2} icon={<Globe2 className="h-4 w-4" />} title="Votre projet" sub="Le type de site et l’adresse sur laquelle installer Snapify.">
+              <Field label="Type de site" wide>
+                <Chips value={f.siteType} options={opts?.siteTypes || []} onChange={(v) => set('siteType', v)} />
+              </Field>
+              <div className="lp-grid-2">
+                <Field label="Nom de domaine" hint={intl ? 'Sans http:// — ex. maboutique.fr' : 'Sans http:// — ex. maboutique.tn'}>
+                  <input
+                    required
+                    value={f.domain}
+                    onChange={(e) => set('domain', e.target.value)}
+                    placeholder={intl ? 'maboutique.fr' : 'maboutique.tn'}
+                    inputMode="url"
+                  />
+                </Field>
+                <Field label="Ce domaine…">
+                  <select value={f.domainStatus} onChange={(e) => set('domainStatus', e.target.value as Form['domainStatus'])}>
+                    <option value="owned">m’appartient déjà</option>
+                    <option value="to-register">reste à enregistrer</option>
+                  </select>
+                </Field>
+              </div>
+              <Field label="Thème de départ" optional wide>
+                <div className="lp-themes" role="radiogroup">
+                  {THEMES.map((th) => (
+                    <button
+                      key={th.id}
+                      type="button"
+                      role="radio"
+                      aria-checked={f.theme === th.id}
+                      className={`lp-theme${f.theme === th.id ? ' is-on' : ''}`}
+                      onClick={() => set('theme', th.id)}
+                    >
+                      <img src={th.img} alt="" loading="lazy" />
+                      <span>
+                        {f.theme === th.id && <Check className="h-3.5 w-3.5" />} {th.label}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </Field>
+            </Step>
+
+            <Step n={3} icon={<Server className="h-4 w-4" />} title="Votre hébergement" sub="Snapify s’installe chez l’hébergeur de votre choix (VPS ou mutualisé compatible).">
+              <Field
+                label="Hébergeur"
+                wide
+                hint={
+                  opts
+                    ? intl
+                      ? `${opts.providers.filter((p) => p.group === 'intl').length} hébergeurs France / internationaux`
+                      : `${opts.providers.filter((p) => p.group === 'tn').length} hébergeurs et bureaux d’enregistrement tunisiens (liste ATI) + internationaux`
+                    : 'Chargement de la liste…'
+                }
+              >
+                <select required value={f.providerId} onChange={(e) => set('providerId', e.target.value)} disabled={!opts}>
+                  <option value="">{opts ? 'Choisir votre hébergeur…' : 'Chargement…'}</option>
+                  {groups.map((g) => (
+                    <optgroup key={g.label} label={g.label}>
+                      {g.items.map((p) => (
+                        <option key={p.id} value={p.id}>
+                          {intl ? p.name.replace(/\bTunisie\b/gi, '').replace(/\s{2,}/g, ' ').trim() : p.name}
+                          {p.website ? ` — ${p.website}` : ''}
+                        </option>
+                      ))}
+                    </optgroup>
+                  ))}
+                </select>
+              </Field>
+              {f.providerId === 'other' && (
+                <Field label="Nom de votre hébergeur" wide>
+                  <input required value={f.providerOther} onChange={(e) => set('providerOther', e.target.value)} placeholder="Nom et site web" />
+                </Field>
+              )}
+              {noHosting ? (
+                <p className="lp-note">
+                  Pas de souci : après le paiement, nous vous recommandons un hébergement adapté à votre projet{intl ? '' : ' (Tunisie ou international)'} et nous nous occupons de la mise en place.
+                </p>
+              ) : (
+                <>
+                  <Field label="Type d’hébergement" wide>
+                    <Chips value={f.hostingType} options={opts?.hostingTypes || []} onChange={(v) => set('hostingType', v)} />
+                  </Field>
+                  <Field label="Accès dont vous disposez" wide>
+                    <Chips value={f.accessType} options={opts?.accessTypes || []} onChange={(v) => set('accessType', v)} />
+                  </Field>
+                  <Field label="Adresse IP du serveur" optional hint="Visible dans l’espace client de votre hébergeur." wide>
+                    <input value={f.serverIp} onChange={(e) => set('serverIp', e.target.value)} placeholder="ex. 197.14.xx.xx" inputMode="decimal" />
+                  </Field>
+                </>
+              )}
+              <p className="lp-note lp-note-lock">
+                <Lock className="h-4 w-4" /> N’indiquez jamais de mot de passe ici : nous vous demanderons les accès de façon sécurisée après le paiement.
+              </p>
+            </Step>
+
+            <section className="lp-card">
+              <Field label="Précisions sur votre projet" optional wide>
+                <textarea rows={4} value={f.message} onChange={(e) => set('message', e.target.value)} placeholder="Délais, nombre de produits, langues, intégrations souhaitées…" />
+              </Field>
+              <label className="lp-check">
+                <input type="checkbox" checked={f.acceptTerms} onChange={(e) => set('acceptTerms', e.target.checked)} />
+                <span>
+                  J’accepte les{' '}
+                  <Link to={intl ? '/conditions-utilisation' : '/conditions-utilisation'} style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                    conditions d’utilisation ({intl ? 'France' : 'Tunisie'})
+                  </Link>
+                  , que NOVALABS installe Snapify sur l’hébergement indiqué et me contacte au sujet de cette commande. La licence est annuelle ; l’hébergement reste à ma charge. Un espace client sera créé pour suivre ma demande.
+                </span>
+              </label>
+            </section>
+          </div>
+
+          <aside className="lp-order-side">
+            <div className="lp-summary">
+              <div className="lp-summary-k">Licence Snapify</div>
+              <div className="lp-price-num">
+                {price} <small>/ an</small>
+              </div>
+              <ul>
+                {copy.pricing.includes.map((line) => (
+                  <li key={line}>
+                    <Check className="h-4 w-4" /> {line}
+                  </li>
+                ))}
+              </ul>
+              <dl>
+                <dt>Projet</dt>
+                <dd>{siteTypeLabel || '—'}</dd>
+                <dt>Domaine</dt>
+                <dd>{f.domain || '—'}</dd>
+                <dt>Hébergeur</dt>
+                <dd>{f.providerId === 'other' ? f.providerOther || 'Autre' : provider?.name || '—'}</dd>
+              </dl>
+              {err && <p className="lp-error">{err}</p>}
+              <button type="submit" className="lp-btn" disabled={busy || !opts}>
+                {busy ? 'Redirection vers Flouci…' : `${copy.order.submit} · ${price}`}
+              </button>
+              <p className="lp-summary-foot">
+                <ShieldCheck className="h-4 w-4" /> Paiement sécurisé via Flouci. {copy.pricing.note}.
+              </p>
+              <Link to="/" className="lp-back">
+                ← Retour à l’accueil
+              </Link>
+            </div>
+          </aside>
+        </form>
+      </div>
+    </div>
+  );
+}