astro-tractstack 2.3.0 → 2.3.2

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/edit/state/SaveModal.tsx

@@ -454,7 +454,7 @@ export default function SaveModal({
                         Keep Editing
                       </button>
                       <a
-                        href="/storykeep/content"
+                        href="/storykeep"
                         className={`rounded bg-black px-4 py-2 text-white transition-colors hover:bg-white hover:text-black`}
                       >
                         Dashboard

package/templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx

@@ -71,7 +71,12 @@ const IconSelector = ({
     () => createListCollection({ items: filteredIcons }),
     [filteredIcons]
   );
-  const iconSelectorStyles = `.icon-item .icon-indicator { display: none; } .icon-item[data-state="checked"] .icon-indicator { display: flex; }`;
+  const iconSelectorStyles = `
+    .icon-item .icon-indicator { display: none; }
+    .icon-item[data-state="checked"] .icon-indicator { display: flex; }
+    .icon-item[data-highlighted] { background-color: #0891b2; color: #fff; }
+    .icon-item[data-highlighted] .icon-indicator { color: #fff; }
+  `;
   return (
     <div>
       <style>{iconSelectorStyles}</style>
@@ -100,12 +105,12 @@ const IconSelector = ({
                 <Combobox.Item
                   key={icon}
                   item={icon}
-                  className="icon-item relative cursor-pointer select-none py-2 pl-10 pr-4 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                  className="icon-item relative cursor-pointer select-none py-2 pl-10 pr-4 text-gray-900"
                 >
                   <Combobox.ItemText>
                     <i className={`bi bi-${icon} mr-2 text-lg`}></i> {icon}
                   </Combobox.ItemText>
-                  <Combobox.ItemIndicator className="icon-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600 data-[highlighted]:text-white">
+                  <Combobox.ItemIndicator className="icon-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
                     <CheckIcon className="h-5 w-5" />
                   </Combobox.ItemIndicator>
                 </Combobox.Item>

package/templates/src/components/form/DateTimeInput.tsx

@@ -40,6 +40,12 @@ const ampmOptions = [
   { value: 'PM', label: 'PM' },
 ];
 
+const datetimeSelectItemHighlightStyles = `
+  .datetime-select-item[data-highlighted] {
+    background-color: #eff6ff;
+  }
+`;
+
 const DateTimeInput = ({
   value,
   onChange,
@@ -450,6 +456,7 @@ const DateTimeInput = ({
       {/* Time Picker Section (only show if withTime is true and not date-only) */}
       {withTime && displayFormat !== 'date' && (
         <div className="space-y-2">
+          <style>{datetimeSelectItemHighlightStyles}</style>
           <div className="text-xs font-bold text-gray-600">
             Time (Local Timezone)
           </div>
@@ -489,7 +496,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>
@@ -540,7 +547,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>
@@ -589,7 +596,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>

package/templates/src/components/form/FileUpload.tsx

@@ -1,4 +1,10 @@
-import { useRef, useState, useId } from 'react';
+import {
+  useRef,
+  useState,
+  useId,
+  type ChangeEvent,
+  type DragEvent,
+} from 'react';
 import { classNames } from '@/utils/helpers';
 import {
   validateFile,
@@ -151,14 +157,14 @@ const FileUpload = ({
     }
   };
 
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       processFile(file);
     }
   };
 
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setDragOver(false);
 
@@ -170,14 +176,14 @@ const FileUpload = ({
     }
   };
 
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     if (!disabled) {
       setDragOver(true);
     }
   };
 
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setDragOver(false);
   };

package/templates/src/components/form/NumberInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId } from 'react';
+import { forwardRef, useId, type ChangeEvent } from 'react';
 import { classNames } from '@/utils/helpers';
 
 interface NumberInputProps {
@@ -42,7 +42,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     const errorId = `${inputId}-error`;
     const inputName = customName || inputId;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       const newValue = parseFloat(e.target.value);
       if (!isNaN(newValue)) {
         onChange(newValue);

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 in my Shopify Admin."
+                    value={state.userSetupWebhooks}
+                    onChange={(value) =>
+                      updateField('userSetupWebhooks', value)
+                    }
+                  />
+                </div>
+              )}
             </div>
           </div>
 
@@ -191,6 +246,157 @@ 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 update).
+                      </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">
+                          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">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>
+                    </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>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
     </div>
   );
 }

package/templates/src/components/form/brand/SiteConfigSection.tsx

@@ -48,6 +48,16 @@ export default function SiteConfigSection({
           error={errors.footer}
         />
 
+        <StringInput
+          value={state.adminEmail}
+          onChange={(value) => updateField('adminEmail', value)}
+          label="Admin Email"
+          type="email"
+          placeholder="admin@example.com"
+          required={true}
+          error={errors.adminEmail}
+        />
+
         <StringInput
           value={state.gtag}
           onChange={(value) => updateField('gtag', value)}