Skip to content

Commit b6fdb4b

Browse files
dlind1dlind1
committed
Move the hook to a separate file
1 parent 1fbfcce commit b6fdb4b

File tree

7 files changed

+70
-68
lines changed

7 files changed

+70
-68
lines changed

‎client/my-sites/checkout/src/components/cost-overrides-list.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,15 @@ import {
2626
import { css } from '@emotion/react';
2727
import styled from '@emotion/styled';
2828
import { useTranslate } from 'i18n-calypso';
29+
import useEquivalentMonthlyTotals from 'calypso/my-sites/checkout/utils/use-equivalent-monthly-totals';
2930
import {
3031
useStreamlinedPriceExperiment,
3132
isStreamlinedPriceCheckoutTreatment,
3233
} from 'calypso/my-sites/plans-features-main/hooks/use-streamlined-price-experiment';
3334
import { useSelector } from 'calypso/state';
3435
import { getIsOnboardingAffiliateFlow } from 'calypso/state/signup/flow/selectors';
3536
import useCartKey from '../../use-cart-key';
36-
import { getAffiliateCouponLabel, useEquivalentMonthlyTotals } from '../../utils';
37+
import { getAffiliateCouponLabel } from '../../utils';
3738
import { CheckIcon } from './check-icon';
3839
import type { Theme } from '@automattic/composite-checkout';
3940
import type { LineItemCostOverrideForDisplay } from '@automattic/wpcom-checkout';

‎client/my-sites/checkout/src/components/wp-checkout-order-summary.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ import * as React from 'react';
4646
import { hasFreeCouponTransfersOnly } from 'calypso/lib/cart-values/cart-items';
4747
import { isWcMobileApp } from 'calypso/lib/mobile-app';
4848
import useCartKey from 'calypso/my-sites/checkout/use-cart-key';
49+
import useEquivalentMonthlyTotals from 'calypso/my-sites/checkout/utils/use-equivalent-monthly-totals';
4950
import {
5051
useStreamlinedPriceExperiment,
5152
isStreamlinedPriceCheckoutTreatment,
5253
} from 'calypso/my-sites/plans-features-main/hooks/use-streamlined-price-experiment';
5354
import { getSignupCompleteFlowName } from 'calypso/signup/storageUtils';
5455
import { useSelector } from 'calypso/state';
5556
import { getCurrentPlan } from 'calypso/state/sites/plans/selectors';
56-
import { useEquivalentMonthlyTotals } from '../../utils';
5757
import getAkismetProductFeatures from '../lib/get-akismet-product-features';
5858
import getFlowPlanFeatures from '../lib/get-flow-plan-features';
5959
import getJetpackProductFeatures from '../lib/get-jetpack-product-features';

‎client/my-sites/checkout/src/test/checkout-contact-autocomplete.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
77
import { dispatch } from '@wordpress/data';
88
import nock from 'nock';
99
import useCartKey from 'calypso/my-sites/checkout/use-cart-key';
10-
import * as Utils from 'calypso/my-sites/checkout/utils';
10+
import * as UtilsTotals from 'calypso/my-sites/checkout/utils/use-equivalent-monthly-totals';
1111
import { isMarketplaceProduct } from 'calypso/state/products-list/selectors';
1212
import { getDomainsBySiteId, hasLoadedSiteDomains } from 'calypso/state/sites/domains/selectors';
1313
import { getPlansBySiteId } from 'calypso/state/sites/plans/selectors/get-plans-by-site';
@@ -71,8 +71,8 @@ describe( 'Checkout contact step', () => {
7171
nock.cleanAll();
7272

7373
// part of features related to useStreamlinedPriceExperiment
74-
Utils.useEquivalentMonthlyTotals = jest.fn();
75-
Utils.useEquivalentMonthlyTotals.mockImplementation( () => {
74+
UtilsTotals.useEquivalentMonthlyTotals = jest.fn();
75+
UtilsTotals.useEquivalentMonthlyTotals.mockImplementation( () => {
7676
return {};
7777
} );
7878

‎client/my-sites/checkout/src/test/checkout-vat-form.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
88
import { dispatch } from '@wordpress/data';
99
import nock from 'nock';
1010
import useCartKey from 'calypso/my-sites/checkout/use-cart-key';
11-
import * as Utils from 'calypso/my-sites/checkout/utils';
11+
import * as UtilsTotals from 'calypso/my-sites/checkout/utils/use-equivalent-monthly-totals';
1212
import { isMarketplaceProduct } from 'calypso/state/products-list/selectors';
1313
import { getDomainsBySiteId, hasLoadedSiteDomains } from 'calypso/state/sites/domains/selectors';
1414
import { getPlansBySiteId } from 'calypso/state/sites/plans/selectors/get-plans-by-site';
@@ -77,8 +77,8 @@ describe( 'Checkout contact step VAT form', () => {
7777
nock.cleanAll();
7878

7979
// part of features related to useStreamlinedPriceExperiment
80-
Utils.useGetWpcomPlanTotalIfPaidMonthly = jest.fn();
81-
Utils.useGetWpcomPlanTotalIfPaidMonthly.mockImplementation( () => {
80+
UtilsTotals.useGetWpcomPlanTotalIfPaidMonthly = jest.fn();
81+
UtilsTotals.useGetWpcomPlanTotalIfPaidMonthly.mockImplementation( () => {
8282
return {};
8383
} );
8484

‎client/my-sites/checkout/test/utils.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import {
1010
import { Plans } from '@automattic/data-stores';
1111
import { getEmptyResponseCartProduct } from '@automattic/shopping-cart';
1212
import configureStore from 'redux-mock-store';
13+
import useEquivalentMonthlyTotals from 'calypso/my-sites/checkout/utils/use-equivalent-monthly-totals';
1314
import useCheckPlanAvailabilityForPurchase from 'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase';
1415
import { renderHookWithProvider } from 'calypso/test-helpers/testing-library';
15-
import { getProductSlugFromContext, useEquivalentMonthlyTotals } from '../utils';
16+
import { getProductSlugFromContext } from '../utils';
1617

1718
jest.mock(
1819
'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase',

‎client/my-sites/checkout/utils.ts

-59
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
1-
import {
2-
isMonthly,
3-
isWpComPlan,
4-
getMonthlyPlanByYearly,
5-
type PlanSlug,
6-
} from '@automattic/calypso-products';
7-
import { Plans } from '@automattic/data-stores';
81
import { doesStringResembleDomain } from '@automattic/onboarding';
9-
import { ResponseCartProduct } from '@automattic/shopping-cart';
102
import { translate } from 'i18n-calypso';
11-
import { useMemo } from 'react';
123
import { untrailingslashit } from 'calypso/lib/route';
13-
import useCheckPlanAvailabilityForPurchase from 'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase';
144
import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
155
import { getSelectedSite } from 'calypso/state/ui/selectors';
166
import type { Context } from '@automattic/calypso-router';
@@ -145,52 +135,3 @@ export function getAffiliateCouponLabel(): string {
145135
// translators: The label of the coupon line item in checkout
146136
return translate( 'Exclusive Offer Applied' );
147137
}
148-
149-
/**
150-
* Calculate the equivalent monthly total prices for non-monthly WordPress.com plans from the passed
151-
* cart. For each eligible product it'd determine the equivalent monthly plan and return the monthly
152-
* plan price multiplied by the number of months in the yearly (or longer) plan.
153-
* Used for demonstrating the benefits of purchasing longer-term plans.
154-
*
155-
* @param products - Array of `ResponseCartProduct` items.
156-
*
157-
* @returns An object where each key is an eligible plan slug from the cart and the value is the
158-
* calculated total cost as if it was billed monthly.
159-
*/
160-
export function useEquivalentMonthlyTotals(
161-
products: Array< ResponseCartProduct >
162-
): Record< PlanSlug, number > {
163-
const isEligibleProduct = ( product: ResponseCartProduct ) =>
164-
isWpComPlan( product?.product_slug ) && ! isMonthly( product?.product_slug );
165-
166-
const monthlyProductSlugs = useMemo( () => {
167-
return products
168-
.filter( isEligibleProduct )
169-
.reduce( ( slugs: PlanSlug[], product: ResponseCartProduct ) => {
170-
if ( ! slugs.includes( product.product_slug as PlanSlug ) ) {
171-
slugs.push( getMonthlyPlanByYearly( product.product_slug ) as PlanSlug );
172-
}
173-
return slugs;
174-
}, [] );
175-
}, [ products ] );
176-
const pricing =
177-
Plans.usePricingMetaForGridPlans( {
178-
planSlugs: monthlyProductSlugs,
179-
siteId: undefined,
180-
coupon: undefined,
181-
useCheckPlanAvailabilityForPurchase,
182-
} ) || {};
183-
const monthlyEquivalentTotals = useMemo( () => {
184-
return products.filter( isEligibleProduct ).reduce(
185-
( prices, product ) => {
186-
const monthlyPlan = getMonthlyPlanByYearly( product.product_slug );
187-
prices[ product.product_slug as PlanSlug ] =
188-
( product.months_per_bill_period ?? 0 ) *
189-
( pricing[ monthlyPlan ]?.originalPrice?.monthly ?? 0 );
190-
return prices;
191-
},
192-
{} as Record< PlanSlug, number >
193-
);
194-
}, [ products, pricing ] );
195-
return monthlyEquivalentTotals;
196-
}

‎client/my-sites/checkout/utils/use-equivalent-monthly-totals.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import {
2+
isMonthly,
3+
isWpComPlan,
4+
getMonthlyPlanByYearly,
5+
type PlanSlug,
6+
} from '@automattic/calypso-products';
7+
import { Plans } from '@automattic/data-stores';
8+
import { ResponseCartProduct } from '@automattic/shopping-cart';
9+
import { useMemo } from 'react';
10+
import useCheckPlanAvailabilityForPurchase from 'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase';
11+
12+
/**
13+
* Calculate the equivalent monthly total prices for non-monthly WordPress.com plans from the passed
14+
* cart. For each eligible product it'd determine the equivalent monthly plan and return the monthly
15+
* plan price multiplied by the number of months in the yearly (or longer) plan.
16+
* Used for demonstrating the benefits of purchasing longer-term plans.
17+
*
18+
* @param products - Array of `ResponseCartProduct` items.
19+
*
20+
* @returns An object where each key is an eligible plan slug from the cart and the value is the
21+
* calculated total cost as if it was billed monthly.
22+
*/
23+
export default function useEquivalentMonthlyTotals(
24+
products: Array< ResponseCartProduct >
25+
): Record< PlanSlug, number > {
26+
const isEligibleProduct = ( product: ResponseCartProduct ) =>
27+
isWpComPlan( product?.product_slug ) && ! isMonthly( product?.product_slug );
28+
29+
const monthlyProductSlugs = useMemo( () => {
30+
return products
31+
.filter( isEligibleProduct )
32+
.reduce( ( slugs: PlanSlug[], product: ResponseCartProduct ) => {
33+
if ( ! slugs.includes( product.product_slug as PlanSlug ) ) {
34+
slugs.push( getMonthlyPlanByYearly( product.product_slug ) as PlanSlug );
35+
}
36+
return slugs;
37+
}, [] );
38+
}, [ products ] );
39+
const pricing =
40+
Plans.usePricingMetaForGridPlans( {
41+
planSlugs: monthlyProductSlugs,
42+
siteId: undefined,
43+
coupon: undefined,
44+
useCheckPlanAvailabilityForPurchase,
45+
} ) || {};
46+
const monthlyEquivalentTotals = useMemo( () => {
47+
return products.filter( isEligibleProduct ).reduce(
48+
( prices, product ) => {
49+
const monthlyPlan = getMonthlyPlanByYearly( product.product_slug );
50+
prices[ product.product_slug as PlanSlug ] =
51+
( product.months_per_bill_period ?? 0 ) *
52+
( pricing[ monthlyPlan ]?.originalPrice?.monthly ?? 0 );
53+
return prices;
54+
},
55+
{} as Record< PlanSlug, number >
56+
);
57+
}, [ products, pricing ] );
58+
return monthlyEquivalentTotals;
59+
}

0 commit comments

Comments
 (0)