@indirecttek/essentials-engine 1.1.4 → 1.2.0

package/dist/components/CalendlyWidget.astro

@@ -0,0 +1,80 @@
+---
+import type { SiteConfig } from "../types";
+
+export interface Props {
+  config: SiteConfig;
+  inline?: boolean; // true = embedded calendar, false = popup button
+}
+
+const { config, inline = false } = Astro.props;
+
+const scheduling = config.integrations?.scheduling;
+const isEnabled = scheduling && scheduling.provider !== "none" && scheduling.url;
+const buttonText = scheduling?.buttonText || "Schedule Now";
+
+// Extract Calendly username from URL for inline embed
+const getCalendlyPath = (url: string) => {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.pathname;
+  } catch {
+    return url.replace("https://calendly.com", "");
+  }
+};
+---
+
+{isEnabled && scheduling.provider === "calendly" && (
+  inline ? (
+    <!-- Inline Calendly Embed -->
+    <div class="calendly-inline-widget" data-url={scheduling.url} style="min-width:320px;height:700px;"></div>
+    <script is:inline src="https://assets.calendly.com/assets/external/widget.js" async></script>
+  ) : (
+    <!-- Calendly Popup Button -->
+    <button
+      type="button"
+      onclick={`Calendly.initPopupWidget({url: '${scheduling.url}'});return false;`}
+      class="inline-flex items-center justify-center gap-2 bg-[color:var(--color-primary)] text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+      </svg>
+      {buttonText}
+    </button>
+    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
+    <script is:inline src="https://assets.calendly.com/assets/external/widget.js" async></script>
+  )
+)}
+
+{isEnabled && scheduling.provider === "acuity" && (
+  <!-- Acuity Scheduling Embed -->
+  <iframe
+    src={scheduling.url}
+    title="Schedule Appointment"
+    width="100%"
+    height="800"
+    frameborder="0"
+    class="rounded-lg"
+  ></iframe>
+)}
+
+{isEnabled && scheduling.provider === "square" && (
+  <!-- Square Appointments Button -->
+  <a
+    href={scheduling.url}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="inline-flex items-center justify-center gap-2 bg-[color:var(--color-primary)] text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+    </svg>
+    {buttonText}
+  </a>
+)}
+
+{!isEnabled && (
+  <!-- Fallback when scheduling not configured -->
+  <p class="text-sm text-[color:var(--color-foreground)]/60 italic">
+    Online scheduling coming soon. Please call or email to book.
+  </p>
+)}

package/dist/components/PaymentButton.astro

