@payhook/extension-button 0.1.0

package/index.js

@@ -0,0 +1,309 @@
+import { isValidEmail } from '@payhook/core'
+
+const DEFAULT_LABELS = {
+  upgrade: 'Upgrade',
+  manage: 'Manage plan',
+  loading: 'Loading…',
+  processing: 'Processing…',
+  emailPlaceholder: 'your@email.com',
+  emailRequired: 'Enter a valid email to continue',
+  checkoutError: 'Checkout failed. Please try again.',
+  portalError: 'Could not open billing portal. Please try again.',
+  emailSent: 'Check your email inbox to unlock'
+}
+
+export class ExtensionButton {
+  constructor (client, options = {}) {
+    if (!client) throw new Error('PayhookClient is required')
+
+    this.client = client
+    this.plans = Array.isArray(options.plans) ? options.plans : []
+    this.labels = { ...DEFAULT_LABELS, ...(options.labels || {}) }
+    this.ui = {
+      showPlanPicker: options.ui?.showPlanPicker !== false && this.plans.length > 1,
+      showEmailInput: options.ui?.showEmailInput !== false,
+      manageForLifetime: options.ui?.manageForLifetime === true,
+      className: options.ui?.className || 'payhook-btn'
+    }
+    this.checkout = {
+      cancelUrl: options.checkout?.cancelUrl,
+      successUrl: options.checkout?.successUrl,
+      popupOptions: options.checkout?.popupOptions
+    }
+    this.billing = {
+      returnUrl: options.billing?.returnUrl,
+      popupOptions: options.billing?.popupOptions
+    }
+    this.onStateChange = typeof options.onStateChange === 'function'
+      ? options.onStateChange
+      : () => {}
+
+    this._container = null
+    this._state = 'loading'
+    this._selectedPlan = this._getDefaultPlan()
+    this._email = options.email || ''
+    this._message = null
+    this._messageType = null
+    this._unsubscribe = client.onEntitlementChange(() => this._syncState())
+  }
+
+  _getDefaultPlan () {
+    if (this.plans.length === 0) return null
+    return this.plans.find((plan) => plan.recommended) || this.plans[0]
+  }
+
+  getState () {
+    return {
+      state: this._state,
+      entitlement: this.client.getEntitlement(),
+      selectedPlan: this._selectedPlan,
+      message: this._message
+    }
+  }
+
+  _setState (state, { message, messageType } = {}) {
+    this._state = state
+    this._message = message ?? null
+    this._messageType = messageType ?? null
+    this.onStateChange(this.getState())
+    this._render()
+  }
+
+  _syncState () {
+    const entitlement = this.client.getEntitlement()
+
+    if (this._state === 'checkout-loading' || this._state === 'portal-loading') {
+      return
+    }
+
+    if (entitlement.active) {
+      if (entitlement.mode === 'subscription' || this.ui.manageForLifetime) {
+        this._setState('manage')
+      } else {
+        this._setState('pro')
+      }
+      return
+    }
+
+    this._setState('upgrade')
+  }
+
+  mount (container) {
+    this._container = typeof container === 'string'
+      ? document.querySelector(container)
+      : container
+
+    if (!this._container) {
+      throw new Error('Container element not found')
+    }
+
+    this._container.classList.add(this.ui.className)
+    this._syncState()
+    return this
+  }
+
+  destroy () {
+    if (this._unsubscribe) this._unsubscribe()
+    if (this._container) this._container.innerHTML = ''
+  }
+
+  async _resolveEmail () {
+    const email = this._email || await this.client.resolveEmail()
+    return email
+  }
+
+  async _handleUpgradeClick () {
+    const plan = this._selectedPlan || this.plans[0]
+    if (!plan?.productId || !plan?.priceId) {
+      this._setState('upgrade', {
+        message: 'Plan configuration is missing productId or priceId',
+        messageType: 'error'
+      })
+      return
+    }
+
+    const email = await this._resolveEmail()
+    if (!isValidEmail(email)) {
+      this._setState('upgrade', {
+        message: this.labels.emailRequired,
+        messageType: 'error'
+      })
+      return
+    }
+
+    this._setState('checkout-loading')
+
+    try {
+      const result = await this.client.openCheckout({
+        productId: plan.productId,
+        priceId: plan.priceId,
+        priceIdByCountry: plan.priceIdByCountry,
+        promoId: plan.promoId,
+        email,
+        cancelUrl: this.checkout.cancelUrl,
+        successUrl: this.checkout.successUrl,
+        popupOptions: this.checkout.popupOptions
+      })
+
+      if (result.challengeType === 'email_link') {
+        this._setState('upgrade', {
+          message: this.labels.emailSent,
+          messageType: 'success'
+        })
+        return
+      }
+
+      this._syncState()
+    } catch (error) {
+      this._setState('upgrade', {
+        message: error.message || this.labels.checkoutError,
+        messageType: 'error'
+      })
+    }
+  }
+
+  async _handleManageClick () {
+    if (!this.billing.returnUrl) {
+      this._setState('manage', {
+        message: 'billing.returnUrl is required',
+        messageType: 'error'
+      })
+      return
+    }
+
+    this._setState('portal-loading')
+
+    try {
+      await this.client.openBillingPortal({
+        returnUrl: this.billing.returnUrl,
+        popupOptions: this.billing.popupOptions
+      })
+      this._syncState()
+    } catch (error) {
+      this._setState('manage', {
+        message: error.message || this.labels.portalError,
+        messageType: 'error'
+      })
+    }
+  }
+
+  _renderPlans () {
+    if (!this.ui.showPlanPicker || this.plans.length <= 1) return ''
+
+    return `
+      <div class="payhook-btn__plans" role="list">
+        ${this.plans.map((plan) => `
+          <button
+            type="button"
+            class="payhook-btn__plan ${this._selectedPlan?.key === plan.key ? 'payhook-btn__plan--selected' : ''}"
+            data-plan-key="${plan.key}"
+          >
+            <span class="payhook-btn__plan-label">${plan.label || plan.key}</span>
+            ${plan.priceLabel ? `<span class="payhook-btn__plan-price">${plan.priceLabel}</span>` : ''}
+            ${plan.perYearHint ? `<span class="payhook-btn__plan-hint">${plan.perYearHint}</span>` : ''}
+          </button>
+        `).join('')}
+      </div>
+    `
+  }
+
+  _renderEmailRow () {
+    if (!this.ui.showEmailInput) return ''
+
+    return `
+      <input
+        class="payhook-btn__email"
+        type="email"
+        value="${this._email || ''}"
+        placeholder="${this.labels.emailPlaceholder}"
+      />
+    `
+  }
+
+  _renderMessage () {
+    if (!this._message) return ''
+
+    return `
+      <p class="payhook-btn__message payhook-btn__message--${this._messageType || 'info'}">
+        ${this._message}
+      </p>
+    `
+  }
+
+  _render () {
+    if (!this._container) return
+
+    let body = ''
+
+    if (this._state === 'loading' || this._state === 'checkout-loading' || this._state === 'portal-loading') {
+      body = `
+        <button type="button" class="payhook-btn__button" disabled>
+          ${this.labels.loading}
+        </button>
+      `
+    } else if (this._state === 'manage') {
+      body = `
+        <button type="button" class="payhook-btn__button payhook-btn__button--manage">
+          ${this.labels.manage}
+        </button>
+      `
+    } else if (this._state === 'pro') {
+      body = `
+        <button type="button" class="payhook-btn__button payhook-btn__button--pro" disabled>
+          Pro
+        </button>
+      `
+    } else {
+      body = `
+        ${this._renderPlans()}
+        <div class="payhook-btn__email-row">
+          ${this._renderEmailRow()}
+          <button type="button" class="payhook-btn__button payhook-btn__button--upgrade">
+            ${this.labels.upgrade}
+          </button>
+        </div>
+      `
+    }
+
+    this._container.innerHTML = `
+      <div class="payhook-btn__root">
+        ${body}
+        ${this._renderMessage()}
+      </div>
+    `
+
+    this._container.querySelectorAll('[data-plan-key]').forEach((button) => {
+      button.addEventListener('click', () => {
+        const plan = this.plans.find((item) => item.key === button.dataset.planKey)
+        if (plan) {
+          this._selectedPlan = plan
+          this._render()
+        }
+      })
+    })
+
+    const emailInput = this._container.querySelector('.payhook-btn__email')
+    if (emailInput) {
+      emailInput.addEventListener('input', (event) => {
+        this._email = event.target.value
+      })
+    }
+
+    const upgradeButton = this._container.querySelector('.payhook-btn__button--upgrade')
+    if (upgradeButton) {
+      upgradeButton.addEventListener('click', () => this._handleUpgradeClick())
+    }
+
+    const manageButton = this._container.querySelector('.payhook-btn__button--manage')
+    if (manageButton) {
+      manageButton.addEventListener('click', () => this._handleManageClick())
+    }
+  }
+}
+
+export default ExtensionButton
+
+if (typeof self !== 'undefined') {
+  self.Payhook = self.Payhook || {}
+  self.Payhook.ExtensionButton = ExtensionButton
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@payhook/extension-button",
+  "version": "0.1.0",
+  "description": "Plug-and-play Payhook upgrade button for browser extensions",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "index.js",
+    "styles.css"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/bundle-package.js extension-button",
+    "prepublishOnly": "npm run build",
+    "test": "node --test index.test.js"
+  },
+  "dependencies": {
+    "@payhook/core": "0.1.0",
+    "@payhook/extension": "0.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/payhook/js.git",
+    "directory": "packages/extension-button"
+  },
+  "bugs": {
+    "url": "https://github.com/payhook/js/issues"
+  },
+  "homepage": "https://payhook.link",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "ISC"
+}

