fix(foxy-experimental-add-to-cart-builder): bug fixes and ui changes

Foxy · Dec 19, 2024 · 3eebb4f · 3eebb4f
1 parent a6f1320
commit 3eebb4f
Show file tree

Hide file tree

Showing 9 changed files with 706 additions and 676 deletions.
diff --git a/src/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.ts b/src/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.ts
diff --git a/src/elements/public/ExperimentalAddToCartBuilder/index.ts b/src/elements/public/ExperimentalAddToCartBuilder/index.ts
@@ -1,9 +1,11 @@
 import '@vaadin/vaadin-button';
 
 import '../../internal/InternalResourcePickerControl/index';
+import '../../internal/InternalEditableListControl/index';
 import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalSwitchControl/index';
 import '../../internal/InternalSelectControl/index';
+import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
 import '../TemplateSetCard/index';

diff --git a/...lAddToCartBuilderCustomOptionCard/InternalExperimentalAddToCartBuilderCustomOptionCard.ts b/...lAddToCartBuilderCustomOptionCard/InternalExperimentalAddToCartBuilderCustomOptionCard.ts
@@ -8,8 +8,8 @@ export class InternalExperimentalAddToCartBuilderCustomOptionCard extends Intern
   renderBody(): TemplateResult {
     return html`
       <div class="flex justify-between items-center h-xs">
-        <span class="font-medium">${this.data?.name}</span>
-        <span class="text-secondary">${this.data?.value}</span>
+        <span class="font-medium">${this.data?.name}&ZeroWidthSpace;</span>
+        <span class="text-secondary">${this.data?.value}&ZeroWidthSpace;</span>
       </div>
     `;
   }

diff --git a/...alAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderCustomOptionCard/types.ts b/...alAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderCustomOptionCard/types.ts
@@ -4,7 +4,7 @@ import type { Graph, Resource } from '@foxy.io/sdk/core';
 interface ExperimentalAddToCartSnippetCustomOption extends Graph {
   curie: 'fx:experimental_add_to_cart_snippet_custom_option';
   links: { self: ExperimentalAddToCartSnippetCustomOption };
-  props: ExperimentalAddToCartSnippet['props']['items'][number]['custom_options'][number];
+  props: Required<ExperimentalAddToCartSnippet['props']>['items'][number]['custom_options'][number];
 }
 
 export type Data = Resource<ExperimentalAddToCartSnippetCustomOption>;
diff --git a/...lAddToCartBuilderCustomOptionForm/InternalExperimentalAddToCartBuilderCustomOptionForm.ts b/...lAddToCartBuilderCustomOptionForm/InternalExperimentalAddToCartBuilderCustomOptionForm.ts
@@ -26,25 +26,33 @@ export class InternalExperimentalAddToCartBuilderCustomOptionForm extends Base<D
 
   defaultWeightUnit: string | null = null;
 
