feat(commerce): atomic-product-field-condition

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -34,6 +34,7 @@ AtomicNumericFacet,
 AtomicNumericRange,
 AtomicPager,
 AtomicPopover,
+AtomicProductFieldCondition,
 AtomicQueryError,
 AtomicQuerySummary,
 AtomicQuickview,
@@ -131,6 +132,7 @@ AtomicNumericFacet,
 AtomicNumericRange,
 AtomicPager,
 AtomicPopover,
+AtomicProductFieldCondition,
 AtomicQueryError,
 AtomicQuerySummary,
 AtomicQuickview,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -646,6 +646,28 @@ export class AtomicPopover {
 export declare interface AtomicPopover extends Components.AtomicPopover {}
 
 
+@ProxyCmp({
+  inputs: ['ifDefined', 'ifNotDefined']
+})
+@Component({
+  selector: 'atomic-product-field-condition',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['ifDefined', 'ifNotDefined'],
+})
+export class AtomicProductFieldCondition {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicProductFieldCondition extends Components.AtomicProductFieldCondition {}
+
+
 @ProxyCmp({
 })
 @Component({

packages/atomic-react/src/components/stencil-generated/index.ts

@@ -51,6 +51,7 @@ export const AtomicPager = /*@__PURE__*/createReactComponent<JSX.AtomicPager, HT
 export const AtomicPopover = /*@__PURE__*/createReactComponent<JSX.AtomicPopover, HTMLAtomicPopoverElement>('atomic-popover');
 export const AtomicProduct = /*@__PURE__*/createReactComponent<JSX.AtomicProduct, HTMLAtomicProductElement>('atomic-product');
 export const AtomicProductDescription = /*@__PURE__*/createReactComponent<JSX.AtomicProductDescription, HTMLAtomicProductDescriptionElement>('atomic-product-description');
+export const AtomicProductFieldCondition = /*@__PURE__*/createReactComponent<JSX.AtomicProductFieldCondition, HTMLAtomicProductFieldConditionElement>('atomic-product-field-condition');
 export const AtomicProductImage = /*@__PURE__*/createReactComponent<JSX.AtomicProductImage, HTMLAtomicProductImageElement>('atomic-product-image');
 export const AtomicProductLink = /*@__PURE__*/createReactComponent<JSX.AtomicProductLink, HTMLAtomicProductLinkElement>('atomic-product-link');
 export const AtomicProductNumericFieldValue = /*@__PURE__*/createReactComponent<JSX.AtomicProductNumericFieldValue, HTMLAtomicProductNumericFieldValueElement>('atomic-product-numeric-field-value');

packages/atomic/src/components.d.ts

@@ -1647,6 +1647,20 @@ export namespace Components {
          */
         "truncateAfter": 'none' | '1' | '2' | '3' | '4';
     }
+    /**
+     * The `atomic-product-field-condition` component takes a list of conditions that, if fulfilled, apply the template in which it's defined.
+     * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
+     */
+    interface AtomicProductFieldCondition {
+        /**
+          * Verifies whether the specified fields are defined.
+         */
+        "ifDefined"?: string;
+        /**
+          * Verifies whether the specified fields are not defined.
+         */
+        "ifNotDefined"?: string;
+    }
     /**
      * The `atomic-product-image` component renders an image from a product field.
      */
@@ -4011,6 +4025,16 @@ declare global {
         prototype: HTMLAtomicProductDescriptionElement;
         new (): HTMLAtomicProductDescriptionElement;
     };
+    /**
+     * The `atomic-product-field-condition` component takes a list of conditions that, if fulfilled, apply the template in which it's defined.
+     * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
+     */
+    interface HTMLAtomicProductFieldConditionElement extends Components.AtomicProductFieldCondition, HTMLStencilElement {
+    }
+    var HTMLAtomicProductFieldConditionElement: {
+        prototype: HTMLAtomicProductFieldConditionElement;
+        new (): HTMLAtomicProductFieldConditionElement;
+    };
     /**
      * The `atomic-product-image` component renders an image from a product field.
      */
@@ -4981,6 +5005,7 @@ declare global {
         "atomic-popover": HTMLAtomicPopoverElement;
         "atomic-product": HTMLAtomicProductElement;
         "atomic-product-description": HTMLAtomicProductDescriptionElement;
+        "atomic-product-field-condition": HTMLAtomicProductFieldConditionElement;
         "atomic-product-image": HTMLAtomicProductImageElement;
         "atomic-product-link": HTMLAtomicProductLinkElement;
         "atomic-product-numeric-field-value": HTMLAtomicProductNumericFieldValueElement;
@@ -6573,6 +6598,20 @@ declare namespace LocalJSX {
          */
         "truncateAfter"?: 'none' | '1' | '2' | '3' | '4';
     }
+    /**
+     * The `atomic-product-field-condition` component takes a list of conditions that, if fulfilled, apply the template in which it's defined.
+     * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
+     */
+    interface AtomicProductFieldCondition {
+        /**
+          * Verifies whether the specified fields are defined.
+         */
+        "ifDefined"?: string;
+        /**
+          * Verifies whether the specified fields are not defined.
+         */
+        "ifNotDefined"?: string;
+    }
     /**
      * The `atomic-product-image` component renders an image from a product field.
      */
@@ -8003,6 +8042,7 @@ declare namespace LocalJSX {
         "atomic-popover": AtomicPopover;
         "atomic-product": AtomicProduct;
         "atomic-product-description": AtomicProductDescription;
+        "atomic-product-field-condition": AtomicProductFieldCondition;
         "atomic-product-image": AtomicProductImage;
         "atomic-product-link": AtomicProductLink;
         "atomic-product-numeric-field-value": AtomicProductNumericFieldValue;
@@ -8341,6 +8381,11 @@ declare module "@stencil/core" {
              */
             "atomic-product": LocalJSX.AtomicProduct & JSXBase.HTMLAttributes<HTMLAtomicProductElement>;
             "atomic-product-description": LocalJSX.AtomicProductDescription & JSXBase.HTMLAttributes<HTMLAtomicProductDescriptionElement>;
+            /**
+             * The `atomic-product-field-condition` component takes a list of conditions that, if fulfilled, apply the template in which it's defined.
+             * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
+             */
+            "atomic-product-field-condition": LocalJSX.AtomicProductFieldCondition & JSXBase.HTMLAttributes<HTMLAtomicProductFieldConditionElement>;
             /**
              * The `atomic-product-image` component renders an image from a product field.
              */

packages/atomic/src/components/commerce/atomic-product-field-condition/atomic-product-field-condition.tsx

@@ -0,0 +1,58 @@
+import {Product, ProductTemplateCondition} from '@coveo/headless/commerce';
+import {Component, Prop, h, Element} from '@stencil/core';
+import {MapProp} from '../../../utils/props-utils';
+import {ProductContext} from '../product-template-components/product-template-decorators';
+import {
+  makeDefinedConditions,
+  makeMatchConditions,
+} from '../product-template/product-template-common';
+
+/**
+ * The `atomic-product-field-condition` component takes a list of conditions that, if fulfilled, apply the template in which it's defined.
+ * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
+ */
+@Component({
+  tag: 'atomic-product-field-condition',
+  shadow: false,
+})
+export class AtomicProductFieldCondition {
+  @Element() host!: HTMLElement;
+
+  /**
+   * Verifies whether the specified fields are defined.
+   */
+  @Prop({reflect: true}) ifDefined?: string;
+  /**
+   * Verifies whether the specified fields are not defined.
+   */
+  @Prop({reflect: true}) ifNotDefined?: string;
+
+  @MapProp({splitValues: true}) mustMatch: Record<string, string[]> = {};
+
+  @MapProp({splitValues: true}) mustNotMatch: Record<string, string[]> = {};
+
+  private conditions: ProductTemplateCondition[] = [];
+  private shouldBeRemoved = false;
+
+  @ProductContext() private product!: Product;
+
+  public componentWillLoad() {
+    this.conditions = makeDefinedConditions(this.ifDefined, this.ifNotDefined);
+    this.conditions.push(
+      ...makeMatchConditions(this.mustMatch, this.mustNotMatch)
+    );
+  }
+
+  public render() {
+    if (!this.conditions.every((condition) => condition(this.product))) {
+      this.shouldBeRemoved = true;
+      return '';
+    }
+
+    return <slot />;
+  }
+
+  public componentDidLoad() {
+    this.shouldBeRemoved && this.host.remove();
+  }
+}

packages/atomic/src/pages/examples/commerce-website/homepage.html

@@ -44,13 +44,13 @@ <h1>HOMEPAGE</h1>
 
                 <atomic-product-link class="font-bold"></atomic-product-link>
 
-                <atomic-field-condition class="brand text-neutral-dark" if-defined="ec_brand">
+                <atomic-product-field-condition class="brand text-neutral-dark" if-defined="ec_brand">
                   <atomic-product-text field="ec_brand"></atomic-product-text>
-                </atomic-field-condition>
+                </atomic-product-field-condition>
 
-                <atomic-field-condition class="mt-4 text-2xl font-bold field" if-defined="ec_price">
+                <atomic-product-field-condition class="mt-4 text-2xl font-bold field" if-defined="ec_price">
                   <atomic-product-price field="ec_price"></atomic-product-price>
-                </atomic-field-condition>
+                </atomic-product-field-condition>
                 <atomic-product-description></atomic-product-description>
               </template>
             </atomic-product-template>

packages/atomic/src/pages/examples/commerce-website/search.html

@@ -64,26 +64,26 @@ <h1>Search page</h1>
                       </atomic-result-section-visual>
                       <atomic-result-section-title>
                         <atomic-product-link class="font-bold"></atomic-product-link>
-                        <atomic-field-condition class="brand text-neutral-dark" if-defined="ec_brand">
+                        <atomic-product-field-condition class="brand text-neutral-dark" if-defined="ec_brand">
                           <atomic-product-text field="ec_brand"></atomic-product-text>
-                        </atomic-field-condition>
+                        </atomic-product-field-condition>
                       </atomic-result-section-title>
                       <atomic-result-section-title-metadata>
-                        <atomic-field-condition class="field" if-defined="ec_rating">
+                        <atomic-product-field-condition class="field" if-defined="ec_rating">
                           <atomic-product-rating field="ec_rating"></atomic-product-rating>
-                        </atomic-field-condition>
-                        <atomic-field-condition class="mt-4 text-2xl field" if-defined="ec_price">
+                        </atomic-product-field-condition>
+                        <atomic-product-field-condition class="mt-4 text-2xl field" if-defined="ec_price">
                           <atomic-product-price fallbackText="no price" currency="USD"></atomic-product-price>
-                        </atomic-field-condition>
+                        </atomic-product-field-condition>
                       </atomic-result-section-title-metadata>
                       <atomic-result-section-excerpt>
                         <atomic-product-description></atomic-product-description>
                       </atomic-result-section-excerpt>
                       <atomic-result-section-bottom-metadata>
                         <atomic-result-fields-list>
-                          <atomic-field-condition must-match-ec_in_stock="true">
+                          <atomic-product-field-condition must-match-ec_in_stock="true">
                             <atomic-result-badge label="In stock"></atomic-result-badge>
-                          </atomic-field-condition>
+                          </atomic-product-field-condition>
                         </atomic-result-fields-list>
                       </atomic-result-section-bottom-metadata>
                     </template>