update: ensure prefix in Webpack include path

changelog/update-webpack-include-path-ensure-wcpay-prefix

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+update: ensure that the `wcpay` prefix is included in the Webpack include path

client/capital/index.tsx

@@ -10,17 +10,17 @@ import { TableCard } from '@woocommerce/components';
 /**
  * Internal dependencies.
  */
-import Page from 'components/page';
-import { TestModeNotice } from 'components/test-mode-notice';
-import ErrorBoundary from 'components/error-boundary';
-import ActiveLoanSummary from 'components/active-loan-summary';
+import Page from 'wcpay/components/page';
+import { TestModeNotice } from 'wcpay/components/test-mode-notice';
+import ErrorBoundary from 'wcpay/components/error-boundary';
+import ActiveLoanSummary from 'wcpay/components/active-loan-summary';
 import {
 	formatExplicitCurrency,
 	isZeroDecimalCurrency,
 } from 'multi-currency/interface/functions';
-import { CapitalLoan } from 'data/capital/types';
-import ClickableCell from 'components/clickable-cell';
-import Chip from 'components/chip';
+import { CapitalLoan } from 'wcpay/data/capital/types';
+import ClickableCell from 'wcpay/components/clickable-cell';
+import Chip from 'wcpay/components/chip';
 import { useLoans } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';
 import './style.scss';

client/capital/test/index.test.tsx