-  existingOptions: Data[] = [];
+  existingOptions: Omit<Data, '_links'>[] = [];
 
   itemCategories: string | null = null;
 
   currencyCode: string | null = null;
 
   get readonlySelector(): BooleanSelector {
     const alwaysMatch = [super.readonlySelector.toString()];
-    if (this.data) alwaysMatch.unshift('basics-group');
+    if (this.href) alwaysMatch.unshift('basics-group');
     return new BooleanSelector(alwaysMatch.join(' ').trim());
   }
 
   get disabledSelector(): BooleanSelector {
     const alwaysMatch = [super.disabledSelector.toString()];
 
-    if (!this.data) {
-      if (this.existingOptions.some(o => o.name === this.form.name)) {
-        alwaysMatch.unshift('basics-group:value-configurable');
-      }
+    if (!this.href && this.existingOptions.some(o => o.name === this.form.name)) {
+      alwaysMatch.unshift('basics-group:value-configurable');
+    }
+
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
+  }
+
+  get hiddenSelector(): BooleanSelector {
+    const alwaysMatch = [super.hiddenSelector.toString()];
+
+    if (this.form.value_configurable) {
+      alwaysMatch.unshift('price-group', 'weight-group', 'code-group', 'category-group');
     }
 
     return new BooleanSelector(alwaysMatch.join(' ').trim());
@@ -65,54 +73,50 @@ export class InternalExperimentalAddToCartBuilderCustomOptionForm extends Base<D
         <foxy-internal-switch-control infer="value-configurable"></foxy-internal-switch-control>
       </foxy-internal-summary-control>
 
-      ${this.form.value_configurable
-        ? ''
-        : html`
-            <foxy-internal-summary-control infer="price-group">
-              <foxy-internal-number-control
-                layout="summary-item"
-                suffix=${ifDefined(this.currencyCode ?? void 0)}
-                infer="price"
-              >
-              </foxy-internal-number-control>
-              <foxy-internal-switch-control infer="replace-price"></foxy-internal-switch-control>
-            </foxy-internal-summary-control>
-
-            <foxy-internal-summary-control infer="weight-group">
-              <foxy-internal-number-control
-                layout="summary-item"
-                suffix=${ifDefined(this.__resolvedDefaultWeightUnit ?? void 0)}
-                infer="weight"
-              >
-              </foxy-internal-number-control>
-              <foxy-internal-switch-control infer="replace-weight"></foxy-internal-switch-control>
-            </foxy-internal-summary-control>
-
-            <foxy-internal-summary-control infer="code-group">
-              <foxy-internal-text-control layout="summary-item" infer="code">
-              </foxy-internal-text-control>
-              <foxy-internal-switch-control infer="replace-code"></foxy-internal-switch-control>
-            </foxy-internal-summary-control>
-
-            <foxy-internal-summary-control infer="category-group">
-              <foxy-internal-resource-picker-control
-                layout="summary-item"
-                first=${ifDefined(this.itemCategories ?? undefined)}
-                infer="item-category-uri"
-                item="foxy-item-category-card"
-              >
-              </foxy-internal-resource-picker-control>
-            </foxy-internal-summary-control>
-
-            <foxy-nucleon
-              infer=""
-              class="hidden"
-              href=${ifDefined(this.form.item_category_uri ?? void 0)}
-              id="itemCategoryLoader"
-              @update=${() => this.requestUpdate()}
-            >
-            </foxy-nucleon>
-          `}
+      <foxy-internal-summary-control infer="price-group">
+        <foxy-internal-number-control
+          layout="summary-item"
+          suffix=${ifDefined(this.currencyCode ?? void 0)}
+          infer="price"
+        >
+        </foxy-internal-number-control>
+        <foxy-internal-switch-control infer="replace-price"></foxy-internal-switch-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="weight-group">
+        <foxy-internal-number-control
+          layout="summary-item"
+          suffix=${ifDefined(this.__resolvedDefaultWeightUnit ?? void 0)}
+          infer="weight"
+        >
+        </foxy-internal-number-control>
+        <foxy-internal-switch-control infer="replace-weight"></foxy-internal-switch-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="code-group">
+        <foxy-internal-text-control layout="summary-item" infer="code">
+        </foxy-internal-text-control>
+        <foxy-internal-switch-control infer="replace-code"></foxy-internal-switch-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="category-group">
+        <foxy-internal-resource-picker-control
+          layout="summary-item"
+          first=${ifDefined(this.itemCategories ?? undefined)}
+          infer="item-category-uri"
+          item="foxy-item-category-card"
+        >
+        </foxy-internal-resource-picker-control>
+      </foxy-internal-summary-control>
+
+      <foxy-nucleon
+        infer=""
+        class="hidden"
+        href=${ifDefined(this.form.item_category_uri ?? void 0)}
+        id="itemCategoryLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
     `;
   }
 

diff --git a/...alAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderCustomOptionForm/types.ts b/...alAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderCustomOptionForm/types.ts
@@ -4,7 +4,7 @@ import type { Graph, Resource } from '@foxy.io/sdk/core';
 interface ExperimentalAddToCartSnippetCustomOption extends Graph {
   curie: 'fx:experimental_add_to_cart_snippet_custom_option';
   links: { self: ExperimentalAddToCartSnippetCustomOption };
-  props: ExperimentalAddToCartSnippet['props']['items'][number]['custom_options'][number];
+  props: Required<ExperimentalAddToCartSnippet['props']>['items'][number]['custom_options'][number];
 }
 
 export type Data = Resource<ExperimentalAddToCartSnippetCustomOption>;
diff --git a/...xperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.ts b/...xperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.ts
@@ -18,7 +18,6 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
       itemCategories: { attribute: 'item-categories' },
       currencyCode: { attribute: 'currency-code' },
       index: { type: Number },
-      store: {},
     };
   }
 
@@ -32,6 +31,7 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
 
   renderControl(): TemplateResult {
     const itemCategory = this.__resolvedItemCategory;
+    const itemDeliveryType = itemCategory?.item_delivery_type;
     const nucleon = this.nucleon as ExperimentalAddToCartBuilder | null;
     const index = this.index;
     const item = nucleon?.form.items?.[index];
@@ -89,25 +89,21 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
           </foxy-internal-text-control>
         </foxy-internal-summary-control>
 
-        <foxy-internal-summary-control infer="appearance-group">
-          <foxy-internal-text-control
-            property="items.${index}.image"
-            layout="summary-item"
-            infer="image"
-          >
-          </foxy-internal-text-control>
-
-          ${item?.image
-            ? html`
-                <foxy-internal-text-control
-                  property="items.${index}.url"
+        ${itemDeliveryType === 'notshipped' || itemDeliveryType === 'downloaded'
+          ? ''
+          : html`
+              <foxy-internal-summary-control infer="appearance-group">
+                <foxy-internal-number-control
+                  placeholder=${ifDefined(itemCategory?.default_weight)}
+                  property="items.${index}.weight"
                   layout="summary-item"
-                  infer="url"
+                  suffix=${ifDefined(itemCategory?.default_weight_unit)}
+                  infer="weight"
+                  min="0"
                 >
-                </foxy-internal-text-control>
-              `
-            : ''}
-        </foxy-internal-summary-control>
+                </foxy-internal-number-control>
+              </foxy-internal-summary-control>
+            `}
 
         <foxy-internal-summary-control infer="subscriptions-group">
           <foxy-internal-switch-control
@@ -238,6 +234,12 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
                 >
                 </foxy-internal-number-control>
               `}
+
+          <foxy-internal-switch-control
+            property="items.${index}.hide_quantity"
+            infer="hide-quantity"
+          >
+          </foxy-internal-switch-control>
         </foxy-internal-summary-control>
 
         <foxy-internal-summary-control infer="advanced-group" layout="details">
@@ -254,7 +256,7 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
                   infer="discount-builder"
                   .parsedValue=${{
                     details: item?.discount_details ?? '',
-                    type: item?.discount_type ?? 'discount_amount_percentage',
+                    type: item?.discount_type ?? 'amount_percentage',
                     name: item?.discount_name ?? '',
                   }}
                   @change=${(evt: CustomEvent) => {
@@ -265,6 +267,24 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
               `
             : ''}
 
+          <foxy-internal-text-control
+            property="items.${index}.image"
+            layout="summary-item"
+            infer="image"
+          >
+          </foxy-internal-text-control>
+
+          ${item?.image
+            ? html`
+                <foxy-internal-text-control
+                  property="items.${index}.url"
+                  layout="summary-item"
+                  infer="url"
+                >
+                </foxy-internal-text-control>
+              `
+            : ''}
+
           <foxy-internal-select-control
             property="items.${index}.expires_format"
             layout="summary-item"
@@ -298,43 +318,36 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
                 </foxy-internal-date-control>
               `
             : ''}
+          ${itemDeliveryType === 'notshipped' || itemDeliveryType === 'downloaded'
+            ? ''
+            : html`
+                <foxy-internal-number-control
+                  property="items.${index}.length"
+                  layout="summary-item"
+                  suffix=${ifDefined(itemCategory?.default_length_unit)}
+                  infer="length"
+                  min="0"
+                >
+                </foxy-internal-number-control>
 
-          <foxy-internal-number-control
-            placeholder=${ifDefined(itemCategory?.default_weight)}
-            property="items.${index}.weight"
-            layout="summary-item"
-            suffix=${ifDefined(itemCategory?.default_weight_unit)}
-            infer="weight"
-            min="0"
-          >
-          </foxy-internal-number-control>
-
-          <foxy-internal-number-control
-            property="items.${index}.length"
-            layout="summary-item"
-            suffix=${ifDefined(itemCategory?.default_length_unit)}
-            infer="length"
-            min="0"
-          >
-          </foxy-internal-number-control>
-
-          <foxy-internal-number-control
-            property="items.${index}.width"
-            layout="summary-item"
-            suffix=${ifDefined(itemCategory?.default_length_unit)}
-            infer="width"
-            min="0"
-          >
-          </foxy-internal-number-control>
+                <foxy-internal-number-control
+                  property="items.${index}.width"
+                  layout="summary-item"
+                  suffix=${ifDefined(itemCategory?.default_length_unit)}
+                  infer="width"
+                  min="0"
+                >
+                </foxy-internal-number-control>
 
-          <foxy-internal-number-control
-            property="items.${index}.height"
-            layout="summary-item"
-            suffix=${ifDefined(itemCategory?.default_length_unit)}
-            infer="height"
-            min="0"
-          >
-          </foxy-internal-number-control>
+                <foxy-internal-number-control
+                  property="items.${index}.height"
+                  layout="summary-item"
+                  suffix=${ifDefined(itemCategory?.default_length_unit)}
+                  infer="height"
+                  min="0"
+                >
+                </foxy-internal-number-control>
+              `}
         </foxy-internal-summary-control>
 
         <foxy-internal-async-list-control
@@ -352,7 +365,7 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
         >
         </foxy-internal-async-list-control>
 
-        ${nucleon?.form.items?.length === 1
+        ${(nucleon?.form.items?.length ?? 0) <= 1
           ? html``
           : html`
               <vaadin-button

diff --git a/src/elements/public/ExperimentalAddToCartBuilder/types.ts b/src/elements/public/ExperimentalAddToCartBuilder/types.ts
@@ -13,7 +13,7 @@ export interface ExperimentalAddToCartSnippet extends Graph {
     redirect?: string;
     coupon?: string;
     empty?: 'false' | 'true' | 'reset';
-    cart?: 'add' | 'checkout';
+    cart?: 'add' | 'checkout' | 'redirect';
     items?: {
       name: string;
       item_category_uri?: string;
@@ -28,12 +28,13 @@ export interface ExperimentalAddToCartSnippet extends Graph {
       sub_startdate_format?: 'none' | 'yyyymmdd' | 'dd' | 'duration';
       sub_startdate?: string | number;
       sub_enddate_format?: 'none' | 'yyyymmdd' | 'duration';
-      sub_enddate?: string;
+      sub_enddate?: string | number;
       discount_details?: string;
       discount_type?: string;
       discount_name?: string;
       expires_format?: 'minutes' | 'timestamp' | 'none';
       expires_value?: number;
+      hide_quantity?: boolean;
       quantity?: number;
       quantity_max?: number;
       quantity_min?: number;