@automattic/jetpack-components 0.39.0

package/components/zendesk-chat/test/component.tsx

@@ -0,0 +1,16 @@
+import { jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import ZendeskChat from '../index';
+
+describe( 'ZendeskChat', () => {
+	afterEach( () => {
+		// restore the spy created with spyOn
+		jest.restoreAllMocks();
+	} );
+
+	it( 'renders the zendesk chat widget', () => {
+		render( <ZendeskChat /> );
+
+		expect( screen.getByTestId( 'zendesk-chat-container' ) ).toBeInTheDocument();
+	} );
+} );

package/components/zendesk-chat/types.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+
+export type ZendeskChatType = FC;

package/index.ts

@@ -0,0 +1,69 @@
+/*
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+export { default as JetpackLogo } from './components/jetpack-logo';
+export { default as JetpackSearchLogo } from './components/jetpack-search-logo';
+export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo';
+export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo';
+export { default as getRedirectUrl } from './tools/jp-redirect';
+export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url';
+export { isFirstMonthTrial } from './tools/pricing-utils';
+export { default as AutomatticBylineLogo } from './components/automattic-byline-logo';
+export { default as JetpackFooter } from './components/jetpack-footer';
+export { default as Spinner } from './components/spinner';
+export { default as Gridicon } from './components/gridicon';
+export { default as IconTooltip } from './components/icon-tooltip';
+export { default as ActionButton } from './components/action-button';
+export { default as PricingCard } from './components/pricing-card';
+export { default as PricingSlider } from './components/pricing-slider';
+export { default as AdminSection } from './components/admin-section/basic';
+export { default as AdminSectionHero } from './components/admin-section/hero';
+export { default as AdminPage } from './components/admin-page';
+export { default as DecorativeCard } from './components/decorative-card';
+export { default as Col } from './components/layout/col';
+export { default as Testimonials } from './components/testimonials';
+export { default as Container } from './components/layout/container';
+export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match';
+export * from './components/icons';
+export { default as SplitButton } from './components/split-button';
+export { default as ThemeProvider } from './components/theme-provider';
+export { default as Text, H2, H3, Title } from './components/text';
+export { default as ToggleControl } from './components/toggle-control';
+export { default as numberFormat } from './components/number-format';
+export { default as QRCode } from './components/qr-code';
+export { default as Button } from './components/button';
+export { default as LoadingPlaceholder } from './components/loading-placeholder';
+export { default as TermsOfService } from './components/terms-of-service';
+export {
+	default as PricingTable,
+	PricingTableColumn,
+	PricingTableHeader,
+	PricingTableItem,
+} from './components/pricing-table';
+export { default as BoostScoreBar } from './components/boost-score-bar';
+export { default as ProductPrice } from './components/product-price';
+export { default as ProductOffer, IconsCard } from './components/product-offer';
+export { default as Dialog } from './components/dialog';
+export { default as DonutMeter } from './components/donut-meter';
+export { default as RecordMeterBar } from './components/record-meter-bar';
+export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger';
+export { default as Alert } from './components/alert';
+export { default as Notice } from './components/notice';
+export { default as Status } from './components/status';
+export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar';
+export { default as ActionPopover } from './components/action-popover';
+export { default as ZendeskChat } from './components/zendesk-chat';
+export { getUserLocale, cleanLocale } from './lib/locale';

package/lib/locale/index.ts

@@ -0,0 +1,48 @@
+import { getSettings } from '@wordpress/date';
+
+/**
+ * Clean up WP locale so it matches the format expected by browsers.
+ *
+ * @param {string} locale - Locale given by WordPress.
+ * @returns {string} Browser-formatted locale.
+ */
+export const cleanLocale = ( locale: string ) => {
+	const regex = /^([a-z]{2,3})(_[a-z]{2}|_[a-z][a-z0-9]{4,7})?(?:_.*)?$/i;
+
+	// Search for the correct locale format:
+	// e.g. af, arq, fr_FR, pap_CW, de_DE_formal, art_xpirate
+	const localeRegex = locale.match( regex );
+
+	// Locale was set to something that seems invalid, fallback to en-US.
+	if ( ! localeRegex ) {
+		return 'en-US';
+	}
+
+	return (
+		// Keep only the language and the region, and replace the underscore used in WP locale by an hyphen.
+		`${ localeRegex[ 1 ] }${ localeRegex[ 2 ] ? localeRegex[ 2 ] : '' }`.replace( '_', '-' )
+	);
+};
+
+// Since global is used inside getUserLocale, we need to declare it for TS
+declare const global: typeof globalThis;
+
+/**
+ * Current user locale, or browser locale as fallback.
+ *
+ * @returns {string} Formatted user locale (e.g. `en-US` or `fr-FR`).
+ */
+export const getUserLocale = () => {
+	const {
+		l10n: { locale },
+	} = getSettings();
+
+	if ( locale ) {
+		return cleanLocale( locale );
+	}
+
+	// Fallback to the browser locale if necessary.
+	const language = global?.window?.navigator?.language ?? 'en-US';
+
+	return language;
+};

package/lib/locale/test/index.ts

@@ -0,0 +1,21 @@
+import { cleanLocale } from '../';
+
+describe( 'cleanLocale', () => {
+	const testLocales = [
+		[ 'af', 'af' ],
+		[ 'arq', 'arq' ],
+		[ 'fr_FR', 'fr-FR' ],
+		[ 'pap_CW', 'pap-CW' ],
+		[ 'de_DE_formal', 'de-DE' ],
+		[ 'art_xpirate', 'art-xpirate' ],
+		[ 'art_xemoji', 'art-xemoji' ],
+		[ 'pt_PT_ao90', 'pt-PT' ],
+		[ 'deDE', 'en-US' ],
+		[ 'foobarde_DE', 'en-US' ], // Language should never be more than 3 chars long.
+		[ 'en_alotofchars', 'en' ], // region or variant tags should not be more than 8 chars.
+	];
+
+	it.each( testLocales )( '%s is cleaned into %s', ( input, expected ) => {
+		expect( cleanLocale( input ) ).toBe( expected );
+	} );
+} );

package/package.json

@@ -0,0 +1,80 @@
+{
+	"name": "@automattic/jetpack-components",
+	"version": "0.39.0",
+	"description": "Jetpack Components Package",
+	"author": "Automattic",
+	"license": "GPL-2.0-or-later",
+	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/jetpack.git",
+		"directory": "projects/js-packages/components"
+	},
+	"bugs": {
+		"url": "https://github.com/Automattic/jetpack/labels/[JS Package] Components"
+	},
+	"dependencies": {
+		"@automattic/format-currency": "1.0.1",
+		"@babel/runtime": "^7",
+		"@wordpress/browserslist-config": "5.18.0",
+		"@wordpress/components": "25.1.0",
+		"@wordpress/compose": "6.12.0",
+		"@wordpress/date": "4.35.0",
+		"@wordpress/element": "5.12.0",
+		"@wordpress/i18n": "4.35.0",
+		"@wordpress/icons": "9.26.0",
+		"classnames": "2.3.2",
+		"prop-types": "^15.7.2",
+		"qrcode.react": "3.1.0",
+		"react-slider": "2.0.5"
+	},
+	"devDependencies": {
+		"@automattic/jetpack-base-styles": "^0.6.1",
+		"@babel/core": "7.21.5",
+		"@babel/preset-react": "7.18.6",
+		"@jest/globals": "29.4.3",
+		"@storybook/addon-actions": "7.0.5",
+		"@storybook/blocks": "7.0.5",
+		"@storybook/react": "7.0.5",
+		"@testing-library/dom": "8.19.1",
+		"@testing-library/react": "13.4.0",
+		"@testing-library/user-event": "14.4.3",
+		"@types/jest": "29.2.5",
+		"@types/qrcode.react": "1.0.2",
+		"@types/react": "18.0.27",
+		"@types/react-dom": "18.0.10",
+		"@types/react-slider": "1.3.1",
+		"@types/react-test-renderer": "18.0.0",
+		"@types/testing-library__jest-dom": "5.14.1",
+		"jest": "29.4.3",
+		"jest-environment-jsdom": "29.4.3",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-test-renderer": "18.2.0",
+		"require-from-string": "2.0.2",
+		"resize-observer-polyfill": "1.5.1",
+		"typescript": "5.0.4",
+		"webpack": "5.76.0",
+		"webpack-cli": "4.9.1"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"type": "module",
+	"browserslist": [
+		"extends @wordpress/browserslist-config"
+	],
+	"exports": {
+		".": "./index.ts"
+	},
+	"sideEffects": [
+		"*.css",
+		"*.scss"
+	],
+	"scripts": {
+		"build": "pnpm run compile-ts",
+		"compile-ts": "tsc --pretty",
+		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
+	}
+}

package/tools/get-product-checkout-url/Readme.md

@@ -0,0 +1,32 @@
+# getProductCheckoutUrl
+
+Helper function useful to build the product checkout URL.
+
+## API
+
+The function expects the following params:
+
+### productSlug
+This is the WordPress.com product slug.
+For instance, for security bundle it's usually defined with `jetpack_security_t1_yearly`.
+
+### siteSuffix
+Site slug suffix to be used as part of Calypso URLs. Take adventage of [get_site_suffix](../../../../packages/status/src/class-status.php#L327) backend helper
+
+### redirectUrl
+The URL to redirect to after checkout.
+
+### isUserConnected
+Boolean value that defined whether the user is connected, or not.
+It will affect the built URL by adding the unlinked param to the query string.
+
+```jsx
+import { getProductCheckoutUrl } from '@automattic/jetpack-components';
+
+const checkoutUrl = useProductCheckoutWorkflow(
+	'jetpack_security_t1_yearly',
+	'poweredsite.wordpress.com',
+	'https://poweredsite.wordpress.com/wp-admin/admin.php?page=jetpack-protect',
+	true
+);
+```

package/tools/get-product-checkout-url/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Return the checkout URL for the given product.
+ *
+ * @param {string} productSlug      - wpcom product slug.
+ * @param {string} siteSuffix	    - Site suffix
+ * @param {string} redirectUrl	    - Redirect URL used to define redirect_to
+ * @param {boolean} isUserConnected - True when the user is connected Jetpack
+ * @returns {string}                  The Calypso checkout URL
+ */
+export default function getProductCheckoutUrl(
+	productSlug: string,
+	siteSuffix: string,
+	redirectUrl: string,
+	isUserConnected: boolean
+) {
+	const checkoutUrl = new URL( 'https://wordpress.com/checkout/' );
+	const checkoutProductUrl = new URL( `${ checkoutUrl }${ siteSuffix }/${ productSlug }` );
+
+	// Add redirect_to parameter
+	checkoutProductUrl.searchParams.set( 'redirect_to', redirectUrl );
+
+	// Add unlimited when user is not connected to Jetpack.
+	if ( ! isUserConnected ) {
+		checkoutProductUrl.searchParams.set( 'unlinked', '1' );
+	}
+
+	// Add site to query string.
+	checkoutProductUrl.searchParams.set( 'site', siteSuffix );
+
+	return checkoutProductUrl.toString();
+}

package/tools/jp-redirect/README.md

@@ -0,0 +1,61 @@
+# Jetpack Redirects
+
+A helper function to build URLs using the `jetpack.com/redirect` service.
+
+If you are an automattician, refer to PCYsg-pY7-p2 for all related information and links to our internal tools.
+
+## Usage
+
+```jsx
+import { getRedirectUrl } from '@automattic/jetpack-components';
+getRedirectUrl( source, args );
+```
+
+### source (required)
+
+Source can be either a “source handler” or an URL.
+
+A “source handler” must be registered in the Jetpack Redirects service, on the server side. It’s a slug that points to an URL that may or may not have dynamic parts in it.
+
+An “URL” is a string that must start with “https://" and doesn’t need to be registered on the server. However, if it is registered, it will point to the URL set as target there rather than to the source. (Note: It will only work for whitelisted domains, unless the URL is explicitly registered on the server)
+
+### args (optional)
+
+This is optional and allows you to pass an object with more parameters to build the URL.
+
+This is not a complete list as any argument passed here will be sent to as a query parameter to the Redirect server. These parameters will not necessarily be passed over to the final destination URL. If you want to add a parameter to the final destination URL, use the `query` argument.
+
+* **site**: Optional (but recommended). This is used to identify the site and also to fill in the `[site]` placeholder in the target. Will default to the value of `jetpack_redirects.currentSiteRawUrl`, if available.
+
+* **path**: Optional. Used to fill in the `[path]` placeholder in the target.
+
+* **query**: Optional. A string with additional variables to be added in the query string. Must be passed as a string in `key=value&foo=bar` format.
+
+* **anchor**: Optional. An anchor to be added to the final URL. Must be a single string. Example: `section1`
+
+## Examples
+
+### Example 1
+
+`getRedirectUrl( 'jetpack', { query: 'foo=bar', anchor: 'section' } );`
+
+This will return the following URL: `https://jetpack.com/redirect?source=jetpack&anchor=section&query=foo%3Dbar`
+
+When accessing this URL, the user will be redirected to: `https://jetpack.com/?foo=bar#section`
+
+### Example 2 (placeholders):
+
+```	
+getRedirectUrl( 
+	'calypso-edit-post',
+	{
+		path: '1234',
+		site: 'example.org'
+	}
+)
+```
+This will return the following URL: `https://jetpack.com/redirect?site=example.org&source=calypso-edit-post&path=1234`
+
+The `calypso-edit-post` source is registered on the server and points to `https://wordpress.com/post/[site]/[path]`, so the final URL that the user will be redirected to is:
+
+`https://wordpress.com/post/example.org/1234`

package/tools/jp-redirect/index.ts

@@ -0,0 +1,62 @@
+/* global jetpack_redirects */
+
+import { GetRedirectUrlArgs, QueryVars } from './types';
+
+/**
+ * Builds an URL using the jetpack.com/redirect/ service
+ *
+ * If source is a simple slug, it will be sent using the source query parameter. e.g. jetpack.com/redirect/?source=slug
+ *
+ * If source is a full URL, starting with https://, it will be sent using the url query parameter. e.g. jetpack.com/redirect/?url=https://wordpress.com
+ *
+ * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
+ *
+ * @since 0.2.0
+ * @param {string} source - The URL handler registered in the server or the full destination URL (starting with https://).
+ * @param {GetRedirectUrlArgs} args - Additional arguments to build the url.
+ * This is not a complete list as any argument passed here
+ * will be sent to as a query parameter to the Redirect server.
+ * These parameters will not necessarily be passed over to the final destination URL.
+ * If you want to add a parameter to the final destination URL, use the `query` argument.
+ * @returns {string} The redirect URL
+ */
+export default function getRedirectUrl( source: string, args: GetRedirectUrlArgs = {} ) {
+	const queryVars: QueryVars = {};
+
+	let calypsoEnv;
+	if ( typeof window !== 'undefined' ) {
+		calypsoEnv = window.Initial_State?.calypsoEnv;
+	}
+
+	if ( source.search( 'https://' ) === 0 ) {
+		const parsedUrl = new URL( source );
+
+		// discard any query and fragments.
+		source = `https://${ parsedUrl.host }${ parsedUrl.pathname }`;
+		queryVars.url = encodeURIComponent( source );
+	} else {
+		queryVars.source = encodeURIComponent( source );
+	}
+
+	Object.keys( args ).map( argName => {
+		queryVars[ argName ] = encodeURIComponent( args[ argName ] );
+	} );
+
+	if (
+		! Object.keys( queryVars ).includes( 'site' ) &&
+		typeof jetpack_redirects !== 'undefined' &&
+		jetpack_redirects.hasOwnProperty( 'currentSiteRawUrl' )
+	) {
+		queryVars.site = jetpack_redirects.currentSiteRawUrl;
+	}
+
+	if ( calypsoEnv ) {
+		queryVars.calypso_env = calypsoEnv;
+	}
+
+	const queryString = Object.keys( queryVars )
+		.map( key => key + '=' + queryVars[ key ] )
+		.join( '&' );
+
+	return `https://jetpack.com/redirect/?` + queryString;
+}

package/tools/jp-redirect/test/index.tsx

@@ -0,0 +1,89 @@
+import getRedirectUrl from '../';
+
+describe( 'getRedirectUrl', () => {
+	it( 'simple url', () => {
+		const url = getRedirectUrl( 'simple' );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'source' ) ).toBe( 'simple' );
+	} );
+
+	it( 'Random param', () => {
+		const url = getRedirectUrl( 'simple', { random: 'asd' } );
+		expect( url ).toBe( 'https://jetpack.com/redirect/?source=simple&random=asd' );
+	} );
+
+	it( 'Test path', () => {
+		const url = getRedirectUrl( 'simple', { path: '1234' } );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'source' ) ).toBe( 'simple' );
+		expect( parsedUrl.searchParams.get( 'path' ) ).toBe( '1234' );
+	} );
+
+	it( 'Test path with special chars', () => {
+		const url = getRedirectUrl( 'simple', { path: 'weird value!' } );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'source' ) ).toBe( 'simple' );
+		expect( parsedUrl.searchParams.get( 'path' ) ).toBe( 'weird value!' );
+	} );
+
+	it( 'Test query', () => {
+		const url = getRedirectUrl( 'simple', { query: 'key=1234&other=super' } );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'source' ) ).toBe( 'simple' );
+		expect( parsedUrl.searchParams.get( 'query' ) ).toBe( 'key=1234&other=super' );
+	} );
+
+	it( 'Test anchor', () => {
+		const url = getRedirectUrl( 'simple', { anchor: 'section' } );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'source' ) ).toBe( 'simple' );
+		expect( parsedUrl.searchParams.get( 'anchor' ) ).toBe( 'section' );
+	} );
+
+	it( 'Test all', () => {
+		const url = getRedirectUrl( 'simple', {
+			query: 'key=1234&other=super',
+			anchor: 'section',
+			site: 'example.org',
+			path: '123',
+		} );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'source' ) ).toBe( 'simple' );
+		expect( parsedUrl.searchParams.get( 'anchor' ) ).toBe( 'section' );
+		expect( parsedUrl.searchParams.get( 'query' ) ).toBe( 'key=1234&other=super' );
+		expect( parsedUrl.searchParams.get( 'site' ) ).toBe( 'example.org' );
+		expect( parsedUrl.searchParams.get( 'path' ) ).toBe( '123' );
+	} );
+
+	it( 'Test passing an URL as the first parameter', () => {
+		const url = getRedirectUrl( 'https://wordpress.com/support' );
+		const value = encodeURIComponent( 'https://wordpress.com/support' );
+		expect( url ).toBe( `https://jetpack.com/redirect/?url=${ value }` );
+	} );
+
+	it( 'Test passing an URL as the first parameter and query', () => {
+		const url = getRedirectUrl( 'https://wordpress.com/support', {
+			query: 'key=1234&other=super',
+		} );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'url' ) ).toBe( 'https://wordpress.com/support' );
+		expect( parsedUrl.searchParams.get( 'query' ) ).toBe( 'key=1234&other=super' );
+	} );
+
+	it( 'Test passing an URL as the first parameter and query discarding info from url', () => {
+		const url = getRedirectUrl( 'https://wordpress.com/support?super=mega&key=value#section1', {
+			query: 'key=1234&other=super',
+		} );
+		const parsedUrl = new URL( url );
+
+		expect( parsedUrl.searchParams.get( 'url' ) ).toBe( 'https://wordpress.com/support' );
+		expect( parsedUrl.searchParams.get( 'query' ) ).toBe( 'key=1234&other=super' );
+	} );
+} );

