@pelcro/react-pelcro-js 2.7.0-beta.4 → 2.7.0-beta.5

package/dist/index.cjs.js

@@ -4526,7 +4526,11 @@ var labels$1 = {
 	},
 	selectProduct: "Select a product",
 	selectPlan: "Select a plan",
-	startingAt: "Starting at"
+	startingAt: "Starting at",
+	restrictiveArticles: {
+		subscribeTo: "Subscribe to one of the following options to get access to this page",
+		or: "Or take a look at some of our other options below"
+	}
 };
 var buttons$1 = {
 	next: "Next",
@@ -4555,7 +4559,11 @@ var labels = {
 	},
 	selectProduct: "Sélectionnez un produit",
 	selectPlan: "Sélectionnez un plan",
-	starningAt: "À partir de"
+	starningAt: "À partir de",
+	restrictiveArticles: {
+		subscribeTo: "Abonnez-vous à une des options suivantes pour accéder au contenu de cette page",
+		or: "Sinon, jetez un coup d'oeil à d'autres offres ci-dessous"
+	}
 };
 var buttons = {
 	next: "Prochain",
@@ -11061,42 +11069,80 @@ class SelectModal extends React.Component {
       return `${startingPlan.amount_formatted}/${startingPlan.interval}`;
     });
 
+    _defineProperty$3(this, "renderOneProduct", (product, index, options) => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+      const productButtonLabel = isPlanMode ? this.locale("buttons.back") : this.locale("buttons.select");
+      const productButtonCallback = isPlanMode ? this.goBack : this.selectProduct;
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        key: product.id,
+        className: `plc-flex plc-items-start plc-p-2 plc-mt-4 plc-space-x-3 plc-text-gray-900 plc-border-solid plc-rounded plc-border-primary-500 pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
+      }, product.image && /*#__PURE__*/React__default['default'].createElement("img", {
+        alt: `image of ${product.name}`,
+        src: product.image,
+        className: "plc-object-contain plc-w-1/4 pelcro-select-product-image"
+      }), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: `plc-flex plc-flex-wrap ${product.image ? "plc-w-3/4" : "plc-w-full"}`
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-full pelcro-select-product-header"
+      }, /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-font-bold pelcro-select-product-title"
+      }, product.name), /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-text-xs pelcro-select-product-description"
+      }, product.description)), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-flex plc-items-end plc-w-full plc-mt-3"
+      }, product.plans && /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
+      }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+        onClick: productButtonCallback,
+        "data-key": product.id,
+        id: "pelcro-select-product-back-button",
+        className: `plc-ml-auto plc-text-xs ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+      }, index === 0 && {
+        autoFocus: true
+      }), productButtonLabel))));
+    });
+
     _defineProperty$3(this, "renderProducts", () => {
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
-      const productButtonLabel = userDidSelectProduct ? this.locale("buttons.back") : this.locale("buttons.select");
-      const productButtonCallback = userDidSelectProduct ? this.goBack : this.selectProduct;
-      return productsToShow.map((product, i) => {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: product.id,
-          className: "plc-flex plc-items-start plc-p-2 plc-mt-4 plc-space-x-3 plc-text-gray-900 plc-border plc-border-solid plc-rounded plc-border-primary-500 pelcro-select-product-wrapper"
-        }, product.image && /*#__PURE__*/React__default['default'].createElement("img", {
-          alt: `image of ${product.name}`,
-          src: product.image,
-          className: "plc-object-contain plc-w-1/4 pelcro-select-product-image"
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: `plc-flex plc-flex-wrap ${product.image ? "plc-w-3/4" : "plc-w-full"}`
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-w-full pelcro-select-product-header"
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "plc-font-bold pelcro-select-product-title"
-        }, product.name), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "plc-text-xs pelcro-select-product-description"
-        }, product.description)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-flex plc-items-end plc-w-full plc-mt-3"
-        }, product.plans && /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
-        }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
-          onClick: productButtonCallback,
-          "data-key": product.id,
-          id: "pelcro-select-product-back-button",
-          className: "plc-ml-auto plc-text-xs"
-        }, i === 0 && {
-          autoFocus: true
-        }), productButtonLabel))));
+      return productsToShow.map((product, index) => {
+        return this.renderOneProduct(product, index);
       });
     });
 
