Price summary updates

support-frontend/assets/components/priceLabel/priceLabel.jsx

@@ -3,29 +3,35 @@
 // ----- Imports ----- //
 
 import React from 'react';
-import { showPrice, applyDiscount, hasDiscount, type Price, type Promotion } from 'helpers/productPrice/productPrices';
+import {
+  getAppliedPromo,
+  hasDiscount,
+  type ProductPrice,
+  showPrice,
+} from 'helpers/productPrice/productPrices';
 import type { BillingPeriod } from 'helpers/billingPeriods';
-import { billingPeriodNoun } from 'helpers/billingPeriods';
+import { getPriceDescription } from 'helpers/productPrice/priceDescriptions';
 
 export type PropTypes = {
-  productPrice: Price,
-  promotion: ?Promotion,
+  productPrice: ProductPrice,
   billingPeriod: BillingPeriod,
 }
-const displayPriceForPeriod = (productPrice: Price, billingPeriod: BillingPeriod) =>
-  `${showPrice(productPrice)}/${billingPeriodNoun(billingPeriod).toLowerCase()}`;
 
 function PriceLabel({
-  productPrice, promotion, billingPeriod, ...props
+  productPrice, billingPeriod, ...props
 }: PropTypes) {
+  const description = getPriceDescription(productPrice, billingPeriod, true);
+
+  const promotion = getAppliedPromo(productPrice.promotions);
+
   if (hasDiscount(promotion)) {
     return (
       <span {...props}>
         <del aria-hidden="true">{showPrice(productPrice)}</del>{' '}
-        {displayPriceForPeriod(applyDiscount(productPrice, promotion), billingPeriod)}
+        {description}
       </span>);
   }
-  return (<span {...props}>{displayPriceForPeriod(productPrice, billingPeriod)}</span>);
+  return (<span {...props}>{description}</span>);
 }
 
 export { PriceLabel };

support-frontend/assets/components/promotionSummary/promotionSummary.jsx

@@ -12,7 +12,7 @@ import type { IsoCountry } from 'helpers/internationalisation/country';
 import { fixDecimals } from 'helpers/subscriptions';
 import type { Option } from 'helpers/types/option';
 import { GBPCountries } from 'helpers/internationalisation/countryGroup';