@@ -0,0 +1,109 @@
+---
+import type { SiteConfig } from "../types";
+
+export interface Props {
+  config: SiteConfig;
+  amount?: number; // Amount in cents (overrides config)
+  description?: string; // Payment description
+  buttonStyle?: "primary" | "secondary" | "outline";
+}
+
+const { config, amount, description, buttonStyle = "primary" } = Astro.props;
+
+const payments = config.integrations?.payments;
+const isEnabled = payments && payments.provider !== "none";
+
+// Determine button text based on mode
+const getButtonText = () => {
+  if (payments?.buttonText) return payments.buttonText;
+  switch (payments?.mode) {
+    case "deposit": return `Pay $${((payments.depositAmount || 5000) / 100).toFixed(0)} Deposit`;
+    case "full": return "Pay Now";
+    case "quote": return "Request Quote";
+    default: return "Pay Now";
+  }
+};
+
+const buttonText = getButtonText();
+
+// Button styling
+const buttonClasses = {
+  primary: "bg-[color:var(--color-primary)] text-white hover:opacity-90",
+  secondary: "bg-[color:var(--color-secondary)] text-white hover:opacity-90",
+  outline: "border-2 border-[color:var(--color-primary)] text-[color:var(--color-primary)] hover:bg-[color:var(--color-primary)] hover:text-white",
+};
+---
+
+{isEnabled && payments.provider === "stripe" && (
+  <button
+    type="button"
+    id="stripe-payment-button"
+    data-amount={amount || payments.depositAmount || 5000}
+    data-description={description || `Payment to ${config.businessName}`}
+    class={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed ${buttonClasses[buttonStyle]}`}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+    </svg>
+    <span id="payment-button-text">{buttonText}</span>
+  </button>
+)}
+
+{isEnabled && payments.provider === "square" && (
+  <a
+    href="#"
+    id="square-payment-link"
+    class={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${buttonClasses[buttonStyle]}`}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+    </svg>
+    {buttonText}
+  </a>
+)}
+
+{!isEnabled && (
+  <!-- Fallback when payments not configured -->
+  <p class="text-sm text-[color:var(--color-foreground)]/60 italic">
+    Online payments coming soon. Please contact us for payment options.
+  </p>
+)}
+
+<script>
+  const stripeButton = document.getElementById('stripe-payment-button');
+
+  if (stripeButton) {
+    stripeButton.addEventListener('click', async () => {
+      const button = stripeButton as HTMLButtonElement;
+      const buttonText = document.getElementById('payment-button-text');
+      const amount = button.dataset.amount;
+      const description = button.dataset.description;
+
+      // Show loading state
+      button.disabled = true;
+      if (buttonText) buttonText.textContent = 'Processing...';
+
+      try {
+        const response = await fetch('/api/create-checkout', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ amount: parseInt(amount || '5000'), description }),
+        });
+
+        const data = await response.json();
+
+        if (data.url) {
+          // Redirect to Stripe Checkout
+          window.location.href = data.url;
+        } else {
+          throw new Error(data.error || 'Failed to create checkout session');
+        }
+      } catch (error) {
+        console.error('Payment error:', error);
+        alert('Unable to process payment. Please try again or contact us directly.');
+        button.disabled = false;
+        if (buttonText) buttonText.textContent = button.dataset.originalText || 'Pay Now';
+      }
+    });
+  }
+</script>

package/dist/index.ts

@@ -9,6 +9,10 @@ export type {
   ImageSearchHints,
   SocialLinks,
   LayoutOptions,
+  SchedulingConfig,
+  PaymentsConfig,
+  EmailConfig,
+  IntegrationsConfig,
   SiteConfig,
 } from "./types";
 
@@ -21,3 +25,7 @@ export { default as Hero } from "./components/Hero.astro";
 export { default as ServicesGrid } from "./components/ServicesGrid.astro";
 export { default as ContactForm } from "./components/ContactForm.astro";
 export { default as Footer } from "./components/Footer.astro";
+
+// Integration Components
+export { default as CalendlyWidget } from "./components/CalendlyWidget.astro";
+export { default as PaymentButton } from "./components/PaymentButton.astro";

package/dist/types.ts

@@ -54,6 +54,31 @@ export interface LayoutOptions {
   stickyNav?: boolean;
 }
 
+// Integration configurations
+export interface SchedulingConfig {
+  provider: "calendly" | "acuity" | "square" | "none";
+  url?: string; // Calendly/Acuity booking URL
+  buttonText?: string; // Custom CTA text, defaults to "Schedule Now"
+}
+
+export interface PaymentsConfig {
+  provider: "stripe" | "square" | "none";
+  mode?: "deposit" | "full" | "quote"; // What kind of payment flow
+  depositAmount?: number; // For deposit mode, amount in cents
+  buttonText?: string; // Custom CTA text
+}
+
+export interface EmailConfig {
+  provider: "resend" | "sendgrid" | "none";
+  // API keys stored in environment variables, not config
+}
+
+export interface IntegrationsConfig {
+  scheduling?: SchedulingConfig;
+  payments?: PaymentsConfig;
+  email?: EmailConfig;
+}
+
 export interface SiteConfig {
   businessName: string;
   theme: Theme;
@@ -65,4 +90,5 @@ export interface SiteConfig {
   imageSearchHints?: ImageSearchHints;
   socialLinks?: SocialLinks;
   layoutOptions?: LayoutOptions;
+  integrations?: IntegrationsConfig;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indirecttek/essentials-engine",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/types.d.ts",