@useinsider/guido 3.2.0-beta.e01b42a → 3.2.0

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,22 +1,23 @@
-import { useRecommendation as $ } from "../../../composables/useRecommendation.js";
-function b(e, u, r, o) {
-  const n = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
+import { useConfig as S } from "../../../composables/useConfig.js";
+import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
+function y(e, u, r, o, s = "") {
+  const n = `{{${s}${e}_${u}_${r}}}`, t = `{{${s}${e}_${u}_currency}}`;
   return o === "before" ? `${t} ${n}` : `${n} ${t}`;
 }
-function p(e, u, r, o, n) {
+function p(e, u, r, o, s, n) {
   switch (u) {
     case "productImage": {
       const t = e.querySelector("img");
-      t && (t.setAttribute("src", `{{${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${r}_${o}_name}}`));
+      t && (t.setAttribute("src", `{{${n}${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${n}${r}_${o}_name}}`));
       const c = e.querySelector("a");
-      c && c.setAttribute("href", `{{${r}_${o}_url}}`);
+      c && c.setAttribute("href", `{{${n}${r}_${o}_url}}`);
       break;
     }
     case "productName": {
       const t = e.querySelector("p");
       if (t) {
         const c = t.querySelector("strong") || t;
-        c.textContent = `{{${r}_${o}_name}}`;
+        c.textContent = `{{${n}${r}_${o}_name}}`;
       }
       break;
     }
@@ -24,7 +25,7 @@ function p(e, u, r, o, n) {
       const t = e.querySelector("p");
       if (t) {
         const c = t.querySelector("strong") || t;
-        c.textContent = b(r, o, "price", n);
+        c.textContent = y(r, o, "price", s, n);
       }
       break;
     }
@@ -32,10 +33,11 @@ function p(e, u, r, o, n) {
       const t = e.querySelector("p");
       if (t) {
         const c = t.querySelector("strong") || t;
-        c.textContent = b(
+        c.textContent = y(
           r,
           o,
           "original_price",
+          s,
           n
         ), t.setAttribute("product-attr", "discount");
       }
@@ -43,13 +45,13 @@ function p(e, u, r, o, n) {
     }
     case "productButton": {
       const t = e.querySelector("a");
-      t && t.setAttribute("href", `{{${r}_${o}_url}}`);
+      t && t.setAttribute("href", `{{${n}${r}_${o}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
       const t = e.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_price}}`;
+        t.textContent = `{{${n}${r}_${o}_omnibus_price}}`;
         const c = t.closest("p");
         c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
       }
@@ -58,7 +60,7 @@ function p(e, u, r, o, n) {
     case "productOmnibusDiscount": {
       const t = e.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_discount}}`;
+        t.textContent = `{{${n}${r}_${o}_omnibus_discount}}`;
         const c = t.closest("p");
         c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
       }
@@ -67,66 +69,67 @@ function p(e, u, r, o, n) {
     default: {
       const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
       if (t) {
-        const c = t.getAttribute("product-attr"), s = t.querySelector("p");
-        if (s) {
-          const i = s.querySelector("strong") || s;
-          i.textContent = `{{${r}_${o}_${c}}}`;
+        const c = t.getAttribute("product-attr"), i = t.querySelector("p");
+        if (i) {
+          const a = i.querySelector("strong") || i;
+          a.textContent = `{{${n}${r}_${o}_${c}}}`;
         }
       }
       break;
     }
   }
 }
-function S(e, u, r) {
+function d(e, u, r, o) {
   e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
-    n.querySelectorAll("[data-attribute-type]").forEach((s) => {
-      const i = s.getAttribute("data-attribute-type") || "", l = s.querySelectorAll(".attribute-cell");
-      l.length > 0 ? l.forEach((a) => {
-        p(a, i, u, t, r);
-      }) : p(s, i, u, t, r);
+    n.querySelectorAll("[data-attribute-type]").forEach((i) => {
+      const a = i.getAttribute("data-attribute-type") || "", b = i.querySelectorAll(".attribute-cell");
+      b.length > 0 ? b.forEach((l) => {
+        p(l, a, u, t, r, o);
+      }) : p(i, a, u, t, r, o);
     });
   });
 }
-function _(e, u, r) {
-  const o = e.querySelectorAll(".recommendation-product-row");
-  if (!o.length)
+function q(e, u, r, o) {
+  const s = e.querySelectorAll(".recommendation-product-row");
+  if (!s.length)
     return;
-  const [n] = o, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  o.forEach((s, i) => {
-    s.querySelectorAll("[data-attribute-type]").forEach((a) => {
-      const f = a.getAttribute("data-attribute-type") || "";
-      a.querySelectorAll(".attribute-cell").forEach((y, A) => {
-        const m = i * c + A;
-        p(y, f, u, m, r);
+  const [n] = s, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  s.forEach((i, a) => {
+    i.querySelectorAll("[data-attribute-type]").forEach((l) => {
+      const m = l.getAttribute("data-attribute-type") || "";
+      l.querySelectorAll(".attribute-cell").forEach(($, f) => {
+        const A = a * c + f;
+        p($, m, u, A, r, o);
       });
     });
   });
 }
-function q(e, u, r) {
+function g(e, u, r, o) {
   e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
-    _(n, u, r);
+    q(n, u, r, o);
   });
 }
-function d(e, u) {
-  const r = e.getAttribute("data-layout") || "grid", o = e.getAttribute("currency-alignment") || "after";
-  r === "list" ? S(e, u, o) : q(e, u, o);
+function h(e, u, r) {
+  const o = e.getAttribute("data-layout") || "grid", s = e.getAttribute("currency-alignment") || "after";
+  o === "list" ? d(e, u, s, r) : g(e, u, s, r);
 }
-function g(e, u) {
+function C(e, u) {
   const r = e.match(/<!DOCTYPE[^>]*>/i);
   return (r ? `${r[0]}
 ` : "") + u.documentElement.outerHTML;
 }
-function E(e) {
+function P(e) {
   const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".recommendation-block-v2");
   if (!o.length)
     return e;
-  const { buildCampaignUrl: n } = $();
-  return o.forEach((c) => {
-    const s = c.getAttribute("recommendation-id");
-    s && (n(s), d(c, s));
-  }), g(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  const { buildCampaignUrl: s } = _(), { isFeatureEnabled: n } = S(), t = n("liquidSyntax") ? "reco_" : "";
+  return o.forEach((i) => {
+    var b, l;
+    const a = i.getAttribute("recommendation-id");
+    a && ((b = i.parentNode) == null || b.insertBefore(r.createComment("REC_START"), i), (l = i.parentNode) == null || l.insertBefore(r.createComment("REC_END"), i.nextSibling), s(a), h(i, a, t));
+  }), C(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  b as formatPriceVariable,
-  E as prepareRecommendationBlocks
+  y as formatPriceVariable,
+  P as prepareRecommendationBlocks
 };

package/dist/config/migrator/checkboxMigrator.js

@@ -11,6 +11,8 @@ class f {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.checkbox-block");
       return i.length === 0 ? t : (i.forEach((r) => {
+        if (r.classList.contains("checkbox-block-v2"))
+          return;
         const n = r.getAttribute("id"), l = this.extractTextFromElement(r, "ins-title"), c = this.extractTextFromElement(r, "ins-description"), a = this.buildTextBlock(l), p = this.buildTextBlock(c), g = b.replace("{-{-TITLE-}-}", a).replace("{-{-DESCRIPTION-}-}", p), o = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${g}</tr></tbody></table>`,
           "text/html"
@@ -22,7 +24,7 @@ class f {
     }
   }
   extractTextFromElement(t, e) {
-    var o, u;
+    var o, d;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -41,13 +43,13 @@ class f {
         align: i.getAttribute("align") || "left",
         styles: ""
       };
-    const n = ((u = r.textContent) == null ? void 0 : u.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), d = this.convertInlineToBlock(g);
+    const n = ((d = r.textContent) == null ? void 0 : d.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), u = this.convertInlineToBlock(g);
     return {
       text: n,
       isBold: a,
       isItalic: p,
       align: c,
-      styles: d
+      styles: u
     };
   }
   buildTextBlock(t) {

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,28 +1,30 @@
-var b = Object.defineProperty;
-var f = (r, t, e) => t in r ? b(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var x = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
+var x = Object.defineProperty;
+var f = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var b = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
 import h from "../../extensions/Blocks/RadioButton/template.js";
 class T {
   constructor() {
-    x(this, "parser");
+    b(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.radio-button-block");
       return i.length === 0 ? t : (i.forEach((s) => {
-        const o = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), n = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", n), y = this.parser.parseFromString(
+        if (s.classList.contains("radio-button-v2"))
+          return;
+        const n = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), o = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", o), y = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        y && s.parentNode && (y.setAttribute("id", o || ""), s.parentNode.replaceChild(y, s));
+        y && s.parentNode && (y.setAttribute("id", n || ""), s.parentNode.replaceChild(y, s));
       }), e.documentElement.outerHTML);
     } catch (e) {
       return console.error("RadioButtonMigrator failed:", e), t;
     }
   }
   extractTextFromElement(t, e) {
-    var n, c;
+    var o, c;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -36,16 +38,16 @@ class T {
     const s = i.querySelector("p");
     if (!s)
       return {
-        text: ((n = i.textContent) == null ? void 0 : n.trim()) || (e === "ins-title" ? "Title" : "Description"),
+        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
         isBold: !1,
         isItalic: !1,
         align: i.getAttribute("align") || "left",
         styles: "",
         classList: ""
       };
-    const o = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
+    const n = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
     return {
-      text: o,
+      text: n,
       isBold: p,
       isItalic: u,
       align: a,
@@ -66,8 +68,8 @@ class T {
         `;
   }
   removeStyleProperties(t, e) {
-    return t ? e.reduce((s, o) => {
-      const l = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
+    return t ? e.reduce((s, n) => {
+      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
       return s.replace(l, "");
     }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
   }

package/dist/enums/extensions/recommendationBlock.js

@@ -1,6 +1,8 @@
 const s = {
   RECOMMENDATION_API_URL: "https://recommendationv2.api.useinsider.com"
-}, i = [
+}, i = {
+  CLIENT_ID: "clientId"
+}, u = [
   { id: 11, key: "similarViewed", name: "Viewed Together", path: "viewed-together" },
   { id: 12, key: "similarBought", name: "Purchased Together", path: "purchased-together" },
   { id: 13, key: "userBased", name: "User Based", path: "user-based" },
@@ -11,13 +13,13 @@ const s = {
   { id: 46, key: "mostValuableOfPartner", name: "Most Valuable Products", path: "most-valuable" },
   { id: 61, key: "mostPopular", name: "Most Popular Items", path: "most-popular" },
   { id: 62, key: "mostPurchased", name: "Top Sellers", path: "top-sellers" }
-], u = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], l = [
+], l = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], c = [
   { text: "before the amount", value: "0" },
   { text: "after the amount", value: "1" }
-], c = [
+], d = [
   { text: "dot(.)", value: "." },
   { text: "comma(,)", value: "," }
-], d = [
+], p = [
   { text: "0", value: "0" },
   { text: "1", value: "1" },
   { text: "2", value: "2" },
@@ -46,7 +48,7 @@ const s = {
 ], n = [
   { text: "true", value: "==" },
   { text: "false", value: "!=" }
-], p = (t) => {
+], m = (t) => {
   if (!t)
     return e;
   switch (t) {
@@ -65,13 +67,14 @@ const s = {
   }
 };
 export {
-  u as PriceAttributes,
-  i as RecommendationFeedSourceMaps,
+  l as PriceAttributes,
+  i as QUERY_PARAMS,
+  u as RecommendationFeedSourceMaps,
   s as URLS,
-  d as currencyDecimalCounts,
-  l as currencyLocationMaps,
-  c as currencyOperators,
-  p as getOperatorOptions,
+  p as currencyDecimalCounts,
+  c as currencyLocationMaps,
+  d as currencyOperators,
+  m as getOperatorOptions,
   a as operatorOptionsForArrayOfStrings,
   n as operatorOptionsForBooleans,
   o as operatorOptionsForDates,

package/dist/enums/recommendation.js

@@ -28,8 +28,8 @@ const e = 20, s = 320, t = "vertical", m = {
   ATTRIBUTE_PARAGRAPH: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>[\S\s]*?<\/p>/gm,
   ATTRIBUTE_PARAGRAPH_START_TAG: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>/gm,
   COMPOSITION: /composition="true"/gm,
-  CUSTOM_FIELD: /{{[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
-  CUSTOM_FIELD_INDEXES_PART: /{{[0-9]+_[0-8]_/gm,
+  CUSTOM_FIELD: /{{(?:reco_)?[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
+  CUSTOM_FIELD_INDEXES_PART: /{{(?:reco_)?[0-9]+_[0-8]_/gm,
   CUSTOM_FIELD_NAME_PART: /_(discount|omnibus_discount|omnibus_price)}}/gm
 }, n = {
   PARAGRAPH_END_TAG: "</p>"

package/dist/extensions/Blocks/CouponBlock/template.js

@@ -1,29 +1,40 @@
-import { BlockType as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { COUPON_BLOCK_ID as e } from "./block.js";
-const t = `
-    <${o.BLOCK_TEXT}
+import { useConfig as n } from "../../../composables/useConfig.js";
+import { BlockType as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { COUPON_BLOCK_ID as t } from "./block.js";
+const c = "{@COUPON_CODE}", s = "{{ins_coupon_code}}";
+function l() {
+  const { isFeatureEnabled: o } = n();
+  return o("liquidSyntax") ? s : c;
+}
+function i(o) {
+  return `
+    <${e.BLOCK_TEXT}
         class="coupon-block ins-coupon-code coupon-block-v2 es-p10"
         align="center"
-        esd-extension-block-id="${e}">
+        esd-extension-block-id="${t}">
         <p
             path="1"
             contenteditable="false"
             style="font-size: 16px; color: #333333;">
-            <strong path="1,0">{@COUPON_CODE}</strong>
+            <strong path="1,0">${o}</strong>
         </p>
-    </${o.BLOCK_TEXT}>
-    `, l = `
+    </${e.BLOCK_TEXT}>
+    `;
+}
+const u = `
     <td
         class="coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block"
-        esd-extension-block-id="${e}"
+        esd-extension-block-id="${t}"
     >
         <p class="ins-title" contenteditable="false">{@COUPON_CODE}</p>
     </td>
 `;
-function s() {
-  return t;
+function d() {
+  return i(l());
 }
 export {
-  l as default,
-  s as getDefaultTemplate
+  c as COUPON_PLACEHOLDER_DEFAULT,
+  s as COUPON_PLACEHOLDER_LIQUID,
+  u as default,
+  d as getDefaultTemplate
 };

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -1,26 +1,42 @@
-const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", t = ".ins-recommendation-mobile-container", n = ".ins-recommendation-mobile-row", R = {
+const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", n = ".ins-recommendation-mobile-container", t = ".ins-recommendation-mobile-row", r = {
   CURRENCY: "currency",
   SYMBOL: "currency-symbol",
   ALIGNMENT: "currency-alignment",
   THOUSAND_SEPARATOR: "currency-thousand-separator",
   DECIMAL_SEPARATOR: "currency-decimal-separator",
   DECIMAL_COUNT: "currency-decimal-count"
-}, r = "productImage", O = "productName", _ = "productPrice", e = "productOldPrice", s = "productOmnibusPrice", C = "productOmnibusDiscount", E = "productButton", A = "customAttr:", i = "data-custom-attributes", u = "product-attr";
+}, R = "productImage", _ = "productName", e = "productPrice", O = "productOldPrice", s = "productOmnibusPrice", i = "productOmnibusDiscount", E = "productButton", A = "customAttr:", C = "data-custom-attributes", u = "product-attr", m = /* @__PURE__ */ new Set([
+  "name",
+  // productName
+  "price",
+  // productPrice
+  "original_price",
+  // productOldPrice
+  "image_url",
+  // productImage
+  "url",
+  // productButton
+  "omnibus_price",
+  // productOmnibusPrice
+  "omnibus_discount"
+  // productOmnibusDiscount
+]);
 export {
   A as ATTR_CUSTOM_PREFIX,
-  i as ATTR_DATA_CUSTOM_ATTRIBUTES,
+  C as ATTR_DATA_CUSTOM_ATTRIBUTES,
   u as ATTR_PRODUCT_ATTR,
   E as ATTR_PRODUCT_BUTTON,
-  r as ATTR_PRODUCT_IMAGE,
-  O as ATTR_PRODUCT_NAME,
-  e as ATTR_PRODUCT_OLD_PRICE,
-  C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  R as ATTR_PRODUCT_IMAGE,
+  _ as ATTR_PRODUCT_NAME,
+  O as ATTR_PRODUCT_OLD_PRICE,
+  i as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
   s as ATTR_PRODUCT_OMNIBUS_PRICE,
-  _ as ATTR_PRODUCT_PRICE,
+  e as ATTR_PRODUCT_PRICE,
   T as BLOCK_ROOT_SELECTOR,
+  m as BUILT_IN_DEFAULT_ATTRIBUTES,
   c as CONTAINER_SELECTOR,
-  R as CURRENCY_ATTR,
+  r as CURRENCY_ATTR,
   o as DESKTOP_CONTAINER_SELECTOR,
-  t as MOBILE_CONTAINER_SELECTOR,
-  n as MOBILE_ROW_SELECTOR
+  n as MOBILE_CONTAINER_SELECTOR,
+  t as MOBILE_ROW_SELECTOR
 };