@@ -7,7 +7,7 @@ import { render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import { useActiveLoanSummary, useLoans } from 'wcpay/data';
-import CapitalPage from '../index';
+import CapitalPage from '..';
 
 // Mock the useLoans hook
 jest.mock( 'wcpay/data', () => ( {

client/card-readers/index.tsx

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies.
  */
-import Page from 'components/page';
+import Page from 'wcpay/components/page';
 import ReadersList from './list';
 import { TabPanel } from 'wcpay/components/wp-components-wrapped';
 

client/cart/blocks/product-details.js

@@ -12,7 +12,7 @@ import { select } from '@wordpress/data';
  */
 import { getAppearance, getFontRulesFromPage } from 'wcpay/checkout/upe-styles';
 import { useStripeAsync } from 'wcpay/hooks/use-stripe-async';
-import { getUPEConfig } from 'utils/checkout';
+import { getUPEConfig } from 'wcpay/utils/checkout';
 import WCPayAPI from '../../checkout/api';
 import request from '../../checkout/utils/request';
 import { useEffect, useState } from 'react';

client/checkout/blocks/index.js

@@ -11,7 +11,7 @@ import {
 /**
  * Internal dependencies
  */
-import { getUPEConfig, getConfig } from 'utils/checkout';
+import { getUPEConfig, getConfig } from 'wcpay/utils/checkout';
 import { isLinkEnabled } from '../utils/upe';
 import WCPayAPI from '../api';
 import { SavedTokenHandler } from './saved-token-handler';

client/checkout/preview.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 
-import { getConfig } from 'utils/checkout';
+import { getConfig } from 'wcpay/utils/checkout';
 
 /**
  * Checks whether we're in a preview context.

client/checkout/upe-styles/test/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import * as upeStyles from '../index';
+import * as upeStyles from '..';
 
 describe( 'Getting styles for automated theming', () => {
 	const mockElement = document.createElement( 'input' );

client/checkout/woopay/direct-checkout/test/index.test.js

@@ -46,7 +46,7 @@ global.$ = jest.fn( () => ( {
 	},
 } ) );
 
-require( '../index.js' );
+require( '..' );
 
 describe( 'WooPay direct checkout window "load" event listener', () => {
 	beforeEach( () => {

client/checkout/woopay/email-input-iframe.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { getConfig } from 'wcpay/utils/checkout';
 import { recordUserEvent, getTracksIdentity } from 'tracks';
 import request from '../utils/request';
-import { buildAjaxURL } from 'utils/express-checkout';
+import { buildAjaxURL } from 'wcpay/utils/express-checkout';
 import { getAppearance } from 'checkout/upe-styles';
 import {
 	getTargetElement,

client/checkout/woopay/express-button/express-checkout-iframe.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getConfig } from 'utils/checkout';
+import { getConfig } from 'wcpay/utils/checkout';
 import request from 'wcpay/checkout/utils/request';
 import { showErrorMessage } from 'wcpay/checkout/woopay/express-button/utils';
 import { buildAjaxURL } from 'wcpay/utils/express-checkout';

client/checkout/woopay/express-button/index.js

@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom';
 /**
  * Internal dependencies
  */
-import { getConfig } from 'utils/checkout';
+import { getConfig } from 'wcpay/utils/checkout';
 import { WoopayExpressCheckoutButton } from './woopay-express-checkout-button';
 import WCPayAPI from '../../api';
 import request from '../../utils/request';

client/checkout/woopay/express-button/test/express-checkout-iframe.test.js

@@ -8,9 +8,9 @@ import { waitFor } from '@testing-library/react';
  */
 import { expressCheckoutIframe } from '../express-checkout-iframe';
 import WCPayAPI from 'wcpay/checkout/api';
-import { getConfig } from 'utils/checkout';
+import { getConfig } from 'wcpay/utils/checkout';
 
-jest.mock( 'utils/checkout', () => ( {
+jest.mock( 'wcpay/utils/checkout', () => ( {
 	getConfig: jest.fn(),
 } ) );
 

client/checkout/woopay/express-button/test/index.test.js

@@ -6,10 +6,10 @@ import { screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import '../index';
-import { getConfig } from 'utils/checkout';
+import '..';
+import { getConfig } from 'wcpay/utils/checkout';
 
-jest.mock( 'utils/checkout', () => ( {
+jest.mock( 'wcpay/utils/checkout', () => ( {
 	getConfig: jest.fn(),
 } ) );
 

client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js

@@ -11,7 +11,7 @@ import { WoopayExpressCheckoutButton } from '../woopay-express-checkout-button';
 import { expressCheckoutIframe } from '../express-checkout-iframe';
 import WCPayAPI from 'wcpay/checkout/api';
 import request from 'wcpay/checkout/utils/request';
-import { getConfig } from 'utils/checkout';
+import { getConfig } from 'wcpay/utils/checkout';
 import useExpressCheckoutProductHandler from '../use-express-checkout-product-handler';
 
 jest.mock( 'wcpay/checkout/utils/request', () =>
@@ -23,7 +23,7 @@ jest.mock( 'wcpay/checkout/woopay/express-button/utils', () => ( {
 jest.mock( 'wcpay/checkout/woopay/connect/woopay-connect-iframe', () => ( {
 	WooPayConnectIframe: () => null,
 } ) );
-jest.mock( 'utils/checkout', () => ( {
+jest.mock( 'wcpay/utils/checkout', () => ( {
 	getConfig: jest.fn(),
 } ) );
 

client/components/account-balances/balance-block.tsx

@@ -7,7 +7,7 @@ import React from 'react';
  * Internal dependencies
  */
 import { formatCurrency } from 'multi-currency/interface/functions';
-import Loadable from 'components/loadable';
+import Loadable from 'wcpay/components/loadable';
 
 /**
  * BalanceBlockProps

client/components/account-balances/balance-tooltip.tsx

@@ -9,9 +9,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { ClickTooltip } from 'components/tooltip';
+import { ClickTooltip } from 'wcpay/components/tooltip';
 import { documentationUrls, fundLabelStrings } from './strings';
-import InlineNotice from 'components/inline-notice';
+import InlineNotice from 'wcpay/components/inline-notice';
 
 type TotalBalanceTooltipProps = {
 	balance: number;

client/components/account-status/account-fees/expiration-bar.js

@@ -3,7 +3,7 @@
 /**
  * Internal dependencies
  */
-import ProgressBar from 'components/progress-bar';
+import ProgressBar from 'wcpay/components/progress-bar';
 import { formatCurrency } from 'multi-currency/interface/functions';
 
 const ExpirationBar = ( {

client/components/account-status/account-fees/index.js

@@ -18,7 +18,7 @@ import {
 	formatAccountFeesDescription,
 	getCurrentBaseFee,
 	getTransactionsPaymentMethodName,
-} from 'utils/account-fees';
+} from 'wcpay/utils/account-fees';
 import { CardDivider } from 'wcpay/components/wp-components-wrapped';
 import './styles.scss';
 

client/components/account-status/account-fees/test/index.js

@@ -7,7 +7,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import AccountFees from '../index';
+import AccountFees from '..';
 
 describe( 'AccountFees', () => {
 	const renderAccountFees = ( accountFees ) => {

client/components/account-status/index.js

@@ -18,8 +18,8 @@ import { __ } from '@wordpress/i18n';
  */
 import AccountFees from './account-fees';
 import AccountStatusItem from './account-status-item';
-import DepositsStatus from 'components/deposits-status';
-import PaymentsStatus from 'components/payments-status';
+import DepositsStatus from 'wcpay/components/deposits-status';
+import PaymentsStatus from 'wcpay/components/payments-status';
 import StatusChip from './status-chip';
 import './style.scss';
 import './shared.scss';

client/components/account-status/status-chip.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Chip from 'components/chip';
+import Chip from 'wcpay/components/chip';
 import './style.scss';
 
 const StatusChip = ( props ) => {

client/components/active-loan-summary/index.tsx

@@ -18,7 +18,7 @@ import { createInterpolateElement } from '@wordpress/element';
  * Internal dependencies.
  */
 import { formatExplicitCurrency } from 'multi-currency/interface/functions';
-import Loadable from 'components/loadable';
+import Loadable from 'wcpay/components/loadable';
 import { useActiveLoanSummary } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';
 

client/components/deposit-status-chip/index.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import Chip, { ChipType } from 'components/chip';
+import Chip, { ChipType } from 'wcpay/components/chip';
 import type { CachedDeposit, DepositStatus } from 'wcpay/types/deposits';
 import { depositStatusLabels } from 'wcpay/deposits/strings';
 

client/components/deposits-overview/deposit-notices.tsx

@@ -11,7 +11,7 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import InlineNotice from 'components/inline-notice';
+import InlineNotice from 'wcpay/components/inline-notice';
 import { recordEvent } from 'wcpay/tracks';
 
 /**

client/components/deposits-overview/deposit-schedule.tsx

@@ -10,7 +10,7 @@ import HelpOutlineIcon from 'gridicons/dist/help-outline';
 /**
  * Internal dependencies
  */
-import { ClickTooltip } from 'components/tooltip';
+import { ClickTooltip } from 'wcpay/components/tooltip';
 import {
 	hasAutomaticScheduledDeposits,
 	getDepositMonthlyAnchorLabel,

client/components/deposits-overview/index.tsx

@@ -18,7 +18,7 @@ import { getHistory } from '@woocommerce/navigation';
 import { getAdminUrl } from 'wcpay/utils';
 import { formatExplicitCurrency } from 'multi-currency/interface/functions';
 import { recordEvent } from 'tracks';
-import Loadable from 'components/loadable';
+import Loadable from 'wcpay/components/loadable';
 import { useSelectedCurrencyOverview } from 'wcpay/overview/hooks';
 import RecentDepositsList from './recent-deposits-list';
 import DepositSchedule from './deposit-schedule';

client/components/deposits-overview/recent-deposits-list.tsx

@@ -17,8 +17,8 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies.
  */
 import './style.scss';
-import DepositStatusChip from 'components/deposit-status-chip';
-import { getDepositDate } from 'deposits/utils';
+import DepositStatusChip from 'wcpay/components/deposit-status-chip';
+import { getDepositDate } from 'wcpay/deposits/utils';
 import { CachedDeposit } from 'wcpay/types/deposits';
 import { formatCurrency } from 'multi-currency/interface/functions';
 import { getDetailsURL } from 'wcpay/components/details-link';

client/components/deposits-status/index.tsx

@@ -13,7 +13,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import 'components/account-status/shared.scss';
+import 'wcpay/components/account-status/shared.scss';
 import { ClickTooltip } from 'wcpay/components/tooltip';
 import type { AccountStatus } from 'wcpay/types/account/account-status';
 

client/components/disputed-order-notice/test/index.test.js

@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import DisputedOrderNoticeHandler from '../index';
+import DisputedOrderNoticeHandler from '..';
 import { useCharge } from 'wcpay/data';
 
 jest.mock( 'wcpay/data', () => ( {

client/components/file-upload/test/index.tsx

@@ -10,7 +10,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import { FileUploadControl } from 'components/file-upload';
+import { FileUploadControl } from 'wcpay/components/file-upload';
 import type { FileUploadControlProps } from 'wcpay/types/disputes';
 
 describe( 'FileUploadControl', () => {

client/components/payments-status/index.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import 'components/account-status/shared.scss';
+import 'wcpay/components/account-status/shared.scss';
 import type { AccountStatus } from 'wcpay/types/account/account-status';
 
 interface PaymentsStatusProps {

client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx

@@ -10,8 +10,8 @@ import { Icon, currencyDollar } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import BlockEmbedIcon from 'components/icons/block-embed';
-import BlockPostAuthorIcon from 'components/icons/block-post-author';
+import BlockEmbedIcon from 'wcpay/components/icons/block-embed';
+import BlockPostAuthorIcon from 'wcpay/components/icons/block-post-author';
 import './style.scss';
 import { recordEvent } from 'wcpay/tracks';
 

client/components/sandbox-mode-switch-to-live-notice/modal/test/index.test.tsx

@@ -8,7 +8,7 @@ import user from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import SetupLivePaymentsModal from '../index';
+import SetupLivePaymentsModal from '..';
 
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ),

client/components/test-mode-notice/index.tsx

@@ -7,7 +7,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getPaymentSettingsUrl, isInTestMode } from 'utils';
+import { getPaymentSettingsUrl, isInTestMode } from 'wcpay/utils';
 import BannerNotice from '../banner-notice';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Link } from '@woocommerce/components';

client/components/test-mode-notice/test/index.tsx

@@ -7,8 +7,8 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { isInTestMode } from 'utils';
-import { TestModeNotice } from '../index';
+import { isInTestMode } from 'wcpay/utils';
+import { TestModeNotice } from '..';
 
 declare const global: {
 	wcSettings: { countries: Record< string, string > };
@@ -19,7 +19,7 @@ declare const global: {
 	};
 };
 
-jest.mock( 'utils', () => ( {
+jest.mock( 'wcpay/utils', () => ( {
 	isInTestMode: jest.fn(),
 	getPaymentSettingsUrl: jest.fn().mockReturnValue( 'https://example.com/' ),
 } ) );

client/components/tip-box/index.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import LightbulbIcon from 'components/icons/lightbulb';
+import LightbulbIcon from 'wcpay/components/icons/lightbulb';
 import './style.scss';
 
 interface Props {

client/components/transaction-status-pill/mappings.ts

@@ -4,7 +4,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import type { PillType } from 'components/pill';
+import type { PillType } from 'wcpay/components/pill';
 
 export type TransactionStatus = 'allow' | 'review' | 'block';
 type TransactionStatusMapping = Record<

client/components/welcome/index.tsx

@@ -12,7 +12,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useAllDepositsOverviews } from 'data';
+import { useAllDepositsOverviews } from 'wcpay/data';
 import { useCurrentWpUser } from './hooks';
 import { CurrencySelect } from './currency-select';
 import './style.scss';