@ordergroove/offers 2.27.1 → 2.27.2-alpha-PR-637-2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.1",
+  "version": "2.27.2-alpha-PR-637-2.10+4eac3e2c",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.12"
   },
-  "gitHead": "0a8ee052a83ef6c5a7936a08d9af27065764cf36"
+  "gitHead": "4eac3e2c172a063bacb123d1a20bd74250c57b48"
 }

package/src/components/Offer.js

@@ -44,6 +44,9 @@ export class Offer extends TemplateElement {
       offerId: { type: String, attribute: false },
       auth: authProp,
       preview: { type: String, attribute: 'preview', reflect: 'true' },
+      previewRegularPrice: { type: String, attribute: 'preview-regular-price', reflect: 'true' },
+      previewDiscountRate: { type: String, attribute: 'preview-discount-rate', reflect: 'true' },
+      previewSubscriptionPrice: { type: String, attribute: 'preview-subscription-price', reflect: 'true' },
       location: { type: String },
       autoshipByDefault: { type: Boolean, attribute: 'autoship-by-default' },
       productDefaultFrequency: { type: String, attribute: false },
@@ -149,11 +152,11 @@ export class Offer extends TemplateElement {
           <og-price discount>
             <span slot="prepend">Subscribe and get</span>
             <span slot="append">off</span>
-            <og-text key="offerOptInLabel" slot="fallback"></og-text> 
+            <og-text key="offerOptInLabel" slot="fallback"></og-text>
           </og-price>
           <og-price regular></og-price>
           <og-price subscription></og-price>
-    
+
         </og-optin-button>
         <og-tooltip placement="bottom">
           <div slot="trigger">
@@ -217,7 +220,7 @@ export class Offer extends TemplateElement {
         The product is in your next upcomming order
       </og-when>
     </og-when>
-    
+
     `;
   }
 

package/src/components/Price.js

@@ -24,19 +24,41 @@ export class Price extends withProduct(TemplateElement) {
     const frequency = this.frequency || this.configDefaultFrequency || this.offer?.defaultFrequency;
     const plans = this.productPlans[realProductId] || {};
     const currentPlan = plans[frequency] || [];
-    if (!currentPlan) return '';
-    const [regularPrice, discountRate, subscriptionPrice] = currentPlan;
+    let hasFakePreviewPrice = false;
+
+    let [regularPrice, discountRate, subscriptionPrice] = currentPlan;
+
+    if (this.offer?.isPreview) {
+      if (this.offer?.previewRegularPrice) {
+        regularPrice = this.offer?.previewRegularPrice;
+        hasFakePreviewPrice = true;
+      }
+      if (this.offer?.previewDiscountRate) {
+        discountRate = this.offer?.previewDiscountRate;
+        hasFakePreviewPrice = true;
+      }
+      if (this.offer?.previewSubscriptionPrice) {
+        subscriptionPrice = this.offer?.previewSubscriptionPrice;
+        hasFakePreviewPrice = true;
+      }
+    }
+
+    if (!currentPlan && !hasFakePreviewPrice) return '';
     if (subscriptionPrice === regularPrice) return '';
 
     if (this.regular) {
       return regularPrice;
     }
-    if (this.discount) return discountRate;
+    if (this.discount) {
+      return discountRate;
+    }
+
     return subscriptionPrice;
   }
 
   render() {
     const value = this.value;
+
     if (value)
       return html`
         <slot name="prepend"></slot>

package/src/components/__tests__/Offer.spec.js

@@ -301,4 +301,33 @@ describe('previewMode', () => {
     await el.updateComplete;
     expect(el.preview).toEqual('upsell');
   });
+
+  describe('preview values', () => {
+    it('should be compatible with preview-regular-price', async () => {
+      const el = document.createElement('og-offer');
+      el.setAttribute('preview-standard-offer', true);
+      el.setAttribute('preview-regular-price', 'mock-regular-price');
+      document.body.appendChild(el);
+      await el.updateComplete;
+      expect(el.previewRegularPrice).toEqual('mock-regular-price');
+    });
+
+    it('should be compatible with preview-discount-price', async () => {
+      const el = document.createElement('og-offer');
+      el.setAttribute('preview-standard-offer', true);
+      el.setAttribute('preview-discount-rate', 'mock-discount-rate');
+      document.body.appendChild(el);
+      await el.updateComplete;
+      expect(el.previewDiscountRate).toEqual('mock-discount-rate');
+    });
+
+    it('should be compatible with preview-subscription-price', async () => {
+      const el = document.createElement('og-offer');
+      el.setAttribute('preview-standard-offer', true);
+      el.setAttribute('preview-subscription-price', 'mock-subscription-price');
+      document.body.appendChild(el);
+      await el.updateComplete;
+      expect(el.previewSubscriptionPrice).toEqual('mock-subscription-price');
+    });
+  });
 });

package/src/components/__tests__/Price.fspec.js

@@ -41,3 +41,35 @@ describe('Select Frequency', function() {
     expect(htmlSelectElement.innerText).toEqual('Buy one time\n2 weeks (recomended)\n1 month');
   });
 });
+
+describe('Preview Values', () => {
+  it('should render preview values if preview mode is enabled', async () => {
+    og.offers.clear();
+    document.body.innerHTML = `
+    <og-offer product="123" preview="regular" id="regular1" preview-regular-price="5.00" preview-discount-rate="10%" preview-subscription-price="$4.00"></og-offer>
+    `;
+    const element = document.querySelector('og-offer');
+    await element.updateComplete;
+    expect(
+      element.querySelector('og-optin-button og-price[regular]').shadowRoot.textContent.indexOf('5.00') !== -1
+    ).toBe(true);
+    expect(
+      element.querySelector('og-optin-button og-price[discount]').shadowRoot.textContent.indexOf('10%') !== -1
+    ).toBe(true);
+    expect(
+      element.querySelector('og-optin-button og-price[subscription]').shadowRoot.textContent.indexOf('$4.00') !== -1
+    ).toBe(true);
+  });
+
+  it('should render not preview values if preview values is not set', async () => {
+    og.offers.clear();
+    document.body.innerHTML = `
+    <og-offer product="123" preview="regular" id="regular1" ></og-offer>
+    `;
+    const element = document.querySelector('og-offer');
+    await element.updateComplete;
+    expect(element.querySelector('og-optin-button og-price[regular]').shadowRoot.textContent.trim()).toEqual('');
+    expect(element.querySelector('og-optin-button og-price[discount]').shadowRoot.textContent.trim()).toEqual('');
+    expect(element.querySelector('og-optin-button og-price[subscription]').shadowRoot.textContent.trim()).toEqual('');
+  });
+});