astro-tractstack 2.3.0 → 2.3.1

package/templates/src/components/edit/pane/steps/AiStandardDesignStep.tsx

@@ -4,7 +4,7 @@ import {
   parseAiPane,
   createDefaultShell,
 } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import { markdownToHtml } from '@/utils/compositor/htmlAst';
 import { CopyInputStep, type CopyMode } from './CopyInputStep';
 import { AiDesignStep, type AiDesignConfig } from './AiDesignStep';
@@ -148,7 +148,7 @@ export const AiStandardDesignStep = ({
       let shellResult = '';
 
       if (isAiStyling) {
-        // AI Path: Generate Shell via AskLemur
+        // AI Path: Generate Shell via Aai
         let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
         if (aiDesignConfig.baseColor)
           designInput += ` Base the colors around **${aiDesignConfig.baseColor}**.`;
@@ -173,7 +173,7 @@ export const AiStandardDesignStep = ({
           );
         }
 
-        shellResult = await callAskLemurAPI({
+        shellResult = await callAaiAPI({
           prompt: formattedShellPrompt,
           context: masterShellSystem,
           expectJson: true,
@@ -204,7 +204,7 @@ export const AiStandardDesignStep = ({
             .replace('{{LAYOUT_TYPE}}', layoutType)
             .replace('{{SHELL_JSON}}', shellResult);
 
-          finalHtml = await callAskLemurAPI({
+          finalHtml = await callAaiAPI({
             prompt: formattedCopyPrompt,
             context: masterCopySystem,
             expectJson: false,
@@ -218,7 +218,7 @@ export const AiStandardDesignStep = ({
               .replace('{{SHELL_JSON}}', shellResult)
               .replace('{{COPY_INPUT}}', copyValue);
 
-            finalHtml = await callAskLemurAPI({
+            finalHtml = await callAaiAPI({
               prompt: formattedStylePrompt,
               context: masterStyleSystem,
               expectJson: false,
@@ -246,7 +246,7 @@ export const AiStandardDesignStep = ({
                 .replace('{{SHELL_JSON}}', shellResult)
                 .replace('{{COPY_INPUT}}', content);
 
-              const styledHtml = await callAskLemurAPI({
+              const styledHtml = await callAaiAPI({
                 prompt: formattedStylePrompt,
                 context: masterStyleSystem,
                 expectJson: false,
@@ -289,7 +289,7 @@ export const AiStandardDesignStep = ({
               .replace('{{LAYOUT_TYPE}}', layoutType)
               .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
 
-            const copyResult = await callAskLemurAPI({
+            const copyResult = await callAaiAPI({
               prompt: formattedCopyPrompt,
               context: masterCopySystem,
               expectJson: false,

package/templates/src/components/form/advanced/APIConfigSection.tsx

@@ -1,4 +1,7 @@
+import { useState } from 'react';
+import { Dialog, Portal } from '@ark-ui/react';
 import StringInput from '../StringInput';
+import BooleanToggle from '../BooleanToggle';
 import type { FormStateReturn } from '@/hooks/useFormState';
 import type {
   AdvancedConfigState,
@@ -16,13 +19,18 @@ export default function APIConfigSection({
 }: APIConfigSectionProps) {
   const { state, updateField, errors } = formState;
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
   // Status flags
   const aaiConfigured = status?.aaiAPIKeySet;
   const shopifyStorefrontConfigured = status?.shopifyStorefrontTokenSet;
   const shopifySecretConfigured = status?.shopifyApiSecretSet;
   const shopifyDomainConfigured = status?.shopifyStoreDomainSet;
   const shopifyVersionConfigured = Boolean(status?.shopifyApiVersion);
-
+  const shopifyAdminSlugConfigured = status?.shopifyAdminSlugSet;
+  const shopifyWebhooksConfigured = status?.userSetupWebhooks;
   const resendConfigured = status?.resendApiKeySet;
 
   const renderStatusBadge = (isConfigured: boolean | undefined) => {
@@ -92,7 +100,9 @@ export default function APIConfigSection({
                 shopifyStorefrontConfigured &&
                   shopifySecretConfigured &&
                   shopifyDomainConfigured &&
-                  shopifyVersionConfigured
+                  shopifyVersionConfigured &&
+                  shopifyAdminSlugConfigured &&
+                  shopifyWebhooksConfigured
               )}
             </div>
             <div className="space-y-4">
@@ -113,6 +123,20 @@ export default function APIConfigSection({
                 </p>
               </div>
 
+              <div>
+                <StringInput
+                  label="Shopify Admin Slug"
+                  value={state.shopifyAdminSlug}
+                  onChange={(value) => updateField('shopifyAdminSlug', value)}
+                  placeholder="your-store-slug"
+                  error={errors.shopifyAdminSlug}
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  The internal Shopify slug (found in
+                  admin.shopify.com/store/SLUG).
+                </p>
+              </div>
+
               <div>
                 <StringInput
                   label="API Version"
@@ -165,6 +189,37 @@ export default function APIConfigSection({
                   {shopifySecretConfigured && ' Leave blank to keep existing.'}
                 </p>
               </div>
+
+              {!shopifyWebhooksConfigured && (
+                <div className="mt-6 border-t border-gray-100 pt-6">
+                  <div className="mb-4 rounded-md border border-amber-200 bg-amber-50 p-4">
+                    <h5 className="text-sm font-bold text-amber-800">
+                      Webhook Configuration Required
+                    </h5>
+                    <p className="mb-3 mt-1 text-xs text-amber-700">
+                      To ensure synchronization between Shopify and the
+                      TractStack native booking system, you must configure
+                      webhook subscriptions within your Shopify Admin panel.
+                    </p>
+                    <button
+                      onClick={() => setIsModalOpen(true)}
+                      className="text-xs font-bold text-amber-900 underline hover:text-amber-700"
+                      type="button"
+                    >
+                      [ Detailed Instructions ]
+                    </button>
+                  </div>
+
+                  <BooleanToggle
+                    label="Webhooks Manually Configured"
+                    description="I have manually created the required webhooks (orders/paid, products/*) in my Shopify Admin."
+                    value={state.userSetupWebhooks}
+                    onChange={(value) =>
+                      updateField('userSetupWebhooks', value)
+                    }
+                  />
+                </div>
+              )}
             </div>
           </div>
 
@@ -191,6 +246,193 @@ export default function APIConfigSection({
           </div>
         </div>
       </div>
+
+      <Dialog.Root
+        open={isModalOpen}
+        onOpenChange={(details) => setIsModalOpen(details.open)}
+        preventScroll={true}
+        lazyMount
+        unmountOnExit
+      >
+        <Portal>
+          <Dialog.Backdrop className="fixed inset-0 z-50 bg-black bg-opacity-75" />
+          <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            <Dialog.Content
+              className="relative flex w-full max-w-2xl flex-col overflow-hidden rounded-lg bg-white shadow-xl"
+              style={{ maxHeight: '90vh' }}
+            >
+              {/* Header - Fixed height */}
+              <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
+                <Dialog.Title className="text-xl font-bold text-gray-900">
+                  How to Configure Webhooks in Shopify
+                </Dialog.Title>
+                <Dialog.CloseTrigger asChild>
+                  <button
+                    className="text-gray-400 hover:text-gray-600"
+                    type="button"
+                  >
+                    <span className="text-2xl">&times;</span>
+                  </button>
+                </Dialog.CloseTrigger>
+              </div>
+
+              {/* Body - Scrollable via flex-1 */}
+              <div className="flex-1 overflow-y-auto p-6 text-sm text-gray-700">
+                <ol className="mb-6 list-decimal space-y-2 pl-5">
+                  <li>Log in to your Shopify Admin dashboard.</li>
+                  <li>
+                    Click on <strong>Settings</strong> (the gear icon) in the
+                    bottom left corner.
+                  </li>
+                  <li>
+                    In the left sidebar, select <strong>Notifications</strong>.
+                  </li>
+                  <li>
+                    Scroll all the way to the bottom to the{' '}
+                    <strong>Webhooks</strong> section.
+                  </li>
+                  <li>
+                    Click the <strong>Create webhook</strong> button.
+                  </li>
+                  <li>
+                    For each required webhook (listed below), configure the
+                    following settings:
+                    <ul className="mt-2 list-disc space-y-1 pl-5">
+                      <li>
+                        <strong>Event:</strong> Select the specific event (e.g.,
+                        Order payment, Product creation).
+                      </li>
+                      <li>
+                        <strong>Format:</strong> Select JSON (TractStack relies
+                        on JSON unmarshaling).
+                      </li>
+                      <li>
+                        <strong>URL:</strong> Enter your backend webhook URL:{' '}
+                        <code className="rounded bg-gray-100 px-1 py-0.5 text-xs">
+                          {goBackend}/api/v1/hooks/shopify
+                        </code>
+                      </li>
+                      <li>
+                        <strong>Webhook API version:</strong> Select the version
+                        that matches your ShopifyAPIVersion configured in
+                        TractStack.
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    Click <strong>Save</strong>.
+                  </li>
+                </ol>
+
+                <div className="mb-6 border-l-4 border-red-500 bg-red-50 p-4">
+                  <p className="font-bold text-red-800">CRITICAL:</p>
+                  <p className="mt-1 text-red-700">
+                    After saving your first webhook, Shopify will display a{' '}
+                    <strong>Webhook signing secret</strong> at the bottom of the
+                    Webhooks section. You must copy this secret and add it to
+                    your TractStack API Config as the Shopify API Secret. The
+                    backend uses this to verify the HMAC signature of all
+                    incoming payloads.
+                  </p>
+                </div>
+
+                <h4 className="mb-3 text-lg font-bold">
+                  Required Webhooks Breakdown
+                </h4>
+                <p className="mb-4">
+                  You must create a separate webhook subscription for each of
+                  the following four topics. All of them should point to the
+                  exact same URL:{' '}
+                  <code className="rounded bg-gray-100 px-1 py-0.5 text-xs">
+                    {goBackend}/api/v1/hooks/shopify
+                  </code>
+                </p>
+
+                <div className="space-y-4">
+                  <div className="rounded border border-gray-200 bg-gray-50 p-4">
+                    <h5 className="font-bold">1. Order Paid</h5>
+                    <ul className="mt-2 space-y-1 text-xs">
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Shopify Event Name:
+                        </span>{' '}
+                        Order payment
+                      </li>
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Topic Header:
+                        </span>{' '}
+                        orders/paid
+                      </li>
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Purpose:
+                        </span>{' '}
+                        Transitions the corresponding hold in the bookings
+                        database table from PENDING to CONFIRMED.
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div className="rounded border border-gray-200 bg-gray-50 p-4">
+                    <h5 className="font-bold">2. Product Creation</h5>
+                    <ul className="mt-2 space-y-1 text-xs">
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Shopify Event Name:
+                        </span>{' '}
+                        Product creation
+                      </li>
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Topic Header:
+                        </span>{' '}
+                        products/create
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div className="rounded border border-gray-200 bg-gray-50 p-4">
+                    <h5 className="font-bold">3. Product Update</h5>
+                    <ul className="mt-2 space-y-1 text-xs">
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Shopify Event Name:
+                        </span>{' '}
+                        Product update
+                      </li>
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Topic Header:
+                        </span>{' '}
+                        products/update
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div className="rounded border border-gray-200 bg-gray-50 p-4">
+                    <h5 className="font-bold">4. Product Deletion</h5>
+                    <ul className="mt-2 space-y-1 text-xs">
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Shopify Event Name:
+                        </span>{' '}
+                        Product deletion
+                      </li>
+                      <li>
+                        <span className="font-bold text-gray-900">
+                          Topic Header:
+                        </span>{' '}
+                        products/delete
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
     </div>
   );
 }