MWPW-164492 Plans Card Authoring v0.1

.gitignore

@@ -28,3 +28,4 @@ config.json
 MerchAtScale-*.json
 .env*
 .aio
+

studio/src/editor-panel.js

@@ -220,10 +220,10 @@ export default class EditorPanel extends LitElement {
         this.inEdit.updateFieldInternal(fieldName, value);
     }
 
-    updateFragment(event) {
-        const fieldName = event.target.dataset.field;
-        let value = event.target.value || event.detail?.value;
-        value = event.target.multiline ? value?.split(',') : [value ?? ''];
+    updateFragment({ target, detail }) {
+        const fieldName = target.dataset.field;
+        let value = target.value || detail?.value || target.checked;
+        value = target.multiline ? value?.split(',') : [value ?? ''];
         this.inEdit.updateField(fieldName, value);
     }
 

studio/src/editors/merch-card-editor.js

@@ -189,13 +189,23 @@ class MerchCardEditor extends LitElement {
                 <sp-field-label for="prices">Prices</sp-field-label>
                 <rte-field
                     id="prices"
-                    inline
                     data-field="prices"
                     default-link-style="primary-outline"
                     @change="${this.updateFragment}"
                     >${unsafeHTML(form.prices.values[0])}</rte-field
                 >
             </sp-field-group>
+            <sp-field-group class="toggle" id="promoText">
+                <sp-field-label for="promo-text">Promo Text</sp-field-label>
+                <sp-textfield
+                    placeholder="Enter promo text"
+                    id="promo-text"
+                    data-field="promoText"
+                    value="${form.promoText?.values[0]}"
+                    @input="${this.updateFragment}"
+                    ?disabled=${this.disabled}
+                ></sp-textfield>
+            </sp-field-group>
             <sp-field-group class="toggle" id="description">
                 <sp-field-label for="description">Description</sp-field-label>
                 <rte-field
@@ -207,6 +217,27 @@ class MerchCardEditor extends LitElement {
                     >${unsafeHTML(form.description.values[0])}</rte-field
                 >
             </sp-field-group>
+            <sp-field-group class="toggle" id="callout">
+                <sp-field-label for="callout"> Callout text </sp-field-label>
+                <rte-field
+                    id="callout"
+                    link
+                    data-field="callout"
+                    default-link-style="secondary-link"
+                    @change="${this.updateFragment}"
+                    ?readonly=${this.disabled}
+                    >${unsafeHTML(form.callout?.values[0])}</rte-field
+                >
+            </sp-field-group>
+            <sp-checkbox
+                size="m"
+                data-field="showStockCheckbox"
+                value="${form.showStockCheckbox?.values[0]}"
+                .checked="${form.showStockCheckbox?.values[0]}"
+                @change="${this.updateFragment}"
+                ?disabled=${this.disabled}
+                >Stock Checkbox</sp-checkbox
+            >
             <sp-field-group class="toggle" id="ctas">
                 <sp-field-label for="ctas">Footer</sp-field-label>
                 <rte-field

studio/src/editors/variant-picker.js

@@ -4,6 +4,7 @@ import { html, LitElement } from 'lit';
 export const VARIANTS = [
     { label: 'All', value: 'all', surface: 'all' },
     { label: 'Catalog', value: 'catalog', surface: 'acom' },
+    { label: 'Plans', value: 'plans', surface: 'acom' },
     { label: 'Slice', value: 'ccd-slice', surface: 'ccd' },
     { label: 'Special offers', value: 'special-offers', surface: 'acom' },
     { label: 'Suggested', value: 'ccd-suggested', surface: 'ccd' },

studio/src/swc.js

@@ -101,3 +101,4 @@ import '@spectrum-web-components/top-nav/sp-top-nav-item.js';
 import '@spectrum-web-components/top-nav/sp-top-nav.js';
 import '@spectrum-web-components/underlay/sp-underlay.js';
 import '@spectrum-web-components/underlay/sp-underlay.js';
+import '@spectrum-web-components/checkbox/sp-checkbox.js';