+    _defineProperty$3(this, "renderMatchingProductsFirst", () => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+
+      if (isPlanMode) {
+        return this.renderOneProduct(this.state.product);
+      }
+
+      const [productsThatMatchArticleTag, allProductsMinusMatched] = productsWithMatchedTaggedFirst(); // Render normal products if there are no available matching products
+
+      if (!(productsThatMatchArticleTag !== null && productsThatMatchArticleTag !== void 0 && productsThatMatchArticleTag.length)) {
+        return this.renderProducts();
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+        className: "plc-text-sm plc-font-semibold"
+      }, this.locale("labels.restrictiveArticles.subscribeTo")), productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
+        emphasize: true
+      })), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("hr", {
+        className: "plc-my-4"
+      }), /*#__PURE__*/React__default['default'].createElement("h3", {
+        className: "plc-text-sm plc-font-semibold"
+      }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
+
+      function productsWithMatchedTaggedFirst() {
+        var _window$Pelcro$produc;
+
+        const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
+        const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
+        const allProductsMinusMatched = allProducts.filter(product => productsThatMatchArticleTag.find(matchedProduct => matchedProduct.id !== product.id));
+        return [productsThatMatchArticleTag, allProductsMinusMatched];
+      }
+    });
+
     _defineProperty$3(this, "renderPlans", () => {
       return this.state.planList.map(plan => {
         const isChecked = this.state.plan.id === plan.id ? true : false;
@@ -11223,7 +11269,7 @@ class SelectModal extends React.Component {
   }
 
   render() {
-    var _window$Pelcro$produc, _window$Pelcro$produc2;
+    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
 
     const {
       disableGifting
@@ -11257,9 +11303,9 @@ class SelectModal extends React.Component {
       className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
     }, /*#__PURE__*/React__default['default'].createElement("h4", {
       className: "plc-text-2xl plc-font-semibold"
-    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc === void 0 ? void 0 : _window$Pelcro$produc.paywall.select_title)), /*#__PURE__*/React__default['default'].createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_subtitle))), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default['default'].createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle))), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "pelcro-select-products-wrapper"
-    }, this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-overflow-y-scroll plc-max-h-72 pelcro-select-plans-wrapper"
     }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-flex plc-justify-center plc-mt-2"

package/dist/index.esm.js

@@ -4496,7 +4496,11 @@ var labels$1 = {
 	},
 	selectProduct: "Select a product",
 	selectPlan: "Select a plan",
-	startingAt: "Starting at"
+	startingAt: "Starting at",
+	restrictiveArticles: {
+		subscribeTo: "Subscribe to one of the following options to get access to this page",
+		or: "Or take a look at some of our other options below"
+	}
 };
 var buttons$1 = {
 	next: "Next",
@@ -4525,7 +4529,11 @@ var labels = {
 	},
 	selectProduct: "Sélectionnez un produit",
 	selectPlan: "Sélectionnez un plan",
-	starningAt: "À partir de"
+	starningAt: "À partir de",
+	restrictiveArticles: {
+		subscribeTo: "Abonnez-vous à une des options suivantes pour accéder au contenu de cette page",
+		or: "Sinon, jetez un coup d'oeil à d'autres offres ci-dessous"
+	}
 };
 var buttons = {
 	next: "Prochain",
@@ -11031,42 +11039,80 @@ class SelectModal extends Component {
       return `${startingPlan.amount_formatted}/${startingPlan.interval}`;
     });
 
