templates/_partials/country_picker.html.twig line 1

Open in your IDE?
  1. {# =======================================================
  2.    JULICO Country Picker — Required modal + reusable opener
  3.    ✅ Place at: templates/_partials/country_picker.html.twig
  5.    Included via {% include '_partials/country_picker.html.twig' %}
  6.    in any page that should enforce country selection.
  8.    Required template context (passed by controller):
  9.    - needsCountryPicker (bool) — auto-shows modal when true
  10.    - allCountries (array of Country entities)
  11.    - selectedCountryId (int|null)
  13.    Exposes globally: window.openCountryModal()
  14.    ======================================================= #}
  16. <style>
  17. .cm-overlay {
  18.   position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7);
  19.   display: none; align-items: center; justify-content: center;
  20.   z-index: 10000; padding: 20px; backdrop-filter: blur(4px);
  21. }
  22. .cm-overlay.show { display: flex; }
  23. .cm-box {
  24.   background: var(--white, #fff); border-radius: var(--rlg, 16px);
  25.   padding: 32px 30px; max-width: 480px; width: 100%;
  26.   box-shadow: 0 25px 60px rgba(0,0,0,0.35); text-align: center;
  27.   font-family: var(--font, 'Plus Jakarta Sans', sans-serif);
  28. }
  29. .cm-icon { font-size: 48px; margin-bottom: 8px; }
  30. .cm-box h2 {
  31.   font-size: 22px; font-weight: 800;
  32.   color: var(--gray-900, #0f172a);
  33.   margin: 0 0 8px; letter-spacing: -0.02em;
  34. }
  35. .cm-box p {
  36.   font-size: 14px; color: var(--gray-500, #64748b);
  37.   margin: 0 0 22px; line-height: 1.5;
  38. }
  39. .cm-label {
  40.   display: block; text-align: left; font-size: 11px; font-weight: 800;
  41.   color: var(--gray-600, #475569); margin-bottom: 6px;
  42.   text-transform: uppercase; letter-spacing: 0.07em;
  43. }
  44. .cm-select {
  45.   width: 100%; height: 50px;
  46.   border: 2px solid var(--gray-200, #e2e8f0);
  47.   border-radius: var(--rsm, 10px); padding: 0 14px;
  48.   font-family: inherit; font-size: 15px; font-weight: 600;
  49.   background: var(--gray-50, #f8fafc); color: var(--gray-800, #1e293b);
  50.   outline: none; margin-bottom: 18px; cursor: pointer;
  51. }
  52. .cm-select:focus {
  53.   border-color: var(--brand, #00a7b5);
  54.   background: var(--white, #fff);
  55. }
  56. .cm-btn {
  57.   width: 100%; height: 50px;
  58.   background: var(--brand, #00a7b5); color: #fff;
  59.   border: none; border-radius: var(--rsm, 10px);
  60.   font-family: inherit; font-size: 15px; font-weight: 800;
  61.   cursor: pointer; transition: background .2s;
  62. }
  63. .cm-btn:hover:not(:disabled) {
  64.   background: var(--brand-dark, #008c98);
  65. }
  66. .cm-btn:disabled {
  67.   background: var(--gray-300, #cbd5e1); cursor: not-allowed;
  68. }
  69. .cm-note {
  70.   font-size: 11px; color: var(--gray-400, #94a3b8);
  71.   margin-top: 12px;
  72. }
  74. /* Reusable pill class (in case any template wants a standalone pill — the
  75.    homepage uses the existing .location-btn already, so this is optional) */
  76. .country-pill {
  77.   display: inline-flex; align-items: center; gap: 6px;
  78.   padding: 8px 14px;
  79.   border: 1.5px solid var(--gray-200, #e2e8f0);
  80.   border-radius: var(--rsm, 10px); background: var(--white, #fff);
  81.   font-size: 13px; font-weight: 700; color: var(--gray-700, #334155);
  82.   text-decoration: none; cursor: pointer; transition: all .2s;
  83.   min-height: 40px; font-family: inherit;
  84. }
  85. .country-pill:hover {
  86.   border-color: var(--brand, #00a7b5); color: var(--brand, #00a7b5);
  87.   background: var(--brand-light, #e6f7f8);
  88. }
  89. .country-pill-flag { font-size: 16px; }
  90. </style>
  92. <div id="country-modal-overlay" class="cm-overlay {% if needsCountryPicker is defined and needsCountryPicker %}show{% endif %}">
  93.   <div class="cm-box">
  94.     <div class="cm-icon">📍</div>
  95.     <h2>Welcome to Julico</h2>
  96.     <p>Choose your country to see products available in your area.</p>
  98.     <label class="cm-label">🌍 Your country</label>
  99.     <select id="country-modal-select" class="cm-select">
  100.       <option value="">Select a country…</option>
  101.       {% if allCountries is defined and allCountries is iterable %}
  102.         {% for c in allCountries %}
  103.           <option value="{{ c.id }}"
  104.                   {% if selectedCountryId is defined and selectedCountryId == c.id %}selected{% endif %}>
  105.             {{ c.name }}{% if c.isoCode %} ({{ c.isoCode }}){% endif %}
  106.           </option>
  107.         {% endfor %}
  108.       {% endif %}
  109.     </select>
  111.     <button type="button" id="country-modal-continue" class="cm-btn" disabled>
  112.       Continue →
  113.     </button>
  114.     <div class="cm-note">You can change this anytime from the location pill.</div>
  115.   </div>
  116. </div>
  118. <script>
  119. (function() {
  120.   var overlay = document.getElementById('country-modal-overlay');
  121.   var select  = document.getElementById('country-modal-select');
  122.   var btn     = document.getElementById('country-modal-continue');
  123.   if (!overlay || !select || !btn) return;
  125.   // Enable Continue when a country is picked
  126.   select.addEventListener('change', function() {
  127.     btn.disabled = !this.value;
  128.   });
  129.   if (select.value) btn.disabled = false;
  131.   btn.addEventListener('click', function() {
  132.     if (!select.value) return;
  133.     btn.disabled = true;
  134.     var orig = btn.textContent;
  135.     btn.textContent = '⏳ Saving…';
  137.     var fd = new FormData();
  138.     fd.append('country_id', select.value);
  140.     fetch('/api/geo/set-country', {
  141.       method: 'POST',
  142.       body: fd,
  143.       headers: { 'X-Requested-With': 'XMLHttpRequest' },
  144.       credentials: 'same-origin'
  145.     })
  146.       .then(function(r) { return r.json(); })
  147.       .then(function(d) {
  148.         if (d.ok) {
  149.           window.location.reload();
  150.         } else {
  151.           alert('Failed: ' + (d.error || 'unknown error'));
  152.           btn.disabled = false;
  153.           btn.textContent = orig;
  154.         }
  155.       })
  156.       .catch(function() {
  157.         alert('Network error — please try again.');
  158.         btn.disabled = false;
  159.         btn.textContent = orig;
  160.       });
  161.   });
  163.   // Expose globally so the location pill (or any other element) can reopen the modal
  164.   window.openCountryModal = function() {
  165.     overlay.classList.add('show');
  166.   };
  167. })();
  168. </script>