@gait-financial/react 0.0.16

package/wc/button.js

@@ -0,0 +1,940 @@
+(function(k){"use strict";function $(r,t){const e=r.replace("#",""),i=parseInt(e,16),a=i>>16&255,n=i>>8&255,o=i&255,d=Math.max(0,Math.floor(a*(1-t))),s=Math.max(0,Math.floor(n*(1-t))),l=Math.max(0,Math.floor(o*(1-t)));return`#${(d<<16|s<<8|l).toString(16).padStart(6,"0")}`}function T(r){const t=r.replace("#",""),e=parseInt(t,16),i=e>>16&255,a=e>>8&255,n=e&255;return(.299*i+.587*a+.114*n)/255<.5}const c={primary:{main:"rgb(47, 44, 37)",dark:"rgb(35, 33, 28)",contrastText:"#ffffff"},cta:{main:"#4147BF"},secondary:{main:"rgb(241, 234, 221)",dark:"rgb(235, 226, 207)",contrastText:"rgb(47, 44, 37)"}},x={sm:"8px",md:"16px",lg:"24px"},q={md:"8px"},g={normal:"250ms ease-in-out"},R={modalBackdrop:1040},b={fontFamily:{primary:'"Inter", "Helvetica", "Arial", sans-serif'},fontSize:{sm:"0.875rem",md:"1rem",lg:"1.125rem"},fontWeight:{medium:500},lineHeight:{normal:1.5}};function z(r,t,e,i){return t?{bg:t,bgHover:e(t,.15),bgActive:e(t,.25),color:i(t)?"#ffffff":"#000000"}:r==="dark"?{bg:c.primary.main,bgHover:c.primary.dark,bgActive:c.primary.dark,color:c.primary.contrastText}:{bg:c.secondary.main,bgHover:c.secondary.dark,bgActive:c.secondary.dark,color:c.secondary.contrastText}}function N(r){return{small:{padding:"8px 20px",fontSize:b.fontSize.sm,minHeight:"36px"},medium:{padding:"12px 28px",fontSize:b.fontSize.md,minHeight:"44px"},large:{padding:"16px 36px",fontSize:b.fontSize.lg,minHeight:"52px"}}[r]}function G(r,t,e,i,a){const n=z(r,e,i,a),o=N(t);return`
+    <style>
+      :host {
+        display: inline-block;
+        --gait-button-bg: ${n.bg};
+        --gait-button-bg-hover: ${n.bgHover};
+        --gait-button-bg-active: ${n.bgActive};
+        --gait-button-color: ${n.color};
+        --gait-button-padding: ${o.padding};
+        --gait-button-font-size: ${o.fontSize};
+        --gait-button-min-height: ${o.minHeight};
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: ${x.sm};
+        
+        font-family: ${b.fontFamily.primary};
+        font-weight: ${b.fontWeight.medium};
+        line-height: ${b.lineHeight.normal};
+        font-size: var(--gait-button-font-size);
+        
+        padding: var(--gait-button-padding);
+        min-height: var(--gait-button-min-height);
+        
+        background-color: var(--gait-button-bg);
+        color: var(--gait-button-color);
+        
+        border: none;
+        border-radius: ${q.md};
+        cursor: pointer;
+        
+        transition: all ${g.normal};
+        
+        /* Remove default button styles */
+        outline: none;
+        text-decoration: none;
+        user-select: none;
+        will-change: transform, box-shadow;
+      }
+
+      button:hover:not(:disabled) {
+        background-color: var(--gait-button-bg-hover);
+      }
+
+      button:active:not(:disabled) {
+        background-color: var(--gait-button-bg-active);
+        transform: translateY(1px);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--gait-button-bg);
+        outline-offset: 2px;
+      }
+
+      button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      /* Allow custom styling via :host */
+      :host([style*="width"]) button {
+        width: 100%;
+      }
+    </style>
+  `}function O(){if(document.getElementById("gait-modal-styles"))return;const r=document.createElement("style");r.id="gait-modal-styles",r.textContent=`
+    /* Modal Backdrop - The overlay behind the modal */
+    .gait-modal-backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: ${R.modalBackdrop};
+      opacity: 0;
+      transition: opacity ${g.normal};
+      overflow: hidden;
+    }
+
+    .gait-modal-backdrop.gait-modal-open {
+      opacity: 1;
+    }
+
+    /* Modal Container - The main modal box */
+    .gait-modal-container {
+      background: #fff;
+      border-radius: 12px;
+      max-width: 1080px;
+      width: 60%;
+      max-height: 90vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .gait-modal-backdrop.gait-modal-open .gait-modal-container {
+      transform: scale(1);
+    }
+
+    /* Modal Header - The title section with close icon */
+    .gait-modal-header {
+      padding: 16px 24px;
+      border-bottom: 1px solid #e5e7eb;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .gait-modal-header-title {
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0;
+    }
+
+    .gait-modal-close-icon {
+      background: none;
+      border: none;
+      padding: 8px;
+      border-radius: 999px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #6b7280;
+      width: 28px;
+      height: 28px;
+    }
+
+    .gait-modal-close-icon:hover {
+      background-color: #f3f4f6;
+      color: #111827;
+    }
+
+    .gait-modal-close-icon svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* Modal Body - The content section */
+    .gait-modal-body {
+      display: flex;
+      flex: 1;
+      overflow-y: auto;
+    }
+
+
+    .gait-modal-right-panel {
+      width: 440px;
+      padding: 24px;
+      border-left: 1px solid #e5e7eb;
+      background: #fafafa;
+    }
+
+    /* Responsive: Full screen drawer on mobile */
+    @media (max-width: 768px) {
+      .gait-modal-backdrop {
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding: 0;
+        overflow: hidden;
+      }
+      
+      .gait-modal-container {
+        max-width: 100%;
+        width: 100%;
+        height: 100vh;
+        max-height: 100vh;
+        min-height: 100vh;
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        margin: 0;
+        position: relative;
+      }
+      
+      .gait-modal-body {
+        flex-direction: column;
+        flex: 1 1 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+        min-height: 0;
+        overscroll-behavior: contain;
+      }
+      
+      .gait-modal-left-panel {
+        border-right: none;
+        border-bottom: 1px solid #e5e7eb;
+        flex-shrink: 0;
+      }
+      
+      .gait-modal-right-panel {
+        width: 100%;
+        border-left: none;
+        flex-shrink: 0;
+      }
+      
+      .gait-modal-header {
+        flex-shrink: 0;
+        position: sticky;
+        top: 0;
+        background: #fff;
+        z-index: 1;
+      }
+    }
+
+    .gait-modal-left-panel {
+      flex: 1;
+      padding: 24px;
+    }
+
+    /* Items Container */
+    .gait-modal-items-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #e5e7eb;
+      margin-bottom: 20px;
+    }
+
+    .gait-modal-item {
+      display: flex;
+      gap: 16px;
+    }
+
+    .gait-modal-item-image {
+      width: 60px;
+      height: 40px;
+      border-radius: 4px;
+      object-fit: cover;
+      flex-shrink: 0;
+    }
+
+    .gait-modal-item-meta {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .gait-modal-item-title {
+      font-size: 15px;
+      font-weight: 600;
+      margin: 0 0 4px;
+    }
+
+    .gait-modal-item-quantity {
+      font-size: 13px;
+      color: #6b7280;
+    }
+
+    .gait-modal-item-price {
+      margin-left: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      color:rgb(10, 10, 10);
+    }
+
+    /* Price Details */
+    .gait-modal-price-section {
+      margin-bottom: 0;
+    }
+
+    .gait-modal-price-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    .gait-modal-price-item,
+    .gait-modal-price-total {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+
+    .gait-modal-price-item.discount {
+      color: #059669;
+    }
+
+    .gait-modal-price-total {
+      padding-top: 12px;
+      margin-top: 12px;
+      border-top: 1px solid #e5e7eb;
+      font-weight: 600;
+    }
+
+    .gait-modal-price-breakdown-link {
+      font-size: 13px;
+      color: #6b7280;
+      text-decoration: underline;
+      cursor: pointer;
+      margin-top: 4px;
+      display: inline-block;
+    }
+
+    .gait-modal-price-breakdown-link:hover {
+      color: #374151;
+    }
+
+    /* Payment Section */
+    .gait-modal-payment-section {
+      margin-bottom: 0;
+    }
+
+    .gait-modal-payment-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    .gait-modal-payment-header h4 {
+      font-size: 16px;
+      margin: 0;
+      font-weight: 600;
+    }
+
+    .gait-modal-payment-change {
+      color: #6b7280;
+      text-decoration: underline;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .gait-modal-payment-change:hover {
+      color: #374151;
+    }
+
+    .gait-modal-payment-card {
+      padding: 12px;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      background: #fff;
+      font-size: 14px;
+    }
+
+    .gait-modal-payment-icons {
+      display: flex;
+      gap: 8px;
+      margin-top: 10px;
+      font-size: 12px;
+      color: #6b7280;
+    }
+
+    /* Split Payment Section */
+    .gait-modal-split-section {
+      margin-bottom: 20px;
+    }
+
+    .gait-modal-split-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin: 0 0 12px;
+      color: #111827;
+    }
+
+    .gait-modal-split-options {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .gait-modal-split-option {
+      flex: 1;
+      min-width: 100px;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-weight: 500;
+      text-align: center;
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all ${g.normal};
+      color: #374151;
+    }
+
+    .gait-modal-split-option:hover {
+      border-color: ${c.primary.main};
+      background: rgba(47, 44, 37, 0.04);
+    }
+
+    .gait-modal-split-option.selected {
+      background: rgba(47, 44, 37, 0.15);
+      border: 1px solid ${c.primary.main};
+      color: #000;
+    }
+
+    .gait-modal-email-inputs {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-bottom: 12px;
+    }
+
+    .gait-modal-email-input {
+      width: 100%;
+      padding: 10px 12px;
+      font-size: 14px;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      background: #fff;
+      color: #111827;
+      outline: none;
+      transition: all ${g.normal};
+    }
+
+    .gait-modal-email-input:focus {
+      border-color: ${c.primary.main};
+      box-shadow: 0 0 0 2px rgba(47, 44, 37, 0.1);
+    }
+
+    .gait-modal-email-input::placeholder {
+      color: #9ca3af;
+    }
+
+    .gait-modal-email-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      font-size: 14px;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      background: #fff;
+      color: #111827;
+      position: relative;
+    }
+
+
+    .gait-modal-email-item-sent-check {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: #10b981;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 2px;
+      flex-shrink: 0;
+    }
+
+    .gait-modal-email-item-sent-check svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .gait-modal-email-item-email {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .gait-modal-email-item-right {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 6px;
+    }
+
+    .gait-modal-email-item-amount-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .gait-modal-email-item-amount {
+      font-weight: 500;
+      color: ${c.primary.main};
+      font-size: 14px;
+    }
+
+    .gait-modal-email-item-actions {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .gait-modal-email-item-edit,
+    .gait-modal-email-item-remove {
+      font-size: 13px;
+      color: #6b7280;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 2px 4px;
+      transition: color ${g.normal};
+    }
+
+    .gait-modal-email-item-edit:hover,
+    .gait-modal-email-item-remove:hover {
+      color: ${c.primary.main};
+    }
+
+    /* For "By amount" mode - two input fields side by side */
+    .gait-modal-email-amount-row {
+      display: flex;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .gait-modal-email-amount-row .gait-modal-email-input {
+      flex: 1;
+    }
+
+    .gait-modal-email-amount-row .gait-modal-email-amount-input {
+      width: 120px;
+      flex: 0 0 120px;
+    }
+
+    .gait-modal-done-button {
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border: 1px solid ${c.primary.main};
+      border-radius: 6px;
+      background: ${c.primary.main};
+      color: ${c.primary.contrastText};
+      cursor: pointer;
+      transition: all ${g.normal};
+      white-space: nowrap;
+    }
+
+    .gait-modal-done-button:hover {
+      background: ${c.primary.dark};
+      border-color: ${c.primary.dark};
+    }
+
+    .gait-modal-email-amount-input {
+      width: 80px;
+      padding: 6px 8px;
+      font-size: 13px;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      background: #fff;
+      color: #111827;
+      outline: none;
+      text-align: right;
+    }
+
+    .gait-modal-email-amount-input:focus {
+      border-color: ${c.primary.main};
+      box-shadow: 0 0 0 2px rgba(47, 44, 37, 0.1);
+    }
+
+    .gait-modal-add-email-button {
+      padding: 8px 12px;
+      font-size: 13px;
+      color: #6b7280;
+      background: none;
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      transition: color ${g.normal};
+    }
+
+    .gait-modal-add-email-button:hover {
+      color: ${c.primary.main};
+      text-decoration: underline;
+    }
+
+    .gait-modal-split-summary {
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid #e5e7eb;
+    }
+
+    .gait-modal-split-summary-title {
+      font-size: 14px;
+      font-weight: 600;
+      margin: 0 0 8px;
+      color: #111827;
+    }
+
+    .gait-modal-split-amount {
+      font-size: 18px;
+      font-weight: 600;
+      color: ${c.primary.main};
+    }
+
+    .gait-modal-send-split-button {
+      width: 100%;
+      padding: 12px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 8px;
+      border: 1px solid ${c.primary.main};
+      background: transparent;
+      color: ${c.primary.main};
+      cursor: pointer;
+      transition: all ${g.normal};
+      margin-top: 16px;
+    }
+
+    .gait-modal-send-split-button:hover {
+      background: rgba(47, 44, 37, 0.06);
+    }
+
+    .gait-modal-send-split-button:active {
+      transform: translateY(1px);
+    }
+
+    .gait-modal-send-split-button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .gait-modal-confirm-button-with-amount {
+      width: 100%;
+      padding: 14px;
+      font-size: 15px;
+      font-weight: 600;
+      border-radius: 10px;
+      border: none;
+      background: var(--gait-modal-button-bg, ${c.primary.main});
+      color: var(--gait-modal-button-color, ${c.primary.contrastText});
+      cursor: pointer;
+      transition: all ${g.normal};
+      margin-top: 12px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .gait-modal-confirm-button-with-amount:hover {
+      background-color: var(--gait-modal-button-bg-hover, ${c.primary.dark});
+    }
+
+    .gait-modal-confirm-button-with-amount:active {
+      transform: translateY(1px);
+    }
+
+    .gait-modal-confirm-button-label {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .gait-modal-confirm-button-amount {
+      font-size: 13px;
+      font-weight: 500;
+      opacity: 0.9;
+    }
+
+    /* Terms */
+    .gait-modal-terms {
+      font-size: 12px;
+      color: #6b7280;
+      margin: 16px 0;
+      line-height: 1.5;
+    }
+
+    .gait-modal-terms a {
+      text-decoration: underline;
+      cursor: pointer;
+      color: #6b7280;
+    }
+
+    .gait-modal-terms a:hover {
+      color: #374151;
+    }
+
+    /* Confirm Button */
+    .gait-modal-confirm-button {
+      width: 100%;
+      padding: 14px;
+      font-size: 15px;
+      font-weight: 600;
+      border-radius: 10px;
+      border: none;
+      background: var(--gait-modal-button-bg, #e91e63);
+      color: var(--gait-modal-button-color, #fff);
+      cursor: pointer;
+      transition: all ${g.normal};
+    }
+
+    .gait-modal-confirm-button:hover {
+      background-color: var(--gait-modal-button-bg-hover, #c2185b);
+    }
+
+    .gait-modal-confirm-button:active {
+      transform: translateY(1px);
+    }
+
+    /* Modal Footer - The button section */
+    .gait-modal-footer {
+      padding: ${x.lg};
+      border-top: 1px solid #e5e7eb;
+      display: flex;
+      justify-content: flex-end;
+      gap: ${x.md};
+    }
+
+    /* Modal Button - The close button */
+    .gait-modal-button {
+      padding: ${x.sm} ${x.lg};
+      font-family: ${b.fontFamily.primary};
+      font-size: ${b.fontSize.md};
+      font-weight: ${b.fontWeight.medium};
+      border: none;
+      border-radius: ${q.md};
+      cursor: pointer;
+      transition: all ${g.normal};
+      background-color: ${c.primary.main};
+      color: ${c.primary.contrastText};
+    }
+
+    .gait-modal-button:hover {
+      background-color: ${c.primary.dark};
+    }
+
+    .gait-modal-button:active {
+      transform: translateY(1px);
+    }
+
+    /* Split Payment Feedback Banner */
+    .gait-modal-feedback {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border-radius: 8px;
+      margin-bottom: 16px;
+      font-size: 14px;
+      font-weight: 500;
+      animation: slideDown 0.3s ease-out;
+      transition: opacity 0.3s ease-out;
+    }
+
+    @keyframes slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .gait-modal-feedback-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      padding: 2px;
+    }
+
+    .gait-modal-feedback-icon svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .gait-modal-feedback-message {
+      flex: 1;
+      line-height: 1.4;
+    }
+
+    .gait-modal-feedback-loading {
+      background-color: #f0f9ff;
+      border: 1px solid #bae6fd;
+      color: #0369a1;
+    }
+
+    .gait-modal-feedback-loading .gait-modal-feedback-icon {
+      background-color: #0ea5e9;
+      color: #fff;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .gait-modal-feedback-success {
+      background-color: #f0fdf4;
+      border: 1px solid #bbf7d0;
+      color: #166534;
+    }
+
+    .gait-modal-feedback-success .gait-modal-feedback-icon {
+      background-color: #22c55e;
+      color: #fff;
+    }
+
+    .gait-modal-feedback-error {
+      background-color: #fef2f2;
+      border: 1px solid #fecaca;
+      color: #991b1b;
+    }
+
+    .gait-modal-feedback-error .gait-modal-feedback-icon {
+      background-color: #ef4444;
+      color: #fff;
+    }
+  `,document.head.appendChild(r)}function D(r,t,e){return`
+    <button 
+      type="button" 
+      ${t?"disabled":""}
+      style="${e}"
+    >
+      ${r}
+    </button>
+  `}function I(r){return`R ${r.toFixed(2)}`}const V=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M18 6L6 18M6 6l12 12" />
+</svg>
+`,C=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M20 6L9 17l-5-5" />
+</svg>
+`,j=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M18 6L6 18M6 6l12 12" />
+</svg>
+`,H=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M21 12a9 9 0 11-6.22-8.56" />
+</svg>
+`;function _(r){return!r||r.length===0?"":r.map(t=>`
+    <div class="gait-modal-item">
+      <img
+        src="${t.image||""}"
+        alt="${t.name||"Product"}"
+        class="gait-modal-item-image"
+      />
+      <div class="gait-modal-item-meta">
+        <h3 class="gait-modal-item-title">
+          ${t.name||""}
+        </h3>
+        <div class="gait-modal-item-quantity">
+          Qty: ${t.quantity||0}
+          <span class="gait-modal-item-price">${I(t.price||0)}</span>
+        </div>
+      </div>
+    </div>
+  `).join("")}function U(r){return!r||r.length===0?"":r.map(t=>{const e=typeof t.price=="number"?t.price:parseFloat(String(t.price))||0;return`
+      <div class="gait-modal-price-item">
+        <span>${t.name||""}</span>
+        <span>${I(e)}</span>
+      </div>
+    `}).join("")}function W(r,t,e){return`
+    <div class="gait-modal-container">
+      <div class="gait-modal-header">
+        <h2 class="gait-modal-header-title">Split Payment</h2>
+        <button class="gait-modal-close-icon" data-gait-modal-close aria-label="Close">
+          ${V}
+        </button>
+      </div>
+
+      <div class="gait-modal-body">
+        <!-- LEFT -->
+        <div class="gait-modal-left-panel">
+          <div class="gait-modal-items-container">
+            ${_(r)}
+          </div>
+
+          <div class="gait-modal-price-section">
+            <h4 class="gait-modal-price-title">Price details</h4>
+
+            ${U(t)}
+
+            ${e>0?`
+            <div class="gait-modal-price-total">
+              <span>Total</span>
+              <span>${I(e)}</span>
+            </div>
+            `:""}
+          </div>
+        </div>
+
+        <!-- RIGHT -->
+          <div class="gait-modal-right-panel">
+            <div class="gait-modal-split-section">
+              <!-- Feedback banner will be inserted here dynamically -->
+              <h4 class="gait-modal-split-title">How to split</h4>
+            
+            <div class="gait-modal-split-options">
+              <div class="gait-modal-split-option selected" data-split-method="equally">Equally</div>
+              <div class="gait-modal-split-option" data-split-method="by-amount">By amount</div>
+            </div>
+
+            <div class="gait-modal-email-inputs" data-email-inputs>
+            </div>
+
+            <button class="gait-modal-add-email-button" data-add-email>
+              Add someone
+            </button>
+
+            <button class="gait-modal-send-split-button" data-send-split>
+              Send split
+            </button>
+
+            <button class="gait-modal-confirm-button-with-amount" data-gait-modal-confirm>
+              <span class="gait-modal-confirm-button-label">Pay remaining - </span>
+              <span class="gait-modal-confirm-button-amount" data-confirm-amount>R 0.00</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `}const F={fee:10};function J(r){const t={};return Array.from(r.attributes).forEach(e=>{e.name.startsWith("data-")&&(t[e.name]=e.value)}),t}function Y(r){const t={};return Array.from(r.attributes).forEach(e=>{t[e.name]=e.value}),t}function K(r){return{get label(){return r.getAttribute("label")||"Button"},get theme(){return r.getAttribute("theme")||"dark"},get dataId(){return r.getAttribute("data-id")||null},get disabled(){return r.hasAttribute("disabled")&&r.getAttribute("disabled")!=="false"},get size(){return r.getAttribute("size")||"medium"},get items(){const t=r.getAttribute("items");if(!t)return[];try{return JSON.parse(t)}catch(e){return console.warn("[GaitButton] Failed to parse items attribute:",e),[]}},get totalCost(){const t=r.getAttribute("total-cost");if(!t)return 0;const e=parseFloat(t);return(isNaN(e)?0:e)+F.fee},get priceBreakdown(){const t=r.getAttribute("total-cost"),e=parseFloat(t||"0");return[{name:"Subtotal",price:isNaN(e)?0:e},{name:"Split Payment Fee",price:F.fee}]},get brandColor(){return r.getAttribute("brand-color")||c.cta.main},get customer(){const t=r.getAttribute("customer");if(!t)return null;try{return JSON.parse(t)}catch(e){return console.warn("[GaitButton] Failed to parse customer attribute:",e),null}},get webhook(){const t=r.getAttribute("webhook");if(!t)return null;try{return JSON.parse(t)}catch(e){return console.warn("[GaitButton] Failed to parse webhook attribute:",e),null}},get merchantStoreUrl(){const t=r.getAttribute("merchant-store-url");return t&&t.trim()!==""?t.trim():typeof window<"u"&&window.location?window.location.origin:""}}}function y(r){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)}function P(r,t,e){if(e.length===0)return r;if(t==="equally"){const i=e.length+1,a=r/i;return Math.max(0,r-a*e.length)}else if(t==="by-amount"){let i=0;return e.forEach(a=>{const n=a.amount||0;i+=n}),Math.max(0,r-i)}return r}function E(r,t){return r/t}function B(r,t,e){const i=[],a=r.querySelectorAll("[data-email-item]");return a.forEach(n=>{const o=n.getAttribute("data-email-item")||"";if(o)if(t==="by-amount"){const d=n.querySelector(".gait-modal-email-item-amount"),s=d&&parseFloat(d.textContent?.replace(/[^\d.]/g,"")||"0")||0;i.push({email:o,amount:s})}else{const d=a.length+1,s=E(e,d);i.push({email:o,amount:s})}}),i}function L(r){const t=r.querySelectorAll("[data-email-item]"),e=r.querySelectorAll("[data-email-input]");return t.length+e.length}class Q{modalElement;totalCost;currentSplitMethod="equally";dispatchEventFn;isSplitSent=!1;isSplitLoading=!1;splitFeedbackElement=null;feedbackHandler=null;constructor(t,e,i){this.modalElement=t,this.totalCost=e,this.dispatchEventFn=i,this.setup(),this.setupFeedbackListener()}setup(){const t=this.modalElement.querySelectorAll("[data-split-method]"),e=this.modalElement.querySelector("[data-email-inputs]"),i=this.modalElement.querySelector("[data-add-email]"),a=this.modalElement.querySelector("[data-send-split]");!e||!i||!a||(t.forEach(n=>{n.addEventListener("click",()=>{if(this.isSplitSent)return;t.forEach(s=>s.classList.remove("selected")),n.classList.add("selected");const o=n.getAttribute("data-split-method")||"equally",d=this.currentSplitMethod;this.currentSplitMethod=o,d!==o&&this.updateActiveInputsForSplitMethod(d,o),this.updateEmailItemsForSplitMethod(),this.updateSplitCalculation()})}),i.addEventListener("click",()=>this.addEmailField()),e.addEventListener("input",n=>{n.target.hasAttribute("data-email-input")&&this.updateSplitCalculation()}),a.addEventListener("click",()=>this.handleSendSplit()),this.updateSplitCalculation())}addEmailField(){if(this.isSplitSent)return;const t=this.modalElement.querySelector("[data-email-inputs]");if(!t)return;const e=this.findEmptyInput(t);if(e){if(e instanceof HTMLInputElement)e.focus();else{const i=e.querySelector("[data-email-input]");i&&i.focus()}return}this.currentSplitMethod==="by-amount"?this.addByAmountInput(t):this.addEquallyInput(t)}findEmptyInput(t){if(this.currentSplitMethod==="by-amount"){const e=t.querySelectorAll(".gait-modal-email-amount-row");for(const i of Array.from(e)){const a=i.querySelector("[data-email-input]");if(a&&!a.value.trim())return i}}else{const e=t.querySelectorAll("[data-email-input]");for(const i of Array.from(e))if(!i.parentElement?.classList.contains("gait-modal-email-amount-row")&&!i.value.trim())return i}return null}removeEmptyInputs(t){t.querySelectorAll(".gait-modal-email-amount-row").forEach(a=>{const n=a.querySelector("[data-email-input]");n&&!n.value.trim()&&t.removeChild(a)}),t.querySelectorAll("[data-email-input]").forEach(a=>{a.parentElement?.classList.contains("gait-modal-email-amount-row")||a.value.trim()||t.removeChild(a)})}calculateRemainingAmount(t){const e=this.modalElement.querySelector("[data-email-inputs]");if(!e)return this.totalCost;let i=0;return e.querySelectorAll("[data-email-item]").forEach(d=>{const s=d.querySelector(".gait-modal-email-item-amount");if(s){const l=s.textContent||"0.00",m=parseFloat(l.replace(/[^\d.]/g,""))||0;i+=m}}),e.querySelectorAll(".gait-modal-email-amount-row").forEach(d=>{if(d===t)return;const s=d.querySelector("[data-email-amount-input]");if(s&&s.value){const l=parseFloat(s.value)||0;i+=l}}),Math.max(0,this.totalCost-i)}updateAmountInputMaxValues(t){const e=this.modalElement.querySelector("[data-email-inputs]");if(!e)return;const i=this.calculateRemainingAmount(t),a=i.toFixed(2);e.querySelectorAll("[data-email-amount-input]").forEach(o=>{o.closest(".gait-modal-email-amount-row")!==t&&(o.max=a,(parseFloat(o.value)||0)>i&&(o.value=a,o.style.borderColor="#ef4444",setTimeout(()=>{o.style.borderColor=""},2e3)))})}addByAmountInput(t){const e=document.createElement("div");e.className="gait-modal-email-amount-row";const i=document.createElement("input");i.type="email",i.className="gait-modal-email-input",i.placeholder="Email address",i.setAttribute("data-email-input","");const a=document.createElement("input");a.type="number",a.className="gait-modal-email-amount-input",a.placeholder="0.00",a.step="0.01",a.min="0",a.setAttribute("data-email-amount-input","");const n=this.calculateRemainingAmount();a.max=n.toFixed(2);const o=document.createElement("button");o.type="button",o.className="gait-modal-done-button",o.textContent="Done",o.setAttribute("data-done-email","");const d=()=>{const s=i.value.trim();let l=parseFloat(a.value)||0;const m=this.calculateRemainingAmount(e);if(l>m&&(l=m,a.value=m.toFixed(2),a.style.borderColor="#ef4444",setTimeout(()=>{a.style.borderColor=""},2e3)),s&&y(s)){const p=this.createEmailItem(s,l);t.replaceChild(p,e),this.updateSplitCalculation(),this.updateAmountInputMaxValues()}else s||(t.removeChild(e),this.updateAmountInputMaxValues())};a.addEventListener("input",()=>{const s=this.calculateRemainingAmount(e);(parseFloat(a.value)||0)>s?(a.value=s.toFixed(2),a.style.borderColor="#ef4444",setTimeout(()=>{a.style.borderColor=""},2e3)):a.style.borderColor="",this.updateAmountInputMaxValues(e)}),o.addEventListener("click",d),i.addEventListener("blur",()=>{!i.value.trim()&&!a.value&&setTimeout(()=>{e.parentElement&&!i.value.trim()&&t.removeChild(e)},100)}),e.appendChild(i),e.appendChild(a),e.appendChild(o),t.appendChild(e),i.focus()}addEquallyInput(t){const e=document.createElement("input");e.type="email",e.className="gait-modal-email-input",e.placeholder="Email address",e.setAttribute("data-email-input","");const i=()=>{const a=e.value.trim();a&&y(a)&&(this.convertInputToEmailItem(e),this.updateSplitCalculation())};e.addEventListener("blur",()=>{const a=e.value.trim();a&&y(a)?i():a||setTimeout(()=>{e.parentElement&&!e.value.trim()&&t.removeChild(e)},100)}),e.addEventListener("keydown",a=>{a.key==="Enter"&&(a.preventDefault(),i())}),t.appendChild(e),e.focus()}createEmailItem(t,e=0,i=!1){const a=document.createElement("div");a.className=`gait-modal-email-item${i?" sent":""}`,a.setAttribute("data-email-item",t);let n=e;if(this.currentSplitMethod==="equally"){const l=this.modalElement.querySelector("[data-email-inputs]"),m=l?L(l)+1:2;n=E(this.totalCost,m)}const o=i?`<div class="gait-modal-email-item-sent-check">${C}</div>`:"";a.innerHTML=`
+      <span class="gait-modal-email-item-email">${t}</span>
+      <div class="gait-modal-email-item-right">
+        <div class="gait-modal-email-item-amount-container">
+          <span class="gait-modal-email-item-amount">R ${n.toFixed(2)}</span>
+          ${o}
+        </div>
+        <div class="gait-modal-email-item-actions">
+          <button class="gait-modal-email-item-edit" data-edit-email="${t}">Edit</button>
+          <button class="gait-modal-email-item-remove" data-remove-email="${t}">Remove</button>
+        </div>
+      </div>
+    `;const d=a.querySelector(`[data-edit-email="${t}"]`);d&&d.addEventListener("click",l=>{l.preventDefault(),l.stopPropagation(),this.convertEmailItemToInput(a)});const s=a.querySelector(`[data-remove-email="${t}"]`);return s&&s.addEventListener("click",l=>{l.preventDefault(),l.stopPropagation(),this.removeEmailItem(a)}),a}convertEmailItemToInput(t){if(!t.parentElement)return;const i=t.getAttribute("data-email-item")||"";if(this.currentSplitMethod==="by-amount"){const a=document.createElement("div");a.className="gait-modal-email-amount-row";const n=document.createElement("input");n.type="email",n.className="gait-modal-email-input",n.placeholder="Email address",n.setAttribute("data-email-input",""),n.value=i;const o=document.createElement("input");o.type="number",o.className="gait-modal-email-amount-input",o.placeholder="0.00",o.step="0.01",o.min="0",o.setAttribute("data-email-amount-input","");const d=t.querySelector(".gait-modal-email-item-amount");let s=0;if(d){const p=d.textContent||"0.00";s=parseFloat(p.replace(/[^\d.]/g,""))||0,o.value=s.toFixed(2)}const l=this.calculateRemainingAmount(a)+s;o.max=l.toFixed(2);const m=document.createElement("button");m.type="button",m.className="gait-modal-done-button",m.textContent="Done",m.setAttribute("data-done-email",""),m.addEventListener("click",()=>{const p=n.value.trim();let u=parseFloat(o.value)||0;const h=this.calculateRemainingAmount(a)+s;if(u>h&&(u=h,o.value=h.toFixed(2),o.style.borderColor="#ef4444",setTimeout(()=>{o.style.borderColor=""},2e3)),p&&y(p)){const f=this.createEmailItem(p,u);a.parentElement&&a.parentElement.replaceChild(f,a),this.updateSplitCalculation(),this.updateAmountInputMaxValues()}else p||(a.parentElement&&a.parentElement.removeChild(a),this.updateAmountInputMaxValues())}),o.addEventListener("input",()=>{const p=this.calculateRemainingAmount(a)+s;(parseFloat(o.value)||0)>p?(o.value=p.toFixed(2),o.style.borderColor="#ef4444",setTimeout(()=>{o.style.borderColor=""},2e3)):o.style.borderColor="",this.updateAmountInputMaxValues(a)}),a.appendChild(n),a.appendChild(o),a.appendChild(m),t.parentElement&&t.parentElement.replaceChild(a,t),n.focus(),n.select()}else{const a=document.createElement("input");a.type="email",a.className="gait-modal-email-input",a.placeholder="Email address",a.setAttribute("data-email-input",""),a.value=i;const n=()=>{const o=a.value.trim();o&&y(o)?(this.convertInputToEmailItem(a),this.updateSplitCalculation()):o||setTimeout(()=>{a.parentElement&&!a.value.trim()&&a.parentElement.removeChild(a)},100)};a.addEventListener("blur",n),a.addEventListener("keydown",o=>{o.key==="Enter"&&(o.preventDefault(),n())}),t.parentElement&&t.parentElement.replaceChild(a,t),a.focus(),a.select()}}convertInputToEmailItem(t){const e=t.value.trim();if(!e||!y(e))return;const i=t.parentElement;if(!i)return;const a=L(i)+1,n=this.currentSplitMethod==="equally"?E(this.totalCost,a):0,o=this.createEmailItem(e,n);i.replaceChild(o,t)}removeEmailItem(t){const e=t.parentElement;e&&(e.removeChild(t),this.updateSplitCalculation(),this.updateAmountInputMaxValues())}updateActiveInputsForSplitMethod(t,e){const i=this.modalElement.querySelector("[data-email-inputs]");i&&(this.removeEmptyInputs(i),t==="equally"&&e==="by-amount"&&Array.from(i.querySelectorAll("[data-email-input]")).filter(n=>!n.parentElement?.classList.contains("gait-modal-email-amount-row")).forEach(n=>{const o=n.value.trim(),d=n.parentElement;if(!d)return;const s=document.createElement("div");s.className="gait-modal-email-amount-row";const l=document.createElement("input");l.type="email",l.className="gait-modal-email-input",l.placeholder="Email address",l.setAttribute("data-email-input",""),l.value=o;const m=document.createElement("input");m.type="number",m.className="gait-modal-email-amount-input",m.placeholder="0.00",m.step="0.01",m.min="0",m.setAttribute("data-email-amount-input","");const p=this.calculateRemainingAmount(s);m.max=p.toFixed(2);const u=document.createElement("button");u.type="button",u.className="gait-modal-done-button",u.textContent="Done",u.setAttribute("data-done-email",""),u.addEventListener("click",()=>{const h=l.value.trim();let f=parseFloat(m.value)||0;const M=this.calculateRemainingAmount(s);if(f>M&&(f=M,m.value=M.toFixed(2),m.style.borderColor="#ef4444",setTimeout(()=>{m.style.borderColor=""},2e3)),h&&y(h)){const nt=this.createEmailItem(h,f);d.replaceChild(nt,s),this.updateSplitCalculation(),this.updateAmountInputMaxValues()}}),m.addEventListener("input",()=>{const h=this.calculateRemainingAmount(s);(parseFloat(m.value)||0)>h?(m.value=h.toFixed(2),m.style.borderColor="#ef4444",setTimeout(()=>{m.style.borderColor=""},2e3)):m.style.borderColor="",this.updateAmountInputMaxValues(s)}),s.appendChild(l),s.appendChild(m),s.appendChild(u),d.replaceChild(s,n),l.focus()}),t==="by-amount"&&e==="equally"&&i.querySelectorAll(".gait-modal-email-amount-row").forEach(n=>{const o=n.querySelector("[data-email-input]");if(!o)return;const d=o.value.trim(),s=n.parentElement;if(!s)return;const l=document.createElement("input");l.type="email",l.className="gait-modal-email-input",l.placeholder="Email address",l.setAttribute("data-email-input",""),l.value=d;const m=()=>{const p=l.value.trim();p&&y(p)&&(this.convertInputToEmailItem(l),this.updateSplitCalculation())};l.addEventListener("blur",m),l.addEventListener("keydown",p=>{p.key==="Enter"&&(p.preventDefault(),m())}),s.replaceChild(l,n),l.focus()}))}updateEmailItemsForSplitMethod(){const t=this.modalElement.querySelector("[data-email-inputs]");if(!t)return;const e=t.querySelectorAll("[data-email-item]"),i=e.length+1;e.forEach(a=>{const n=a.querySelector(".gait-modal-email-item-right");if(!n)return;const o=n.querySelector(".gait-modal-email-item-amount");if(o){if(this.currentSplitMethod==="equally"){const d=E(this.totalCost,i);o.textContent=`R ${d.toFixed(2)}`}else if(this.currentSplitMethod==="by-amount"){const d=o.textContent||"R 0.00",s=parseFloat(d.replace(/[^\d.]/g,""))||0;o.textContent=`R ${s.toFixed(2)}`}}})}updateSplitCalculation(){const t=this.modalElement.querySelector("[data-email-inputs]"),e=this.modalElement.querySelector("[data-confirm-amount]");if(!t||!e)return;const i=B(t,this.currentSplitMethod,this.totalCost),a=t.querySelectorAll("[data-email-input]");a.forEach(o=>{const d=o.value.trim();if(d&&y(d)){const s=i.length+a.length+1,l=this.currentSplitMethod==="equally"?E(this.totalCost,s):0;i.push({email:d,amount:l})}});const n=i.length>0?P(this.totalCost,this.currentSplitMethod,i):this.totalCost;e.textContent=`R ${n.toFixed(2)}`,this.currentSplitMethod==="by-amount"&&this.updateAmountInputMaxValues()}handleSendSplit(){const t=this.modalElement.querySelector("[data-email-inputs]"),e=this.modalElement.querySelector("[data-send-split]");if(!t||!e)return;const i=B(t,this.currentSplitMethod,this.totalCost);if(i.length===0){this.showFeedback("Please add at least one email address","error");return}if(this.isSplitSent||this.isSplitLoading)return;this.isSplitLoading=!0,e.disabled=!0,e.textContent="Sending...",this.showFeedback("Sending split payment...","loading");const a=P(this.totalCost,this.currentSplitMethod,i);this.dispatchEventFn(new CustomEvent("gait-split-sent",{detail:{splitMethod:this.currentSplitMethod,emails:i.map(n=>n.email),emailData:i,totalCost:this.totalCost,yourAmount:a,timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}setupFeedbackListener(){this.feedbackHandler=t=>{const e=t;e.detail&&this.handleSplitFeedback(e.detail)},document.addEventListener("gait-split-feedback",this.feedbackHandler)}cleanup(){this.feedbackHandler&&(document.removeEventListener("gait-split-feedback",this.feedbackHandler),this.feedbackHandler=null)}handleSplitFeedback(t){this.isSplitLoading=!1;const e=this.modalElement.querySelector("[data-send-split]");t.success?(this.isSplitSent=!0,this.markEmailsAsSent(),this.disableSplitOptions(),e&&(e.disabled=!0,e.textContent="Split sent!"),this.showFeedback(t.message||"Split payment sent successfully","success")):(e&&(e.disabled=!1,e.textContent="Send split"),this.showFeedback(t.message||t.error||"Failed to send split payment","error"))}markEmailsAsSent(){const t=this.modalElement.querySelector("[data-email-inputs]");if(!t)return;t.querySelectorAll("[data-email-item]").forEach(i=>{if(!i.classList.contains("sent")){i.classList.add("sent");const a=i.querySelector(".gait-modal-email-item-right");if(a){let o=a.querySelector(".gait-modal-email-item-amount-container");const d=a.querySelector(".gait-modal-email-item-amount");if(!o&&d&&(o=document.createElement("div"),o.className="gait-modal-email-item-amount-container",d.parentElement?.replaceChild(o,d),o.appendChild(d)),o&&!o.querySelector(".gait-modal-email-item-sent-check")){const s=document.createElement("div");s.className="gait-modal-email-item-sent-check",s.innerHTML=C,o.appendChild(s)}}const n=i.querySelector(".gait-modal-email-item-actions");n&&(n.style.display="none")}})}showFeedback(t,e){this.splitFeedbackElement&&(this.splitFeedbackElement.remove(),this.splitFeedbackElement=null);const i=document.createElement("div");i.className=`gait-modal-feedback gait-modal-feedback-${e}`,i.setAttribute("data-split-feedback","");const a=e==="success"?C:e==="error"?j:H;i.innerHTML=`
+      <span class="gait-modal-feedback-icon">${a}</span>
+      <span class="gait-modal-feedback-message">${t}</span>
+    `;const n=this.modalElement.querySelector(".gait-modal-split-section");n&&(n.insertBefore(i,n.firstChild),this.splitFeedbackElement=i,e!=="loading"&&setTimeout(()=>{this.splitFeedbackElement===i&&(i.style.opacity="0",setTimeout(()=>{i.parentElement&&i.remove(),this.splitFeedbackElement===i&&(this.splitFeedbackElement=null)},300))},5e3))}disableSplitOptions(){this.modalElement.querySelectorAll("[data-split-method]").forEach(i=>{const a=i;a.style.pointerEvents="none",a.style.opacity="0.5",a.style.cursor="not-allowed",a.setAttribute("aria-disabled","true")});const e=this.modalElement.querySelector("[data-add-email]");e&&(e.style.pointerEvents="none",e.style.opacity="0.5",e.style.cursor="not-allowed",e.setAttribute("aria-disabled","true"))}}async function X(r,t=2e3){console.log("[SplitPaymentAPI] Sending split payment request:",r);const e="https://api.usegait.com/checkout";try{const a=await(await fetch(`${e}/v1/payments`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r),signal:AbortSignal.timeout(t)})).json().catch(()=>({success:!1,error:"Failed to parse API response"}));if(a.success){const n={success:!0,message:a.message,data:a.data};return console.log("[SplitPaymentAPI] Split payment sent successfully:",n),n}else{const n={success:!1,message:a.message,error:a.error};return console.error("[SplitPaymentAPI] Split payment failed:",n),n}}catch(i){const a={success:!1,message:"Failed to send split payment",error:i instanceof Error?i.message:"Network error or server unavailable"};return console.error("[SplitPaymentAPI] Split payment failed:",a,i),a}}let Z=r=>crypto.getRandomValues(new Uint8Array(r)),tt=(r,t,e)=>{let i=(2<<Math.log2(r.length-1))-1,a=-~(1.6*i*t/r.length);return(n=t)=>{let o="";for(;;){let d=e(a),s=a|0;for(;s--;)if(o+=r[d[s]&i]||"",o.length>=n)return o}}},et=(r,t=21)=>tt(r,t|0,Z);const A={apiGateway:{MERCHANT_SERVICE_API:"https://api.usegait.com/merchant",CHECKOUT_SERVICE_API:"https://api.usegait.com/checkout"},paylink:{DOMAIN:"https://checkout.usegait.com"}},at=A.apiGateway.MERCHANT_SERVICE_API;class it{static async getMerchant(t){try{return await(await fetch(`${at}/v1/merchant/identity/${t}`,{method:"GET",headers:{"Content-Type":"application/json"}})).json()}catch(e){return e}}}const S=A.apiGateway.CHECKOUT_SERVICE_API;class ot{static async getPayment(t){try{return await(await fetch(`${S}/v1/payments/${t}`,{method:"GET",headers:{"Content-Type":"application/json"}})).json()}catch(e){return e}}static async updatePaymentStatus(t,e,i){try{return await(await fetch(`${S}/v1/payments/merchants/${t}/${e}/status`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:i})})).json()}catch(a){return a}}static async createWebhook(t,e,i){try{return await(await fetch(`${S}/v1/webhooks/${t}/${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)})).json()}catch(a){return a}}static async updatePayment(t,e,i){try{return await(await fetch(`${S}/v1/payments/merchants/${t}/${i}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({paymentId:e})})).json()}catch(a){return a}}}const w=(typeof process<"u"&&process.env?"0.0.16":void 0)||"0.0.0";class v extends HTMLElement{buttonElement=null;hasRendered=!1;mutationObserver=null;modalElement=null;modalId;splitPaymentManager=null;attributeGetters;storedSplitPaymentRequest=null;merchantId=null;paymentProvider="stripe";static version=w;version=w;static get observedAttributes(){return["label","theme","data-id","disabled","size","style","items","price-breakdown","total-cost","brand-color","webhook","merchant-store-url"]}constructor(){super(),this.attachShadow({mode:"open"}),this.modalId=`gait-modal-${Math.random().toString(36).substr(2,9)}`,this.attributeGetters=K(this)}connectedCallback(){!this.hasRendered&&this.shadowRoot&&this.render(),this.setupEventListeners(),this.setupMutationObserver(),this.setupApiListeners(),setTimeout(()=>this.processData(),0)}disconnectedCallback(){this.buttonElement&&this.buttonElement.removeEventListener("click",this.handleClick),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.closeModal(),this.splitPaymentManager&&(this.splitPaymentManager=null),this.removeEventListener("gait-split-sent",this.handleSplitSent)}attributeChangedCallback(t,e,i){if(e!==i&&!(!this.isConnected||!this.shadowRoot)){if(t==="style"&&this.buttonElement&&this.hasRendered){const a=(i||"").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");this.buttonElement.setAttribute("style",a);return}this.hasRendered&&(this.render(),this.setupEventListeners()),(t==="data-id"||t.startsWith("data-"))&&(t==="data-id"&&(this.merchantId=null),setTimeout(()=>this.processData(),0))}}get label(){return this.attributeGetters.label}get theme(){return this.attributeGetters.theme}get dataId(){return this.attributeGetters.dataId}get disabled(){return this.attributeGetters.disabled}get size(){return this.attributeGetters.size}get items(){return this.attributeGetters.items}get priceBreakdown(){return this.attributeGetters.priceBreakdown}get totalCost(){return this.attributeGetters.totalCost}get brandColor(){return this.attributeGetters.brandColor}get customer(){return this.attributeGetters.customer}get webhook(){return this.attributeGetters.webhook}get merchantStoreUrl(){return this.attributeGetters.merchantStoreUrl}getDataAttributes(){return J(this)}async fetchMerchantId(){const t=this.dataId;if(!t)return console.warn("[GaitButton] No checkoutId (data-id) provided, cannot fetch merchantId"),this.showMerchantIdError(),!1;try{const e=await it.getMerchant(t);return e.success&&e.data?.merchantId?(this.merchantId=e.data.merchantId,this.paymentProvider=e.data.paymentProvider,!0):(console.error("[GaitButton] Failed to fetch merchantId:",e),this.showMerchantIdError(),!1)}catch(e){return console.error("[GaitButton] Error fetching merchantId:",e),this.showMerchantIdError(),!1}}showMerchantIdError(){const t="Unable to identify your account. Please go to your dashboard and copy your checkout identity.";alert(t),this.dispatchEvent(new CustomEvent("gait-merchant-id-error",{detail:{message:t,timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}async processData(){const t=this.dataId,e=this.getDataAttributes();if(t&&!this.merchantId&&await this.fetchMerchantId(),t||Object.keys(e).length>0){const i={id:t,...e,timestamp:new Date().toISOString()};this.dispatchEvent(new CustomEvent("gait-data-processed",{detail:i,bubbles:!0,composed:!0}))}}handleClick=async t=>{if(this.disabled){t.preventDefault(),t.stopPropagation();return}const e={label:this.label,theme:this.theme,dataId:this.dataId,dataAttributes:this.getDataAttributes(),timestamp:new Date().toISOString()};this.dispatchEvent(new CustomEvent("gait-click",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("click",{detail:e,bubbles:!0,composed:!0})),!(!this.merchantId&&(!await this.fetchMerchantId()||!this.merchantId))&&this.openModal()};setupEventListeners(){this.shadowRoot&&(this.buttonElement&&this.buttonElement.removeEventListener("click",this.handleClick),this.buttonElement=this.shadowRoot.querySelector("button"),this.buttonElement&&this.buttonElement.addEventListener("click",this.handleClick))}setupMutationObserver(){this.mutationObserver&&this.mutationObserver.disconnect(),this.mutationObserver=new MutationObserver(t=>{let e=!1;for(const i of t)if(i.type==="attributes"){const a=i.attributeName;if(a&&a.startsWith("data-")&&!v.observedAttributes.includes(a)){e=!0;break}}e&&this.isConnected&&this.processData()}),this.mutationObserver.observe(this,{attributes:!0,attributeFilter:void 0})}setupApiListeners(){this.addEventListener("gait-split-sent",this.handleSplitSent)}handleConfirmPayment=async()=>{if(console.log("[GaitButton] Pay remaining button clicked"),!this.storedSplitPaymentRequest){console.error("[GaitButton] Split payment must be sent first before paying remaining amount");return}if(!this.merchantId&&(!await this.fetchMerchantId()||!this.merchantId))return;const t={merchantId:this.merchantId,splitId:this.storedSplitPaymentRequest.splitId,paymentId:this.storedSplitPaymentRequest.paymentSplits.find(a=>a.initiator)?.paymentId},i=`${A.paylink.DOMAIN}/payment/${t.paymentId}`;window.open(i,"_blank"),this.dispatchEvent(new CustomEvent("gait-confirm",{detail:t,bubbles:!0,composed:!0})),this.closeModal()};handleSplitSent=async t=>{const i=t.detail;if(!this.merchantId&&(!await this.fetchMerchantId()||!this.merchantId))return;const a=this.merchantId,n=this.customer;if(!n||!n.email){console.error("[GaitButton] Customer email is required for split payment");return}const o=this.webhook;if(!o||!o.url||o.body==null){console.error("[GaitButton] Webhook with url and body is required");return}const s=et("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",6),l=s(),m=[];m.push({paymentId:s(),email:n.email,amount:i.yourAmount,isPaid:!1,datePaid:null,initiator:!0}),i.emailData.forEach(u=>{m.push({paymentId:s(),email:u.email,amount:u.amount||0,isPaid:!1,datePaid:null,initiator:!1})});const p={merchantId:a,splitId:l,paymentSplits:m,splitMethod:i.splitMethod,timestamp:i.timestamp,totalCost:i.totalCost,items:this.items,priceBreakdown:this.priceBreakdown,brandColor:this.brandColor,merchantStoreUrl:this.merchantStoreUrl,subTotal:this.priceBreakdown.find(u=>u.name==="Subtotal")?.price||0,paymentProvider:this.paymentProvider};console.log("[GaitButton] Split payment request body:",JSON.stringify(p,null,2));try{const u=await X(p,2e3);if(u.success){const h=u.data?.splitId||l;this.storedSplitPaymentRequest={...p,splitId:h};try{const f=await ot.createWebhook(a,h,{url:o.url,body:o.body});console.log("[GaitButton] Webhook created:",f)}catch(f){console.error("[GaitButton] Failed to create webhook:",f)}}if(this.modalElement){const h=this.modalElement.querySelector("[data-gait-modal-confirm]");h&&(h.disabled=!1,h.style.opacity="1",h.style.cursor="pointer")}this.dispatchEvent(new CustomEvent("gait-split-feedback",{detail:{success:u.success,message:u.message,data:u.success?this.storedSplitPaymentRequest:u.data,error:u.error,timestamp:new Date().toISOString()},bubbles:!0,composed:!0})),console.log("[GaitButton] Split payment API response:",u)}catch(u){console.error("[GaitButton] Split payment API error:",u),this.dispatchEvent(new CustomEvent("gait-split-feedback",{detail:{success:!1,message:"Failed to send split payment",error:u instanceof Error?u.message:"Unknown error",timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}};openModal(){O(),this.closeModal(),this.modalElement=document.createElement("div"),this.modalElement.className="gait-modal-backdrop",this.modalElement.id=this.modalId;const t=this.brandColor;t&&this.modalElement&&(this.modalElement.style.setProperty("--gait-modal-brand-color",t),this.modalElement.style.setProperty("--gait-modal-button-bg",t),this.modalElement.style.setProperty("--gait-modal-button-bg-hover",$(t,.15)),this.modalElement.style.setProperty("--gait-modal-button-color",T(t)?"#ffffff":"#000000")),this.modalElement.innerHTML=W(this.items,this.priceBreakdown,this.totalCost);const e=this.modalElement.querySelector("[data-gait-modal-close]");e&&e.addEventListener("click",this.closeModal);const i=this.modalElement.querySelector("[data-gait-modal-confirm]");i&&(i.disabled=!0,i.style.opacity="0.5",i.style.cursor="not-allowed",i.addEventListener("click",this.handleConfirmPayment)),this.splitPaymentManager=new Q(this.modalElement,this.totalCost,n=>this.dispatchEvent(n)),this.modalElement._splitPaymentManager=this.splitPaymentManager,this.modalElement.addEventListener("click",n=>{n.target===this.modalElement&&this.closeModal()});const a=n=>{n.key==="Escape"&&this.modalElement&&(this.closeModal(),document.removeEventListener("keydown",a))};document.addEventListener("keydown",a),document.body.appendChild(this.modalElement),requestAnimationFrame(()=>{this.modalElement&&this.modalElement.classList.add("gait-modal-open")})}closeModal=()=>{this.modalElement&&(this.splitPaymentManager&&this.splitPaymentManager.cleanup(),this.modalElement.classList.remove("gait-modal-open"),setTimeout(()=>{this.modalElement&&this.modalElement.parentNode&&this.modalElement.parentNode.removeChild(this.modalElement),this.modalElement=null,this.splitPaymentManager=null},250))};render(){const t=this.shadowRoot;if(!t)return;const e=!this.hasRendered,i=G(this.theme,this.size,this.brandColor,$,T),n=(this.getAttribute("style")||"").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");if(t.innerHTML=`
+      ${i}
+      ${D(this.label,this.disabled,n)}
+    `,this.hasRendered=!0,this.setupEventListeners(),e){const o=Y(this);console.log("[GaitButton] rendered",o),this.dispatchEvent(new CustomEvent("gait-loaded",{detail:{attributes:o,dataId:this.dataId,dataAttributes:this.getDataAttributes(),label:this.label,theme:this.theme,size:this.size,disabled:this.disabled,timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}}}customElements.get("gait-button")||customElements.define("gait-button",v),customElements.get("gait-button")||customElements.define("gait-button",v),typeof window<"u"&&(window.GaitButton=v,window.GaitButtonVersion=w,console.log(`[GaitButton] Version: ${w}`)),k.GAIT_BUTTON_VERSION=w,k.GaitButton=v,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})})(this.GaitButton=this.GaitButton||{});