package/tools/jp-redirect/types.ts

@@ -0,0 +1,49 @@
+export type GetRedirectUrlArgs = {
+	/**
+	 * URL of the current site. Will default to the value of
+	 * jetpack_redirects.currentSiteRawUrl, if available.
+	 * Used to fill in the `[site]` placeholder in the target.
+	 */
+	site?: string;
+
+	/**
+	 * Additional path to be appended to the URL.
+	 * Used to fill in the `[path]` placeholder in the target.
+	 */
+	path?: string;
+
+	/**
+	 * Query parameters to be added to the final destination URL.
+	 * Should be in query string format (e.g. 'key=value&foo=bar').
+	 */
+	query?: string;
+
+	/**
+	 * Anchor to be added to the URL. Must be a single string.
+	 * Example: `section1`.
+	 */
+	anchor?: string;
+
+	/**
+	 * Any other custom arguments to be added to the final destination URL.
+	 */
+	[ key: string ]: string;
+};
+
+export type QueryVars = {
+	url?: string;
+	site?: string;
+	source?: string;
+	calypso_env?: string;
+};
+
+declare global {
+	interface Window {
+		Initial_State: {
+			calypsoEnv?: string;
+		};
+	}
+	const jetpack_redirects: {
+		currentSiteRawUrl?: string;
+	};
+}

