MWPW-164493 [Plans] Merch card for Plans page students tab

README.md

@@ -5,6 +5,9 @@ This project is a library of web components providing merchandising content to v
 - Preview: https://main--mas--adobecom.aem.page/
 - Live: https://main--mas--adobecom.aem.live/
 
+## Feature branch name
+Feature branches need to have the name in format `MWPW-XXXXXX` where `XXXXXX` is the ticket number in Jira, otherwise IMS client regex check will fail and user will not be able to sign in.
+
 ## Installation
 
 ```sh

io/www/src/fragment/settings.js

@@ -16,7 +16,7 @@ function applyPlansSettings(fragment, locale) {
 
 async function settings(context) {
     const { locale } = context;
-    if (context.body?.fields?.variant === 'plans') {
+    if (context.body?.fields?.variant?.startsWith('plans')) {
         applyPlansSettings(context.body, locale);
     }
 
@@ -25,7 +25,7 @@ async function settings(context) {
             if (
                 ref &&
                 ref.type === 'content-fragment' &&
-                ref.value?.fields?.variant === 'plans'
+                ref.value?.fields?.variant?.startsWith('plans')
             ) {
                 applyPlansSettings(ref.value, locale);
             }

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

@@ -21,8 +21,6 @@ class MerchCardEditor extends LitElement {
     static properties = {
         fragmentStore: { type: Object, attribute: false },
         updateFragment: { type: Function },
-        wide: { type: Boolean, state: true },
-        superWide: { type: Boolean, state: true },
         availableSizes: { type: Array, state: true },
         availableColors: { type: Array, state: true },
         availableBorderColors: { type: Array, state: true },
@@ -54,8 +52,6 @@ class MerchCardEditor extends LitElement {
     constructor() {
         super();
         this.updateFragment = null;
-        this.wide = false;
-        this.superWide = false;
         this.availableSizes = [];
         this.availableColors = [];
         this.availableBorderColors = [];
@@ -256,8 +252,6 @@ class MerchCardEditor extends LitElement {
             const field = this.querySelector(`sp-field-group.toggle#${key}`);
             if (field) field.style.display = 'block';
         });
-        this.wide = variant.size?.includes('wide');
-        this.superWide = variant.size?.includes('super-wide');
         this.showQuantityFields(this.quantitySelectorDisplayed);
         if (variant.borderColor) {
             const borderField = this.querySelector(
@@ -736,10 +730,7 @@ class MerchCardEditor extends LitElement {
     }
 
     get isPlans() {
-        return (
-            this.fragment.variant === 'plans' ||
-            this.fragment.variant === 'plans-education'
-        );
+        return this.fragment.variant.startsWith('plans');
     }
 
     get badge() {

studio/src/editors/variant-picker.js

@@ -5,6 +5,7 @@ export const VARIANTS = [
     { label: 'All', value: 'all', surface: 'all' },
     { label: 'Catalog', value: 'catalog', surface: 'acom' },
     { label: 'Plans', value: 'plans', surface: 'acom' },
+    { label: 'Plans Students', value: 'plans-students', surface: 'acom' },
     { label: 'Plans Education', value: 'plans-education', surface: 'acom' },
     { label: 'Slice', value: 'ccd-slice', surface: 'ccd' },
     { label: 'Special offers', value: 'special-offers', surface: 'acom' },