Update interpolate-components to @automattic/interpolate-components

client/components/payment-method-capability-status-pill/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useGetCapabilities } from 'wcstripe/data/account';
 import PaymentMethodUnavailablePill, {

client/components/payment-method-deprecation-pill/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __ } from '@wordpress/i18n';
 import PaymentMethodUnavailablePill, {
 	PaymentMethodPopoverLink,

client/components/payment-method-missing-currency-pill/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies';
 import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';

client/components/webhook-information/index.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __ } from '@wordpress/i18n';
 import { ExternalLink } from '@wordpress/components';
 

client/entrypoints/amazon-pay-settings/amazon-pay-settings-section.js

@@ -1,6 +1,6 @@
 import { ADMIN_URL, getSetting } from '@woocommerce/settings';
 import React, { useMemo } from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { loadStripe } from '@stripe/stripe-js';
 import styled from '@emotion/styled';
 import ExpressCheckoutPreviewComponent from './express-checkout-preview-component';

client/entrypoints/express-checkout-settings/express-checkout-settings-section.js

@@ -2,7 +2,7 @@
 
 import { ADMIN_URL, getSetting } from '@woocommerce/settings';
 import React, { useMemo } from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import styled from '@emotion/styled';

client/settings/connect-stripe-account/index.js

@@ -1,6 +1,6 @@
 import { React } from 'react';
 import styled from '@emotion/styled';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import CardBody from '../card-body';
 import { Button, Card, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';

client/settings/general-settings-section/__tests__/get-formatted-payment-method-description.test.js

@@ -1,3 +1,4 @@
+import { render, screen } from '@testing-library/react';
 import { getFormattedPaymentMethodDescription } from '../get-formatted-payment-method-description';
 import {
 	PAYMENT_METHOD_AFFIRM,
@@ -30,11 +31,13 @@ describe( 'getFormattedPaymentMethodDescription', () => {
 		const result = getFormattedPaymentMethodDescription(
 			PAYMENT_METHOD_AFTERPAY_CLEARPAY
 		);
-		expect( result ).toEqual(
-			expect.arrayContaining( [
-				'Allow customers to pay over time with Afterpay. ',
-			] )
-		);
+		render( result );
+
+		expect(
+			screen.getByText(
+				/^Allow customers to pay over time with Afterpay\..*/
+			)
+		).toBeInTheDocument();
 	} );
 
 	it( 'should return default description for other payment methods', () => {

client/settings/general-settings-section/get-formatted-payment-method-description.js

@@ -1,4 +1,4 @@
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import PaymentMethodsMap from '../../payment-methods-map';
 import {
 	PAYMENT_METHOD_AFFIRM,

client/settings/optimized-checkout-notice/index.js

@@ -2,7 +2,7 @@
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 import { info } from '@wordpress/icons';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __ } from '@wordpress/i18n';
 import { Icon, Notice } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';

client/settings/payment-request-section/index.js

@@ -1,7 +1,7 @@
 /* global wc_stripe_settings_params */
 
 import React from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import PaymentRequestIcon from '../../payment-method-icons/payment-request';
 import LinkIcon from '../../payment-method-icons/link';
 import CardBody from '../card-body';

client/settings/payment-settings/promotional-banner/new-checkout-experience-apms-banner.js

@@ -1,6 +1,6 @@
 /* global wc_stripe_settings_params */
 import { React } from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { ExternalLink } from '@wordpress/components';

client/settings/payment-settings/promotional-banner/oc-promotion-banner.js

@@ -1,6 +1,6 @@
 import { React } from 'react';
 import styled from '@emotion/styled';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';

client/settings/payment-settings/test-mode-checkbox.js

@@ -1,5 +1,5 @@
 import { React } from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
 import { useTestMode } from 'wcstripe/data';

client/settings/payments-and-transactions-section/index.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import CardBody from '../card-body';
 import StatementPreviewsWrapper from './statement-previews-wrapper';
 import StatementPreview from './statement-preview';

client/settings/payments-and-transactions-section/manual-capture-control.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import React, { useContext, useState } from 'react';
 import { Icon, info } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';

client/settings/stripe-auth-account/index.js

@@ -1,4 +1,4 @@
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import StripeAuthDiagram from './stripe-auth-diagram';
 import StripeAuthActions from './stripe-auth-actions';
 import AccountStatusPanel from './account-status-panel';

client/settings/stripe-auth-account/stripe-auth-actions.js

@@ -1,6 +1,6 @@
 /* global wc_stripe_settings_params, ajaxurl */
 import { React, useState, useEffect } from 'react';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import ConfigureWebhookButton from './configure-webhook-button';
 import { Button, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';

client/settings/stripe-auth-account/webhook-help-text.js

@@ -1,4 +1,4 @@
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
 import {