package/tools/pricing-utils/README.md

@@ -0,0 +1,16 @@
+# Pricing Utils
+
+This is a helper folder that contains util functions related to pricing (e.g. Intro Offers) and can be extended to include other methods.
+
+## Usage
+
+### isFirstMonthTrial
+
+```jsx
+import { isFirstMonthTrial } from '@automattic/jetpack-components';
+isFirstMonthTrial( introOffer );
+```
+
+#### introOffer (required)
+
+An Intro Offer object returned by the API. It must contain an `interval_unit` and `interval_count` for the function to check if it's a first month trial or not. It returns `true` if `interval_unit` is `'month'` **and** `interval_count` is `1`, all other combinations return `false`.

package/tools/pricing-utils/index.ts

@@ -0,0 +1,11 @@
+import { IntroOffer } from './types';
+
+/**
+ * Returns whether an Introductory Offer is a first month trial
+ *
+ * @param {IntroOffer} introOffer - an intro offer object
+ * @returns {boolean}               Whether it's a first month trial or not
+ */
+export function isFirstMonthTrial( introOffer: IntroOffer ): boolean {
+	return introOffer?.interval_count === 1 && introOffer?.interval_unit === 'month';
+}

package/tools/pricing-utils/test/index.ts

@@ -0,0 +1,39 @@
+import { isFirstMonthTrial } from '..';
+import { IntroOffer } from './../types';
+
+const trialIntroOffer: IntroOffer = {
+	product_id: 0,
+	product_slug: 'test_product',
+	currency_code: 'USD',
+	formatted_price: '$10',
+	original_price: 10,
+	raw_price: 1,
+	discount_percentage: 90,
+	ineligible_reason: null,
+	interval_unit: 'month',
+	interval_count: 1,
+};
+
+describe( 'isFirstMonthTrial', () => {
+	it( 'returns true if interval_unit is "month" and interval_count is 1', () => {
+		expect( isFirstMonthTrial( trialIntroOffer ) ).toBe( true );
+	} );
+
+	it( 'returns false if interval_unit is not "month"', () => {
+		const introOffer: IntroOffer = {
+			...trialIntroOffer,
+			interval_unit: 'year',
+		};
+
+		expect( isFirstMonthTrial( introOffer ) ).toBe( false );
+	} );
+
+	it( "returns false if interval_unit not 'month' but interval_count isn't 1", () => {
+		const introOffer: IntroOffer = {
+			...trialIntroOffer,
+			interval_count: 3,
+		};
+
+		expect( isFirstMonthTrial( introOffer ) ).toBe( false );
+	} );
+} );

package/tools/pricing-utils/types.ts

@@ -0,0 +1,12 @@
+export interface IntroOffer {
+	product_id: number;
+	product_slug: string;
+	currency_code: string;
+	formatted_price: string;
+	original_price: number;
+	raw_price: number;
+	discount_percentage: number;
+	ineligible_reason: string[] | null;
+	interval_unit: string;
+	interval_count: number;
+}