-import { getPromotion, regularPrice } from 'helpers/productPrice/productPrices';
+import { getPromotion, getProductPrice } from 'helpers/productPrice/productPrices';
 
 export type PropTypes = {
   productPrices: ProductPrices,
@@ -73,7 +73,7 @@ function discountSummary(
 function PromotionSummary(props: PropTypes) {
   if (props.country) {
     const { country } = props;
-    const productPrice = regularPrice(props.productPrices, country, props.billingPeriod);
+    const productPrice = getProductPrice(props.productPrices, country, props.billingPeriod);
     const promotion = getPromotion(props.productPrices, country, props.billingPeriod);
     if (promotion &&
       promotion.discountedPrice &&

support-frontend/assets/components/subscriptionCheckouts/billingPeriodSelector.jsx

@@ -17,7 +17,6 @@ import type { IsoCountry } from 'helpers/internationalisation/country';
 import type { FulfilmentOptions } from 'helpers/productPrice/fulfilmentOptions';
 import { NoFulfilmentOptions } from 'helpers/productPrice/fulfilmentOptions';
 import type { Action } from 'helpers/subscriptionsForms/formActions';
-import { extendedGlyphForCountry } from 'helpers/internationalisation/currency';
 import {
   getAppliedPromoDescription,
   getPriceDescription,
@@ -48,7 +47,6 @@ function BillingPeriodSelector(props: PropTypes) {
             : <RadioInputWithHelper
               text={billingPeriodTitle(billingPeriod)}
               helper={getPriceDescription(
-                extendedGlyphForCountry(props.billingCountry),
                 productPrice,
                 billingPeriod,
               )}

support-frontend/assets/components/subscriptionCheckouts/summary.jsx

@@ -1,7 +1,12 @@
 // @flow
 
 import React, { Component } from 'react';
-import { hasDiscount, type Price, type Promotion } from 'helpers/productPrice/productPrices';
+import {
+  getAppliedPromo,
+  hasDiscount,
+  type ProductPrice,
+  type Promotion,
+} from 'helpers/productPrice/productPrices';
 import type { BillingPeriod } from 'helpers/billingPeriods';
 import styles from './summary.module.scss';
 import { PriceLabel } from 'components/priceLabel/priceLabel';
@@ -23,8 +28,7 @@ type PropTypes = {|
   dataList: DataListItem[],
   description: ?string,
   image: $Call<GridImageType, GridImg>,
-  productPrice: Price,
-  promotion: ?Promotion,
+  productPrice: ProductPrice,
   title: string,
   // eslint-disable-next-line react/no-unused-prop-types
   product: SubscriptionProduct,
@@ -99,10 +103,9 @@ const TabletAndDesktop = (props: PropTypes) => (
         <PriceLabel
           className={styles.pricing}
           productPrice={props.productPrice}
-          promotion={props.promotion}
           billingPeriod={props.billingPeriod}
         />
-        <PromotionDiscount promotion={props.promotion} />
+        <PromotionDiscount promotion={getAppliedPromo(props.productPrice.promotions)} />
         {props.dataList ?
           <DataList dataList={props.dataList} />
         : null}
@@ -122,8 +125,7 @@ TabletAndDesktop.defaultProps = {
 const HideDropDown = (props: {
   billingPeriod: BillingPeriod,
   onClick: Function,
-  productPrice: Price,
-  promotion: ?Promotion,
+  productPrice: ProductPrice,
   showDropDown: boolean,
   title: string,
   paper: boolean,
@@ -138,7 +140,6 @@ const HideDropDown = (props: {
       <PriceLabel
         className={styles.pricing}
         productPrice={props.productPrice}
-        promotion={props.promotion}
         billingPeriod={props.billingPeriod}
       />
       {props.paper ?
@@ -170,7 +171,6 @@ const ShowDropDown = (props: {
       <PriceLabel
         className={styles.data}
         productPrice={props.productPrice}
-        promotion={props.promotion}
         billingPeriod={props.billingPeriod}
       />
     </div>

support-frontend/assets/helpers/internationalisation/currency.js

@@ -7,10 +7,8 @@ import { getQueryParameter } from 'helpers/url';
 import {
   type CountryGroup,
   type CountryGroupId,
-  countryGroups, fromCountry, GBPCountries,
+  countryGroups,
 } from './countryGroup';
-import type { IsoCountry } from 'helpers/internationalisation/country';
-
 
 // ----- Types ----- //
 
@@ -133,12 +131,6 @@ function detect(countryGroup: CountryGroupId): IsoCurrency {
 const glyph = (c: IsoCurrency): string => currencies[c].glyph;
 const extendedGlyph = (c: IsoCurrency): string => currencies[c].extendedGlyph;
 
-const extendedGlyphForCountry = (country: IsoCountry) => {
-  const currency = fromCountryGroupId(fromCountry(country) || GBPCountries);
-  return extendedGlyph(currency || 'GBP');
-};
-
-
 // ----- Exports ----- //
 
 export {
@@ -148,5 +140,4 @@ export {
   currencies,
   glyph,
   extendedGlyph,
-  extendedGlyphForCountry,
 };

support-frontend/assets/helpers/productPrice/__tests__/priceDescriptionsTests.js

@@ -13,6 +13,7 @@ describe('getPriceDescription', () => {
   it('should return a price based on inputs', () => {
     const gwAnnual = {
       price: 150,
+      currency: 'GBP',
       promotions: [
         {
           name: '10% Off Annual Guardian Weekly Subs',
@@ -23,15 +24,16 @@ describe('getPriceDescription', () => {
           discount: { amount: 10, durationMonths: 12 },
         }],
     };
-    expect(getPriceDescription('£', gwAnnual, Annual))
+    expect(getPriceDescription(gwAnnual, Annual))
       .toEqual('£135 for 1 year, then standard rate (£150 every year)');
 
-    const gwQuarterly = { price: 37.5, promotions: [] };
-    expect(getPriceDescription('£', gwQuarterly, Quarterly))
+    const gwQuarterly = { price: 37.5, currency: 'GBP', promotions: [] };
+    expect(getPriceDescription(gwQuarterly, Quarterly))
       .toEqual('£37.50 every quarter');
 
     const gwQuarterlyWithPromo = {
       price: 37.5,
+      currency: 'GBP',
       promotions: [
         {
           name: '15% discount - WJWGEX9A8',
@@ -40,19 +42,23 @@ describe('getPriceDescription', () => {
           discountedPrice: 31.87,
           numberOfDiscountedPeriods: 1,
           discount: { amount: 15, durationMonths: 3 },
-        },
+        }],
+    };
+    expect(getPriceDescription(gwQuarterlyWithPromo, Quarterly))
+      .toEqual('£31.87 for 1 quarter, then standard rate (£37.50 every quarter)');
+
+    const gwSixWeekly = {
+      price: 81.30,
+      currency: 'USD',
+      promotions: [
         {
           name: 'Six For Six',
           description: 'Introductory offer',
           promoCode: '6FOR6',
           introductoryPrice: { price: 6, periodLength: 6, periodType: 'issue' },
         }],
     };
-    expect(getPriceDescription('£', gwQuarterlyWithPromo, Quarterly))
-      .toEqual('£31.87 for 1 quarter, then standard rate (£37.50 every quarter)');
-
-    const gwSixWeekly = { price: 81.30, promotions: [] };
-    expect(getPriceDescription('US$', gwSixWeekly, SixWeekly))
+    expect(getPriceDescription(gwSixWeekly, SixWeekly))
       .toEqual('US$6 for the first 6 issues (then US$81.30 every quarter)');
   });
 });