Replace interpolateComponents within onboarding package (#38423)

* Replace use of interpolateComponents with createInterpolateElement

* Remove @automattic/interpolate-components package from onboarding package

* Add changelog

packages/js/onboarding/changelog/update-37312_replace_interpolate_components_from_onboarding

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Replace use of interpolateComponents with createInterpolateElement.

packages/js/onboarding/package.json

@@ -29,7 +29,6 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@automattic/interpolate-components": "^1.2.0",
 		"@woocommerce/components": "workspace:*",
 		"@woocommerce/experimental": "workspace:*",
 		"@woocommerce/explat": "workspace:*",
@@ -37,25 +36,25 @@
 		"@wordpress/components": "wp-6.0",
 		"@wordpress/element": "wp-6.0",
 		"@wordpress/i18n": "wp-6.0",
-		"string-similarity": "4.0.4",
-		"gridicons": "^3.4.0"
+		"gridicons": "^3.4.0",
+		"string-similarity": "4.0.4"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.17.5",
 		"@testing-library/react": "^12.1.3",
+		"@types/jest": "^27.4.1",
 		"@types/string-similarity": "4.0.0",
 		"@types/wordpress__components": "^19.10.3",
 		"@types/wordpress__data": "^6.0.0",
-		"@types/jest": "^27.4.1",
 		"@woocommerce/eslint-plugin": "workspace:*",
-		"@woocommerce/internal-style-build": "workspace:*",
 		"@woocommerce/internal-js-tests": "workspace:*",
+		"@woocommerce/internal-style-build": "workspace:*",
 		"@wordpress/browserslist-config": "wp-6.0",
+		"concurrently": "^7.0.0",
 		"css-loader": "^3.6.0",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
-		"concurrently": "^7.0.0",
 		"postcss": "^8.4.7",
 		"postcss-loader": "^4.3.0",
 		"rimraf": "^3.0.2",

packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx

@@ -1,11 +1,14 @@
 /**
  * External dependencies
  */
-import { createElement, Fragment } from '@wordpress/element';
+import {
+	createElement,
+	Fragment,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Card, CardFooter, CardBody } from '@wordpress/components';
 import { Text } from '@woocommerce/experimental';
-import interpolateComponents from '@automattic/interpolate-components';
 import { Link } from '@woocommerce/components';
 
 /**
@@ -50,12 +53,12 @@ export const WCPayBannerText: React.VFC< {
 				size="12"
 				lineHeight="16px"
 			>
-				{ interpolateComponents( {
-					mixedString: __(
-						'By using WooCommerce Payments you agree to be bound by our {{tosLink}}Terms of Service{{/tosLink}} and acknowledge that you have read our {{privacyLink}}Privacy Policy{{/privacyLink}} ',
+				{ createInterpolateElement(
+					__(
+						'By using WooCommerce Payments you agree to be bound by our <tosLink>Terms of Service</tosLink> and acknowledge that you have read our <privacyLink>Privacy Policy</privacyLink> ',
 						'woocommerce'
 					),
-					components: {
+					{
 						tosLink: (
 							<Link
 								href="https://wordpress.com/tos/"
@@ -74,8 +77,8 @@ export const WCPayBannerText: React.VFC< {
 								<></>
 							</Link>
 						),
-					},
-				} ) }
+					}
+				) }
 			</Text>
 			{ actionButton }
 		</div>

pnpm-lock.yaml

@@ -1927,9 +1927,6 @@ importers:
 
   packages/js/onboarding:
     dependencies:
-      '@automattic/interpolate-components':
-        specifier: ^1.2.0
-        version: 1.2.1(@types/react@17.0.50)(react@17.0.2)
       '@woocommerce/components':
         specifier: workspace:*
         version: link:../components
@@ -8004,7 +8001,7 @@ packages:
     dependencies:
       '@babel/core': 7.17.8
       '@babel/helper-module-transforms': 7.21.2
-      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-plugin-utils': 7.21.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8017,7 +8014,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.3
       '@babel/helper-module-transforms': 7.21.2
-      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-plugin-utils': 7.21.5
     transitivePeerDependencies:
       - supports-color