voltage-payments-component/dist/PaymentButton-Cfmn4PL6.js

Lightweight, framework-agnostic Bitcoin payment components for web applications using Voltage Payments

import { S as SvelteComponent, i as init, s as safe_not_equal, a as append_styles, d as detach, t as transition_out, b as transition_in, y as toggle_class, z as set_style, x as group_outros, c as check_outros, e as insert, m as append, l as listen, p as element, A as svg_element, q as space, v as attr, g as createEventDispatcher, P as PaymentInline, h as destroy_component, j as create_bidirectional_transition, k as add_render_callback, n as mount_component, u as create_component, B as noop, C as text, D as set_data } from "./PaymentInline-DS0xmQAd.js";
import { a as slide } from "./index-DzIlLHq1.js";
function add_css(target) {
  append_styles(target, "svelte-fuj1ci", '.voltage-button-payment.svelte-fuj1ci{display:flex;flex-direction:column;gap:1rem;max-width:400px}.voltage-payment-button.svelte-fuj1ci{display:inline-flex;align-items:center;gap:0.75rem;padding:0.875rem 1.5rem;background:#f7931a;color:white;border:none;border-radius:8px;font-family:system-ui, sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all 200ms ease-in-out;text-decoration:none;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);position:relative;overflow:hidden}.voltage-payment-button.svelte-fuj1ci:hover:not(:disabled){opacity:0.9;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.15)}.voltage-payment-button.svelte-fuj1ci:active:not(:disabled){transform:translateY(0)}.voltage-payment-button.svelte-fuj1ci:disabled{cursor:not-allowed;opacity:0.7}.voltage-payment-button.active.svelte-fuj1ci{background:#6b7280}.voltage-payment-button.processing.svelte-fuj1ci{background:#059669}.voltage-payment-button.svelte-fuj1ci:focus{outline:2px solid #f7931a;outline-offset:2px}.voltage-payment-button-icon.svelte-fuj1ci{flex-shrink:0;transition:transform 200ms ease-in-out}.voltage-payment-button-icon.spin.svelte-fuj1ci{animation:svelte-fuj1ci-spin 1s linear infinite}.voltage-payment-button-text.svelte-fuj1ci{white-space:nowrap;font-weight:600}.voltage-payment-interface.svelte-fuj1ci{border-top:1px solid #e5e7eb;padding-top:1rem}.voltage-payment-button.processing.svelte-fuj1ci::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(\n      90deg,\n      transparent,\n      rgba(255, 255, 255, 0.2),\n      transparent\n    );animation:svelte-fuj1ci-shimmer 2s infinite}@keyframes svelte-fuj1ci-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes svelte-fuj1ci-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@media(prefers-color-scheme: dark){.voltage-payment-button.svelte-fuj1ci{box-shadow:0 2px 4px rgba(0, 0, 0, 0.3)}.voltage-payment-button.svelte-fuj1ci:hover:not(:disabled){box-shadow:0 4px 8px rgba(0, 0, 0, 0.4)}.voltage-payment-interface.svelte-fuj1ci{border-top-color:#374151}}@media(max-width: 640px){.voltage-button-payment.svelte-fuj1ci{max-width:100%}.voltage-payment-button.svelte-fuj1ci{padding:0.75rem 1.25rem;font-size:0.875rem;gap:0.5rem}.voltage-payment-button-icon.svelte-fuj1ci{width:18px;height:18px}}@media(prefers-reduced-motion: reduce){.voltage-payment-button.svelte-fuj1ci,.voltage-payment-button-icon.svelte-fuj1ci{transition:none}.voltage-payment-button-icon.spin.svelte-fuj1ci{animation:none}.voltage-payment-button.processing.svelte-fuj1ci::before{animation:none}}@media(prefers-contrast: high){.voltage-payment-button.svelte-fuj1ci{border:2px solid currentColor}.voltage-payment-interface.svelte-fuj1ci{border-top-width:2px}}');
}
function create_else_block_1(ctx) {
  let path0;
  let path1;
  return {
    c() {
      path0 = svg_element("path");
      path1 = svg_element("path");
      attr(path0, "d", "M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7z");
      attr(path1, "d", "M9 12l2 2 4-4");
    },
    m(target, anchor) {
      insert(target, path0, anchor);
      insert(target, path1, anchor);
    },
    d(detaching) {
      if (detaching) {
        detach(path0);
        detach(path1);
      }
    }
  };
}
function create_if_block_4(ctx) {
  let path;
  return {
    c() {
      path = svg_element("path");
      attr(path, "d", "M6 18L18 6M6 6l12 12");
    },
    m(target, anchor) {
      insert(target, path, anchor);
    },
    d(detaching) {
      if (detaching) {
        detach(path);
      }
    }
  };
}
function create_if_block_3(ctx) {
  let path;
  return {
    c() {
      path = svg_element("path");
      attr(path, "d", "M12 2v4m6.364.636l-2.828 2.828M20 12h-4m-2.364 6.364l-2.828-2.828M12 20v-4m-6.364-2.364l2.828-2.828M4 12h4m2.364-6.364l2.828 2.828");
    },
    m(target, anchor) {
      insert(target, path, anchor);
    },
    d(detaching) {
      if (detaching) {
        detach(path);
      }
    }
  };
}
function create_else_block(ctx) {
  let t_value = (
    /*description*/
    (ctx[4] || "Pay with Bitcoin") + ""
  );
  let t;
  return {
    c() {
      t = text(t_value);
    },
    m(target, anchor) {
      insert(target, t, anchor);
    },
    p(ctx2, dirty) {
      if (dirty & /*description*/
      16 && t_value !== (t_value = /*description*/
      (ctx2[4] || "Pay with Bitcoin") + "")) set_data(t, t_value);
    },
    d(detaching) {
      if (detaching) {
        detach(t);
      }
    }
  };
}
function create_if_block_2(ctx) {
  let t;
  return {
    c() {
      t = text("Cancel Payment");
    },
    m(target, anchor) {
      insert(target, t, anchor);
    },
    p: noop,
    d(detaching) {
      if (detaching) {
        detach(t);
      }
    }
  };
}
function create_if_block_1(ctx) {
  let t;
  return {
    c() {
      t = text("Processing...");
    },
    m(target, anchor) {
      insert(target, t, anchor);
    },
    p: noop,
    d(detaching) {
      if (detaching) {
        detach(t);
      }
    }
  };
}
function create_if_block(ctx) {
  let div;
  let paymentinline;
  let div_transition;
  let current;
  paymentinline = new PaymentInline({
    props: {
      apiKey: (
        /*apiKey*/
        ctx[0]
      ),
      walletId: (
        /*walletId*/
        ctx[1]
      ),
      amount: (
        /*amount*/
        ctx[2]
      ),
      paymentKind: (
        /*paymentKind*/
        ctx[3]
      ),
      description: (
        /*description*/
        ctx[4]
      ),
      appearance: (
        /*appearance*/
        ctx[5]
      ),
      theme: (
        /*theme*/
        ctx[6]
      ),
      showQRCode: (
        /*showQRCode*/
        ctx[7]
      ),
      showCopyButton: (
        /*showCopyButton*/
        ctx[8]
      ),
      pollingConfig: (
        /*pollingConfig*/
        ctx[9]
      ),
      organizationId: (
        /*organizationId*/
        ctx[10]
      ),
      environmentId: (
        /*environmentId*/
        ctx[11]
      ),
      baseUrl: (
        /*baseUrl*/
        ctx[12]
      ),
      assetCurrency: (
        /*assetCurrency*/
        ctx[13]
      ),
      assetAmount: (
        /*assetAmount*/
        ctx[14]
      ),
      assetLabel: (
        /*assetLabel*/
        ctx[15]
      )
    }
  });
  paymentinline.$on(
    "ready",
    /*handleReady*/
    ctx[20]
  );
  paymentinline.$on(
    "qrGenerated",
    /*handleQRGenerated*/
    ctx[21]
  );
  paymentinline.$on(
    "statusChange",
    /*handleStatusChange*/
    ctx[22]
  );
  paymentinline.$on(
    "success",
    /*handleSuccess*/
    ctx[23]
  );
  paymentinline.$on(
    "error",
    /*handleError*/
    ctx[24]
  );
  paymentinline.$on(
    "expired",
    /*handleExpired*/
    ctx[25]
  );
  return {
    c() {
      div = element("div");
      create_component(paymentinline.$$.fragment);
      attr(div, "class", "voltage-payment-interface svelte-fuj1ci");
    },
    m(target, anchor) {
      insert(target, div, anchor);
      mount_component(paymentinline, div, null);
      current = true;
    },
    p(ctx2, dirty) {
      const paymentinline_changes = {};
      if (dirty & /*apiKey*/
      1) paymentinline_changes.apiKey = /*apiKey*/
      ctx2[0];
      if (dirty & /*walletId*/
      2) paymentinline_changes.walletId = /*walletId*/
      ctx2[1];
      if (dirty & /*amount*/
      4) paymentinline_changes.amount = /*amount*/
      ctx2[2];
      if (dirty & /*paymentKind*/
      8) paymentinline_changes.paymentKind = /*paymentKind*/
      ctx2[3];
      if (dirty & /*description*/
      16) paymentinline_changes.description = /*description*/
      ctx2[4];
      if (dirty & /*appearance*/
      32) paymentinline_changes.appearance = /*appearance*/
      ctx2[5];
      if (dirty & /*theme*/
      64) paymentinline_changes.theme = /*theme*/
      ctx2[6];
      if (dirty & /*showQRCode*/
      128) paymentinline_changes.showQRCode = /*showQRCode*/
      ctx2[7];
      if (dirty & /*showCopyButton*/
      256) paymentinline_changes.showCopyButton = /*showCopyButton*/
      ctx2[8];
      if (dirty & /*pollingConfig*/
      512) paymentinline_changes.pollingConfig = /*pollingConfig*/
      ctx2[9];
      if (dirty & /*organizationId*/
      1024) paymentinline_changes.organizationId = /*organizationId*/
      ctx2[10];
      if (dirty & /*environmentId*/
      2048) paymentinline_changes.environmentId = /*environmentId*/
      ctx2[11];
      if (dirty & /*baseUrl*/
      4096) paymentinline_changes.baseUrl = /*baseUrl*/
      ctx2[12];
      if (dirty & /*assetCurrency*/
      8192) paymentinline_changes.assetCurrency = /*assetCurrency*/
      ctx2[13];
      if (dirty & /*assetAmount*/
      16384) paymentinline_changes.assetAmount = /*assetAmount*/
      ctx2[14];
      if (dirty & /*assetLabel*/
      32768) paymentinline_changes.assetLabel = /*assetLabel*/
      ctx2[15];
      paymentinline.$set(paymentinline_changes);
    },
    i(local) {
      if (current) return;
      transition_in(paymentinline.$$.fragment, local);
      if (local) {
        add_render_callback(() => {
          if (!current) return;
          if (!div_transition) div_transition = create_bidirectional_transition(div, slide, { duration: 300 }, true);
          div_transition.run(1);
        });
      }
      current = true;
    },
    o(local) {
      transition_out(paymentinline.$$.fragment, local);
      if (local) {
        if (!div_transition) div_transition = create_bidirectional_transition(div, slide, { duration: 300 }, false);
        div_transition.run(0);
      }
      current = false;
    },
    d(detaching) {
      if (detaching) {
        detach(div);
      }
      destroy_component(paymentinline);
      if (detaching && div_transition) div_transition.end();
    }
  };
}
function create_fragment(ctx) {
  let div;
  let button;
  let svg;
  let t0;
  let span;
  let t1;
  let current;
  let mounted;
  let dispose;
  function select_block_type(ctx2, dirty) {
    if (
      /*isProcessing*/
      ctx2[17]
    ) return create_if_block_3;
    if (
      /*paymentVisible*/
      ctx2[16]
    ) return create_if_block_4;
    return create_else_block_1;
  }
  let current_block_type = select_block_type(ctx);
  let if_block0 = current_block_type(ctx);
  function select_block_type_1(ctx2, dirty) {
    if (
      /*isProcessing*/
      ctx2[17]
    ) return create_if_block_1;
    if (
      /*paymentVisible*/
      ctx2[16]
    ) return create_if_block_2;
    return create_else_block;
  }
  let current_block_type_1 = select_block_type_1(ctx);
  let if_block1 = current_block_type_1(ctx);
  let if_block2 = (
    /*paymentVisible*/
    ctx[16] && create_if_block(ctx)
  );
  return {
    c() {
      div = element("div");
      button = element("button");
      svg = svg_element("svg");
      if_block0.c();
      t0 = space();
      span = element("span");
      if_block1.c();
      t1 = space();
      if (if_block2) if_block2.c();
      attr(svg, "class", "voltage-payment-button-icon svelte-fuj1ci");
      attr(svg, "width", "20");
      attr(svg, "height", "20");
      attr(svg, "viewBox", "0 0 24 24");
      attr(svg, "fill", "none");
      attr(svg, "stroke", "currentColor");
      attr(svg, "stroke-width", "2");
      toggle_class(
        svg,
        "spin",
        /*isProcessing*/
        ctx[17]
      );
      attr(span, "class", "voltage-payment-button-text svelte-fuj1ci");
      attr(button, "type", "button");
      attr(button, "class", "voltage-payment-button svelte-fuj1ci");
      set_style(
        button,
        "background-color",
        /*buttonStyles*/
        ctx[18].backgroundColor
      );
      set_style(
        button,
        "border-radius",
        /*buttonStyles*/
        ctx[18].borderRadius
      );
      set_style(
        button,
        "font-family",
        /*buttonStyles*/
        ctx[18].fontFamily
      );
      button.disabled = /*isProcessing*/
      ctx[17];
      toggle_class(
        button,
        "active",
        /*paymentVisible*/
        ctx[16]
      );
      toggle_class(
        button,
        "processing",
        /*isProcessing*/
        ctx[17]
      );
      attr(div, "class", "voltage-button-payment svelte-fuj1ci");
    },
    m(target, anchor) {
      insert(target, div, anchor);
      append(div, button);
      append(button, svg);
      if_block0.m(svg, null);
      append(button, t0);
      append(button, span);
      if_block1.m(span, null);
      append(div, t1);
      if (if_block2) if_block2.m(div, null);
      current = true;
      if (!mounted) {
        dispose = listen(
          button,
          "click",
          /*togglePayment*/
          ctx[19]
        );
        mounted = true;
      }
    },
    p(ctx2, [dirty]) {
      if (current_block_type !== (current_block_type = select_block_type(ctx2))) {
        if_block0.d(1);
        if_block0 = current_block_type(ctx2);
        if (if_block0) {
          if_block0.c();
          if_block0.m(svg, null);
        }
      }
      if (!current || dirty & /*isProcessing*/
      131072) {
        toggle_class(
          svg,
          "spin",
          /*isProcessing*/
          ctx2[17]
        );
      }
      if (current_block_type_1 === (current_block_type_1 = select_block_type_1(ctx2)) && if_block1) {
        if_block1.p(ctx2, dirty);
      } else {
        if_block1.d(1);
        if_block1 = current_block_type_1(ctx2);
        if (if_block1) {
          if_block1.c();
          if_block1.m(span, null);
        }
      }
      if (!current || dirty & /*buttonStyles*/
      262144) {
        set_style(
          button,
          "background-color",
          /*buttonStyles*/
          ctx2[18].backgroundColor
        );
      }
      if (!current || dirty & /*buttonStyles*/
      262144) {
        set_style(
          button,
          "border-radius",
          /*buttonStyles*/
          ctx2[18].borderRadius
        );
      }
      if (!current || dirty & /*buttonStyles*/
      262144) {
        set_style(
          button,
          "font-family",
          /*buttonStyles*/
          ctx2[18].fontFamily
        );
      }
      if (!current || dirty & /*isProcessing*/
      131072) {
        button.disabled = /*isProcessing*/
        ctx2[17];
      }
      if (!current || dirty & /*paymentVisible*/
      65536) {
        toggle_class(
          button,
          "active",
          /*paymentVisible*/
          ctx2[16]
        );
      }
      if (!current || dirty & /*isProcessing*/
      131072) {
        toggle_class(
          button,
          "processing",
          /*isProcessing*/
          ctx2[17]
        );
      }
      if (
        /*paymentVisible*/
        ctx2[16]
      ) {
        if (if_block2) {
          if_block2.p(ctx2, dirty);
          if (dirty & /*paymentVisible*/
          65536) {
            transition_in(if_block2, 1);
          }
        } else {
          if_block2 = create_if_block(ctx2);
          if_block2.c();
          transition_in(if_block2, 1);
          if_block2.m(div, null);
        }
      } else if (if_block2) {
        group_outros();
        transition_out(if_block2, 1, 1, () => {
          if_block2 = null;
        });
        check_outros();
      }
    },
    i(local) {
      if (current) return;
      transition_in(if_block2);
      current = true;
    },
    o(local) {
      transition_out(if_block2);
      current = false;
    },
    d(detaching) {
      if (detaching) {
        detach(div);
      }
      if_block0.d();
      if_block1.d();
      if (if_block2) if_block2.d();
      mounted = false;
      dispose();
    }
  };
}
function getButtonStyles(appearance2) {
  const primaryColor = appearance2.primaryColor || "#f7931a";
  const borderRadius = appearance2.borderRadius || "8px";
  const fontFamily = appearance2.fontFamily || "system-ui, sans-serif";
  return {
    backgroundColor: primaryColor,
    borderRadius,
    fontFamily
  };
}
function instance($$self, $$props, $$invalidate) {
  let buttonStyles;
  let { apiKey } = $$props;
  let { walletId } = $$props;
  let { amount = null } = $$props;
  let { paymentKind = "bip21" } = $$props;
  let { description = "" } = $$props;
  let { appearance = {} } = $$props;
  let { theme = "auto" } = $$props;
  let { showQRCode = true } = $$props;
  let { showCopyButton = true } = $$props;
  let { pollingConfig = {} } = $$props;
  let { organizationId = void 0 } = $$props;
  let { environmentId = void 0 } = $$props;
  let { baseUrl = void 0 } = $$props;
  let { assetCurrency = void 0 } = $$props;
  let { assetAmount = void 0 } = $$props;
  let { assetLabel = void 0 } = $$props;
  let paymentVisible = false;
  let isProcessing = false;
  const dispatch = createEventDispatcher();
  function togglePayment() {
    if (!isProcessing) {
      $$invalidate(16, paymentVisible = !paymentVisible);
      if (paymentVisible) {
        dispatch("buttonActivated");
      } else {
        dispatch("buttonDeactivated");
      }
    }
  }
  function handleReady(event) {
    $$invalidate(17, isProcessing = true);
    dispatch("ready", event.detail);
  }
  function handleQRGenerated(event) {
    dispatch("qrGenerated", event.detail);
  }
  function handleStatusChange(event) {
    dispatch("statusChange", event.detail);
  }
  function handleSuccess(event) {
    $$invalidate(17, isProcessing = false);
    dispatch("success", event.detail);
    setTimeout(
      () => {
        $$invalidate(16, paymentVisible = false);
      },
      3e3
    );
  }
  function handleError(event) {
    $$invalidate(17, isProcessing = false);
    dispatch("error", event.detail);
  }
  function handleExpired(event) {
    $$invalidate(17, isProcessing = false);
    dispatch("expired", event.detail);
  }
  $$self.$$set = ($$props2) => {
    if ("apiKey" in $$props2) $$invalidate(0, apiKey = $$props2.apiKey);
    if ("walletId" in $$props2) $$invalidate(1, walletId = $$props2.walletId);
    if ("amount" in $$props2) $$invalidate(2, amount = $$props2.amount);
    if ("paymentKind" in $$props2) $$invalidate(3, paymentKind = $$props2.paymentKind);
    if ("description" in $$props2) $$invalidate(4, description = $$props2.description);
    if ("appearance" in $$props2) $$invalidate(5, appearance = $$props2.appearance);
    if ("theme" in $$props2) $$invalidate(6, theme = $$props2.theme);
    if ("showQRCode" in $$props2) $$invalidate(7, showQRCode = $$props2.showQRCode);
    if ("showCopyButton" in $$props2) $$invalidate(8, showCopyButton = $$props2.showCopyButton);
    if ("pollingConfig" in $$props2) $$invalidate(9, pollingConfig = $$props2.pollingConfig);
    if ("organizationId" in $$props2) $$invalidate(10, organizationId = $$props2.organizationId);
    if ("environmentId" in $$props2) $$invalidate(11, environmentId = $$props2.environmentId);
    if ("baseUrl" in $$props2) $$invalidate(12, baseUrl = $$props2.baseUrl);
    if ("assetCurrency" in $$props2) $$invalidate(13, assetCurrency = $$props2.assetCurrency);
    if ("assetAmount" in $$props2) $$invalidate(14, assetAmount = $$props2.assetAmount);
    if ("assetLabel" in $$props2) $$invalidate(15, assetLabel = $$props2.assetLabel);
  };
  $$self.$$.update = () => {
    if ($$self.$$.dirty & /*appearance*/
    32) {
      $$invalidate(18, buttonStyles = getButtonStyles(appearance));
    }
  };
  return [
    apiKey,
    walletId,
    amount,
    paymentKind,
    description,
    appearance,
    theme,
    showQRCode,
    showCopyButton,
    pollingConfig,
    organizationId,
    environmentId,
    baseUrl,
    assetCurrency,
    assetAmount,
    assetLabel,
    paymentVisible,
    isProcessing,
    buttonStyles,
    togglePayment,
    handleReady,
    handleQRGenerated,
    handleStatusChange,
    handleSuccess,
    handleError,
    handleExpired
  ];
}
class PaymentButton extends SvelteComponent {
  constructor(options) {
    super();
    init(
      this,
      options,
      instance,
      create_fragment,
      safe_not_equal,
      {
        apiKey: 0,
        walletId: 1,
        amount: 2,
        paymentKind: 3,
        description: 4,
        appearance: 5,
        theme: 6,
        showQRCode: 7,
        showCopyButton: 8,
        pollingConfig: 9,
        organizationId: 10,
        environmentId: 11,
        baseUrl: 12,
        assetCurrency: 13,
        assetAmount: 14,
        assetLabel: 15
      },
      add_css
    );
  }
}
export {
  PaymentButton as default
};
//# sourceMappingURL=PaymentButton-Cfmn4PL6.js.map