`snippets/dw-signin-modal.liquid`

101 lines
{% comment %} DW sign-in popup — all clients sign in here; choose Retail or Professional for the free-samples offer. Professional routes to the trade-benefits page after sign-in (dw_trade flag consumed in templates/customers/account.liquid). {% 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:6vh 16px;overflow-y:auto;font-family:Lora,serif;}
  .dwsm-overlay.dwsm-open{display:flex;}
  .dwsm-card{width:100%;max-width:460px;background:#fff;border:1px solid #e4e4e4;border-radius:4px;padding:40px 40px 40px;box-shadow:0 8px 44px rgba(0,0,0,.28);position:relative;}
  .dwsm-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;line-height:1;color:#999;cursor:pointer;}
  .dwsm-close:hover{color:#000;}
  .dwsm-offer{text-align:center;margin:0 0 20px;}
  .dwsm-offer h2{font-weight:400;font-size:1.55rem;color:#000;margin:0 0 4px;letter-spacing:.02em;}
  .dwsm-offer p{font-size:.86rem;color:#787878;margin:0;}
  .dwsm-toggle{display:flex;gap:10px;margin:0 0 24px;}
  .dwsm-opt{flex:1;text-align:center;border:1px solid #e4e4e4;border-radius:4px;padding:13px 8px;cursor:pointer;transition:all .15s ease;background:#fff;}
  .dwsm-opt:hover{border-color:#b08212;}
  .dwsm-opt.active{border-color:#b08212;background:#faf6ec;box-shadow:0 0 0 1px #b08212;}
  .dwsm-opt .t{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#444;margin-bottom:3px;}
  .dwsm-opt .s{display:block;font-size:.92rem;color:#b08212;}
  .dwsm-gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 20px;background:#fff;border:1px solid #dadce0;border-radius:3px;cursor:pointer;font-family:Lora,serif;font-size:.92rem;color:#3c4043;margin-bottom:18px;}
  .dwsm-gbtn:hover{background:#f7f8f8;}
  .dwsm-div{display:flex;align-items:center;gap:14px;margin:0 0 18px;}
  .dwsm-div span{font-size:.72rem;color:#999;text-transform:uppercase;letter-spacing:.1em;}
  .dwsm-div i{flex:1;height:1px;background:#e4e4e4;}
  .dwsm-field{margin-bottom:16px;}
  .dwsm-field label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:#444;margin-bottom:6px;}
  .dwsm-field input{width:100%;padding:12px 14px;border:1px solid #e4e4e4;border-radius:3px;font-family:Lora,serif;font-size:.95rem;color:#444;box-sizing:border-box;}
  .dwsm-field input:focus{outline:none;border-color:#b08212;box-shadow:0 0 0 1px #b08212;}
  .dwsm-overlay input.dwsm-submit{width:100%;padding:14px;background:#000 !important;color:#fff !important;border:none !important;border-radius:3px;font-family:Lora,serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;}
  .dwsm-overlay input.dwsm-submit:hover{background:#262626 !important;}
  .dwsm-err{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;font-size:.85rem;padding:10px 14px;border-radius:3px;margin-bottom:16px;text-align:center;}
  .dwsm-foot{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid #e4e4e4;font-size:.85rem;color:#787878;}
  .dwsm-foot a{color:#b08212;text-decoration:none;}
  .dwsm-foot a:hover{text-decoration:underline;}
</style>

<div class="dwsm-overlay" id="dw-signin" data-dwsm-overlay>
  <div class="dwsm-card" role="dialog" aria-modal="true" aria-label="Sign in">
    <button class="dwsm-close" type="button" data-dwsm-close aria-label="Close">&times;</button>

    <div class="dwsm-offer">
      <h2>Up to 10 Free Samples</h2>
      <p>Choose your account type, then sign in.</p>
    </div>

    <div class="dwsm-toggle">
      <div class="dwsm-opt active" data-dwsm-type="retail" role="button" tabindex="0">
        <span class="t">Retail</span><span class="s">3 free samples</span>
      </div>
      <div class="dwsm-opt" data-dwsm-type="professional" role="button" tabindex="0">
        <span class="t">Professional</span><span class="s">up to 10 free</span>
      </div>
    </div>

    <button type="button" class="dwsm-gbtn" data-dwsm-google="https://open-signin.okasconcepts.com/customer/google_login?shop=designer-laboratory-sandbox.myshopify.com" aria-label="Continue with Google">
      <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.01 24.01 0 0 0 0 21.56l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
      Continue with Google
    </button>

    <div class="dwsm-div"><i></i><span>or sign in with email</span><i></i></div>

    <input type="button" class="dwsm-submit" data-dwsm-login="{{ routes.account_login_url }}" value="{{ 'customers.login.submit' | t }}">

    <div class="dwsm-foot">
      New to Designer Wallcoverings? <a href="{{ routes.account_register_url }}">Create account</a>
      &nbsp;&middot;&nbsp; <a href="{{ routes.account_login_url }}#recover">Forgot password</a>
    </div>
  </div>
</div>

<script>
(function(){
  var overlay=document.getElementById('dw-signin');
  if(!overlay) return;
  function open(){overlay.classList.add('dwsm-open');document.body.style.overflow='hidden';}
  function close(){overlay.classList.remove('dwsm-open');document.body.style.overflow='';}
  function persistTrade(){
    var proEl=overlay.querySelector('[data-dwsm-type="professional"]');
    var pro=proEl&&proEl.classList.contains('active');
    try{pro?sessionStorage.setItem('dw_trade','1'):sessionStorage.removeItem('dw_trade');}catch(e){}
  }
  document.addEventListener('click',function(e){
    var t=e.target.closest('[data-dw-signin], a[href="#dw-signin"], a[href$="#dw-signin"]');
    if(t){e.preventDefault();open();return;}
    var google=e.target.closest('[data-dwsm-google]');
    if(google){e.preventDefault();persistTrade();window.location.href=google.getAttribute('data-dwsm-google');return;}
    var login=e.target.closest('[data-dwsm-login]');
    if(login){e.preventDefault();persistTrade();window.location.href=login.getAttribute('data-dwsm-login');return;}
    if(e.target.closest('[data-dwsm-close]')||e.target===overlay){close();}
  });
  document.addEventListener('keydown',function(e){if(e.key==='Escape')close();});
  var opts=overlay.querySelectorAll('[data-dwsm-type]');
  function setType(type){
    opts.forEach(function(o){o.classList.toggle('active',o.getAttribute('data-dwsm-type')===type);});
    try{type==='professional'?sessionStorage.setItem('dw_trade','1'):sessionStorage.removeItem('dw_trade');}catch(e){}
  }
  opts.forEach(function(o){
    o.addEventListener('click',function(){setType(o.getAttribute('data-dwsm-type'));});
    o.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();setType(o.getAttribute('data-dwsm-type'));}});
  });
  if(window.location.hash==='#dw-signin'){open();}
})();
</script>