`verification/tk11283/current-snippets__dw-signin-modal.liquid`

63 lines
{%- comment -%} TK-11283: one complete designer application, then account setup and Shopify email-code sign-in. {%- endcomment -%}
<style>
  .dwsm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto;font-family:var(--element-text-font-family--body,system-ui,sans-serif)}
  .dwsm-overlay.dwsm-open{display:flex}.dwsm-card{box-sizing:border-box;width:100%;max-width:480px;background:#fff;color:#29251e;padding:40px 28px 28px;box-shadow:0 8px 44px rgba(0,0,0,.28);position:relative}
  .dwsm-close{position:absolute;top:5px;right:8px;width:44px;height:44px;background:none;border:0;font-size:28px;cursor:pointer;color:#29251e}
  .dwsm-card h2{font:400 28px/1.2 Georgia,serif;margin:0 0 14px;text-transform:none}.dwsm-card h3{font-family:inherit;font-weight:600;font-size:17px;line-height:1.4;margin:0 0 8px;text-transform:none}.dwsm-card p{font-size:14px;line-height:1.6;margin:8px 0 18px}
  .dwsm-action{box-sizing:border-box;display:block;width:100%;padding:14px 18px;border:1px solid #29251e;background:#29251e;color:#fff!important;text-decoration:none;text-align:center;font-family:inherit;font-weight:600;font-size:14px;line-height:1.3;cursor:pointer;min-height:48px}
  .dwsm-action--quiet{background:#fff;color:#29251e!important}.dwsm-section{border-top:1px solid #ddd4c8;margin-top:24px;padding-top:24px}.dwsm-card a:focus-visible,.dwsm-card button:focus-visible{outline:3px solid #9b703b;outline-offset:3px}
</style>
<div class="dwsm-overlay" id="dw-signin" data-dwsm-overlay>
  <div class="dwsm-card" role="dialog" aria-modal="true" aria-labelledby="dwsmTitle" tabindex="-1">
    <button class="dwsm-close" type="button" data-dwsm-close aria-label="Close">&times;</button>
    {%- if customer -%}
      <h2 id="dwsmTitle">Your account</h2>
      <p>You’re signed in as {{ customer.email | escape }}.</p>
      <a class="dwsm-action" href="{{ routes.account_url }}">View account &amp; orders</a>
      {%- if customer.tags contains 'trade_approved' -%}
        <div class="dwsm-section"><h3>Your trade account is active</h3><p>Your unlimited complimentary samples apply automatically while you’re signed in.</p><a class="dwsm-action dwsm-action--quiet" href="{{ routes.all_products_collection_url }}">Start sourcing</a></div>
      {%- else -%}
        <div class="dwsm-section"><h3>Design professional?</h3><p>Complete the trade application using this account’s email. Trade benefits start after our team approves your application.</p><a class="dwsm-action dwsm-action--quiet" data-dwsm-designer href="/pages/trade-only-benefits#dwTradeApplication">Complete the designer application</a></div>
      {%- endif -%}
    {%- else -%}
      <h2 id="dwsmTitle">Welcome back</h2>
      <p>Retail customers and designers: sign in with your original account email to keep your orders and benefits together. No password needed.</p>
      <a class="dwsm-action" data-dwsm-login="{{ routes.account_login_url }}" href="{{ routes.account_login_url }}">Sign in to your existing account</a>
      <div class="dwsm-section">
        <h3>New designer account</h3>
        <p>Fill out the trade form. We’ll create or match your account, then guide you to sign in with an email code. Unlimited complimentary samples begin after approval.</p>
        <a class="dwsm-action" data-dwsm-designer href="/pages/trade-only-benefits#dwTradeApplication">Complete the designer application</a>
      </div>
      <div class="dwsm-section">
        <h3>New retail account</h3>
        <p>Create your account and confirm your email for 3 lifetime complimentary samples. Sign in when shopping; your remaining allowance applies at checkout.</p>
        <a class="dwsm-action dwsm-action--quiet" data-dwsm-login="{{ routes.account_login_url }}" href="{{ routes.account_login_url }}">Create a retail account</a>
      </div>
    {%- endif -%}
  </div>
</div>
<script>
(function(){
  var overlay=document.getElementById('dw-signin');if(!overlay)return;
  var card=overlay.querySelector('[role="dialog"]');var previousFocus;var previousOverflow='';
  function open(trigger){if(overlay.classList.contains('dwsm-open'))return;previousFocus=trigger||document.activeElement;previousOverflow=document.body.style.overflow;overlay.classList.add('dwsm-open');document.body.style.overflow='hidden';overlay.querySelector('[data-dwsm-close]').focus();}
  function close(){if(!overlay.classList.contains('dwsm-open'))return;overlay.classList.remove('dwsm-open');document.body.style.overflow=previousOverflow;if(previousFocus&&previousFocus.isConnected)previousFocus.focus();}
  document.addEventListener('click',function(event){
    var trigger=event.target.closest('[data-dw-signin],a[href="#dw-signin"],a[href$="#dw-signin"]');
    if(trigger){event.preventDefault();open(trigger);return;}
    if(event.target.closest('[data-dwsm-close]')||event.target===overlay){close();return;}
    if(event.target.closest('[data-dwsm-designer]')){close();}
  });
  document.addEventListener('keydown',function(event){
    if(!overlay.classList.contains('dwsm-open'))return;
    if(event.key==='Escape'){event.preventDefault();close();return;}
    if(event.key==='Tab'){
      var items=Array.from(card.querySelectorAll('a[href],button:not([disabled]),[tabindex="0"]'));var first=items[0];var last=items[items.length-1];
      if(event.shiftKey&&(document.activeElement===first||!card.contains(document.activeElement))){event.preventDefault();last.focus();}
      else if(!event.shiftKey&&(document.activeElement===last||!card.contains(document.activeElement))){event.preventDefault();first.focus();}
    }
  });
  if(window.location.hash==='#dw-signin')open();
})();
</script>