+    _defineProperty$3(this, "renderOneProduct", (product, index, options) => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+      const productButtonLabel = isPlanMode ? this.locale("buttons.back") : this.locale("buttons.select");
+      const productButtonCallback = isPlanMode ? this.goBack : this.selectProduct;
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: product.id,
+        className: `plc-flex plc-items-start plc-p-2 plc-mt-4 plc-space-x-3 plc-text-gray-900 plc-border-solid plc-rounded plc-border-primary-500 pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
+      }, product.image && /*#__PURE__*/React__default.createElement("img", {
+        alt: `image of ${product.name}`,
+        src: product.image,
+        className: "plc-object-contain plc-w-1/4 pelcro-select-product-image"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: `plc-flex plc-flex-wrap ${product.image ? "plc-w-3/4" : "plc-w-full"}`
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-full pelcro-select-product-header"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "plc-font-bold pelcro-select-product-title"
+      }, product.name), /*#__PURE__*/React__default.createElement("p", {
+        className: "plc-text-xs pelcro-select-product-description"
+      }, product.description)), /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-flex plc-items-end plc-w-full plc-mt-3"
+      }, product.plans && /*#__PURE__*/React__default.createElement("p", {
+        className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
+      }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default.createElement(Button, Object.assign({
+        onClick: productButtonCallback,
+        "data-key": product.id,
+        id: "pelcro-select-product-back-button",
+        className: `plc-ml-auto plc-text-xs ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+      }, index === 0 && {
+        autoFocus: true
+      }), productButtonLabel))));
+    });
+
     _defineProperty$3(this, "renderProducts", () => {
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
-      const productButtonLabel = userDidSelectProduct ? this.locale("buttons.back") : this.locale("buttons.select");
-      const productButtonCallback = userDidSelectProduct ? this.goBack : this.selectProduct;
-      return productsToShow.map((product, i) => {
-        return /*#__PURE__*/React__default.createElement("div", {
-          key: product.id,
-          className: "plc-flex plc-items-start plc-p-2 plc-mt-4 plc-space-x-3 plc-text-gray-900 plc-border plc-border-solid plc-rounded plc-border-primary-500 pelcro-select-product-wrapper"
-        }, product.image && /*#__PURE__*/React__default.createElement("img", {
-          alt: `image of ${product.name}`,
-          src: product.image,
-          className: "plc-object-contain plc-w-1/4 pelcro-select-product-image"
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: `plc-flex plc-flex-wrap ${product.image ? "plc-w-3/4" : "plc-w-full"}`
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "plc-w-full pelcro-select-product-header"
-        }, /*#__PURE__*/React__default.createElement("p", {
-          className: "plc-font-bold pelcro-select-product-title"
-        }, product.name), /*#__PURE__*/React__default.createElement("p", {
-          className: "plc-text-xs pelcro-select-product-description"
-        }, product.description)), /*#__PURE__*/React__default.createElement("div", {
-          className: "plc-flex plc-items-end plc-w-full plc-mt-3"
-        }, product.plans && /*#__PURE__*/React__default.createElement("p", {
-          className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
-        }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default.createElement(Button, Object.assign({
-          onClick: productButtonCallback,
-          "data-key": product.id,
-          id: "pelcro-select-product-back-button",
-          className: "plc-ml-auto plc-text-xs"
-        }, i === 0 && {
-          autoFocus: true
-        }), productButtonLabel))));
+      return productsToShow.map((product, index) => {
+        return this.renderOneProduct(product, index);
       });
     });
 
+    _defineProperty$3(this, "renderMatchingProductsFirst", () => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+
+      if (isPlanMode) {
+        return this.renderOneProduct(this.state.product);
+      }
+
+      const [productsThatMatchArticleTag, allProductsMinusMatched] = productsWithMatchedTaggedFirst(); // Render normal products if there are no available matching products
+
+      if (!(productsThatMatchArticleTag !== null && productsThatMatchArticleTag !== void 0 && productsThatMatchArticleTag.length)) {
+        return this.renderProducts();
+      }
+
+      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h3", {
+        className: "plc-text-sm plc-font-semibold"
+      }, this.locale("labels.restrictiveArticles.subscribeTo")), productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
+        emphasize: true
+      })), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("hr", {
+        className: "plc-my-4"
+      }), /*#__PURE__*/React__default.createElement("h3", {
+        className: "plc-text-sm plc-font-semibold"
+      }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
+
+      function productsWithMatchedTaggedFirst() {
+        var _window$Pelcro$produc;
+
+        const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
+        const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
+        const allProductsMinusMatched = allProducts.filter(product => productsThatMatchArticleTag.find(matchedProduct => matchedProduct.id !== product.id));
+        return [productsThatMatchArticleTag, allProductsMinusMatched];
+      }
+    });
+
     _defineProperty$3(this, "renderPlans", () => {
       return this.state.planList.map(plan => {
         const isChecked = this.state.plan.id === plan.id ? true : false;
@@ -11193,7 +11239,7 @@ class SelectModal extends Component {
   }
 
   render() {
-    var _window$Pelcro$produc, _window$Pelcro$produc2;
+    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
 
     const {
       disableGifting
@@ -11227,9 +11273,9 @@ class SelectModal extends Component {
       className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
     }, /*#__PURE__*/React__default.createElement("h4", {
       className: "plc-text-2xl plc-font-semibold"
-    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc === void 0 ? void 0 : _window$Pelcro$produc.paywall.select_title)), /*#__PURE__*/React__default.createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_subtitle))), /*#__PURE__*/React__default.createElement("div", {
+    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default.createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle))), /*#__PURE__*/React__default.createElement("div", {
       className: "pelcro-select-products-wrapper"
-    }, this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "plc-overflow-y-scroll plc-max-h-72 pelcro-select-plans-wrapper"
     }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default.createElement("div", {
       className: "plc-flex plc-justify-center plc-mt-2"

package/dist/pelcro.css

@@ -1765,6 +1765,10 @@ in order to scope selectors under pelcro-root
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
 }
 
+.pelcro-root .plc-bg-primary-700 {
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
+}
+
 .pelcro-root .plc-bg-white {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "2.7.0-beta.4",
+  "version": "2.7.0-beta.5",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",