package/styles.css

@@ -0,0 +1,118 @@
+.payhook-btn {
+  --payhook-btn-bg: #3a5678;
+  --payhook-btn-bg-hover: #2c4563;
+  --payhook-btn-color: #ffffff;
+  --payhook-btn-radius: 999px;
+  --payhook-btn-font-size: 0.875rem;
+  --payhook-btn-border: 1px solid rgba(44, 69, 99, 0.2);
+  --payhook-plan-bg: #ffffff;
+  --payhook-plan-border: rgba(44, 69, 99, 0.16);
+  --payhook-plan-selected-border: #3a5678;
+  --payhook-text-color: #2c4563;
+  font-family: inherit;
+  color: var(--payhook-text-color);
+}
+
+.payhook-btn__root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.payhook-btn__plans {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.payhook-btn__plan {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.15rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--payhook-plan-border);
+  border-radius: 0.75rem;
+  background: var(--payhook-plan-bg);
+  cursor: pointer;
+  text-align: left;
+}
+
+.payhook-btn__plan--selected {
+  border-color: var(--payhook-plan-selected-border);
+  box-shadow: 0 0 0 1px var(--payhook-plan-selected-border);
+}
+
+.payhook-btn__plan-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.payhook-btn__plan-price {
+  font-size: 0.8125rem;
+}
+
+.payhook-btn__plan-hint {
+  font-size: 0.75rem;
+  opacity: 0.75;
+}
+
+.payhook-btn__email-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.payhook-btn__email {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0.55rem 0.75rem;
+  font: inherit;
+  font-size: var(--payhook-btn-font-size);
+  color: var(--payhook-text-color);
+  background: #ffffff;
+  border: var(--payhook-btn-border);
+  border-radius: var(--payhook-btn-radius);
+}
+
+.payhook-btn__email:focus {
+  outline: none;
+  border-color: var(--payhook-btn-bg);
+  box-shadow: 0 0 0 2px rgba(58, 86, 120, 0.2);
+}
+
+.payhook-btn__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.55rem 1.1rem;
+  border: none;
+  border-radius: var(--payhook-btn-radius);
+  font: inherit;
+  font-size: var(--payhook-btn-font-size);
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--payhook-btn-bg);
+  color: var(--payhook-btn-color);
+}
+
+.payhook-btn__button:hover:not(:disabled) {
+  background: var(--payhook-btn-bg-hover);
+}
+
+.payhook-btn__button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.payhook-btn__message {
+  font-size: 0.8125rem;
+}
+
+.payhook-btn__message--error {
+  color: #b42318;
+}
+
+.payhook-btn__message--success {
+  color: #027a48;
+}