diff --git a/assets/images/woo-logo.svg b/assets/images/woo-logo.svg new file mode 100644 index 00000000000..21cd27114b3 --- /dev/null +++ b/assets/images/woo-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/changelog.txt b/changelog.txt index a0ab5a31932..4f1bdeb437b 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,8 @@ *** WooPayments Changelog *** += 8.2.2 - 2024-09-24 = +* Fix - Fix WooPay pre-checking place order bug when buying a subscription. + = 8.2.1 - 2024-09-13 = * Fix - Create div container element with JS dynamically. diff --git a/changelog/9363-manual-capture-disable-payment-methods b/changelog/9363-manual-capture-disable-payment-methods new file mode 100644 index 00000000000..5d21010f61b --- /dev/null +++ b/changelog/9363-manual-capture-disable-payment-methods @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Update payment methods when manual capture is enabled. diff --git a/changelog/add-8522-utc-list-page-csv b/changelog/add-8522-utc-list-page-csv new file mode 100644 index 00000000000..c3d00989f0c --- /dev/null +++ b/changelog/add-8522-utc-list-page-csv @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add UTC to the date time column header of transactions list page. diff --git a/changelog/add-9245-ece-locale b/changelog/add-9245-ece-locale new file mode 100644 index 00000000000..d95e1eaa596 --- /dev/null +++ b/changelog/add-9245-ece-locale @@ -0,0 +1,4 @@ +Significance: patch +Type: add + +Provide locale to Express Checkout Element. diff --git a/changelog/dev-fix-po-test b/changelog/dev-fix-po-test new file mode 100644 index 00000000000..396d1a7a0e1 --- /dev/null +++ b/changelog/dev-fix-po-test @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Fix progressive onboarding e2e test diff --git a/changelog/dev-i4-design-updates b/changelog/dev-i4-design-updates new file mode 100644 index 00000000000..fb516d6f40c --- /dev/null +++ b/changelog/dev-i4-design-updates @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Some minor styling updates on the Onboarding form. diff --git a/changelog/dev-remove-feature-flag b/changelog/dev-remove-feature-flag new file mode 100644 index 00000000000..43083b44120 --- /dev/null +++ b/changelog/dev-remove-feature-flag @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Remove feature flag to make embedded KYC enabled by default diff --git a/changelog/e2e-migrate-dispute-challenge-accept-flows-to-playwright b/changelog/e2e-migrate-dispute-challenge-accept-flows-to-playwright new file mode 100644 index 00000000000..2b4dce08f0e --- /dev/null +++ b/changelog/e2e-migrate-dispute-challenge-accept-flows-to-playwright @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Not user-facing: migrate dispute response flow e2e tests to playwright + + diff --git a/changelog/fix-9332-default-express-buttons-only-icon b/changelog/fix-9332-default-express-buttons-only-icon new file mode 100644 index 00000000000..3687f844239 --- /dev/null +++ b/changelog/fix-9332-default-express-buttons-only-icon @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Default express checkout button label to "Only icon". diff --git a/changelog/fix-9390-hide-bnpl-pmme-if-gateway-is-disabled b/changelog/fix-9390-hide-bnpl-pmme-if-gateway-is-disabled new file mode 100644 index 00000000000..ff3a9e534e5 --- /dev/null +++ b/changelog/fix-9390-hide-bnpl-pmme-if-gateway-is-disabled @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Do not display BNPL methods and PMME when WooPayments is disabled diff --git a/changelog/fix-reintroduce-support-for-wcpay_force_network_saved_cards-filter b/changelog/fix-reintroduce-support-for-wcpay_force_network_saved_cards-filter new file mode 100644 index 00000000000..459e9a4d73e --- /dev/null +++ b/changelog/fix-reintroduce-support-for-wcpay_force_network_saved_cards-filter @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Allow the network saved card payment method setting to be overridden by the `wcpay_force_network_saved_cards` filter diff --git a/changelog/fix-update-dark-blueberry-color b/changelog/fix-update-dark-blueberry-color new file mode 100644 index 00000000000..5ef4bda84ad --- /dev/null +++ b/changelog/fix-update-dark-blueberry-color @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Fix gutenberg blueberry focus color diff --git a/changelog/fix-woopay-pre-checking-save-my-info-place-order b/changelog/fix-woopay-pre-checking-save-my-info-place-order new file mode 100644 index 00000000000..4e98d24ab30 --- /dev/null +++ b/changelog/fix-woopay-pre-checking-save-my-info-place-order @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix WooPay pre-checking place order bug when buying a subscription. diff --git a/changelog/multi-currency-v2 b/changelog/multi-currency-v2 deleted file mode 100644 index 463f61c882e..00000000000 --- a/changelog/multi-currency-v2 +++ /dev/null @@ -1,4 +0,0 @@ -Significance: minor -Type: update - -Decoupled Multi-currency module from gateway dependencies. diff --git a/changelog/revert-9439-multi-currency-v2 b/changelog/revert-9439-multi-currency-v2 new file mode 100644 index 00000000000..8b478ae7517 --- /dev/null +++ b/changelog/revert-9439-multi-currency-v2 @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Revert "Decoupled Multi-currency module from gateway dependencies." + + diff --git a/changelog/update-9305-settings-disable-save-changes-button b/changelog/update-9305-settings-disable-save-changes-button new file mode 100644 index 00000000000..53f56de4dd3 --- /dev/null +++ b/changelog/update-9305-settings-disable-save-changes-button @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Disable save changes button until a setting has changed. diff --git a/client/additional-methods-setup/upe-preview-methods-selector/add-payment-methods-task.js b/client/additional-methods-setup/upe-preview-methods-selector/add-payment-methods-task.js index fbc23b63b67..76a2f3baa71 100644 --- a/client/additional-methods-setup/upe-preview-methods-selector/add-payment-methods-task.js +++ b/client/additional-methods-setup/upe-preview-methods-selector/add-payment-methods-task.js @@ -36,7 +36,7 @@ import PaymentMethodCheckbox from '../../components/payment-methods-checkboxes/p import { LoadableBlock } from '../../components/loadable'; import LoadableSettingsSection from '../../settings/loadable-settings-section'; import CurrencyInformationForMethods from './currency-information-for-methods'; -import { getMissingCurrenciesTooltipMessage } from 'multi-currency/interface/functions'; +import { getMissingCurrenciesTooltipMessage } from 'wcpay/multi-currency/missing-currencies-message'; import { upeCapabilityStatuses, upeMethods } from '../constants'; import paymentMethodsMap from '../../payment-methods-map'; import ConfirmPaymentMethodActivationModal from 'wcpay/settings/payment-methods-list/activation-modal'; diff --git a/client/additional-methods-setup/upe-preview-methods-selector/currency-information-for-methods.js b/client/additional-methods-setup/upe-preview-methods-selector/currency-information-for-methods.js index 9639a729c8b..f4e1fc02cbc 100644 --- a/client/additional-methods-setup/upe-preview-methods-selector/currency-information-for-methods.js +++ b/client/additional-methods-setup/upe-preview-methods-selector/currency-information-for-methods.js @@ -9,11 +9,11 @@ import interpolateComponents from '@automattic/interpolate-components'; /** * Internal dependencies */ -import { useAccountDomesticCurrency } from '../../data'; import { + useAccountDomesticCurrency, useCurrencies, useEnabledCurrencies, -} from 'multi-currency/interface/data'; +} from '../../data'; import WCPaySettingsContext from '../../settings/wcpay-settings-context'; import InlineNotice from 'components/inline-notice'; import PaymentMethodsMap from '../../payment-methods-map'; diff --git a/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js b/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js index 3a12347327f..3339e812975 100644 --- a/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js +++ b/client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js @@ -22,14 +22,11 @@ import { useEnabledPaymentMethodIds, useGetPaymentMethodStatuses, useSettings, + useCurrencies, + useEnabledCurrencies, useManualCapture, useAccountDomesticCurrency, } from '../../../data'; -import { - useCurrencies, - useEnabledCurrencies, -} from 'multi-currency/interface/data'; - import WCPaySettingsContext from '../../../settings/wcpay-settings-context'; import { upeCapabilityStatuses } from 'wcpay/additional-methods-setup/constants'; @@ -37,16 +34,13 @@ jest.mock( '../../../data', () => ( { useGetAvailablePaymentMethodIds: jest.fn(), useEnabledPaymentMethodIds: jest.fn(), useSettings: jest.fn(), + useCurrencies: jest.fn(), + useEnabledCurrencies: jest.fn(), useGetPaymentMethodStatuses: jest.fn(), useManualCapture: jest.fn(), useAccountDomesticCurrency: jest.fn(), } ) ); -jest.mock( 'multi-currency/interface/data', () => ( { - useCurrencies: jest.fn(), - useEnabledCurrencies: jest.fn(), -} ) ); - jest.mock( '@wordpress/a11y', () => ( { ...jest.requireActual( '@wordpress/a11y' ), speak: jest.fn(), diff --git a/client/additional-methods-setup/upe-preview-methods-selector/test/currency-information-for-methods.test.js b/client/additional-methods-setup/upe-preview-methods-selector/test/currency-information-for-methods.test.js index cc2abefe96d..fd473249eb7 100644 --- a/client/additional-methods-setup/upe-preview-methods-selector/test/currency-information-for-methods.test.js +++ b/client/additional-methods-setup/upe-preview-methods-selector/test/currency-information-for-methods.test.js @@ -7,21 +7,18 @@ import { render, screen } from '@testing-library/react'; /** * Internal dependencies */ -import { useAccountDomesticCurrency } from '../../../data'; import { useCurrencies, useEnabledCurrencies, -} from 'multi-currency/interface/data'; + useAccountDomesticCurrency, +} from 'wcpay/data'; import CurrencyInformationForMethods from '../currency-information-for-methods'; import WCPaySettingsContext from '../../../settings/wcpay-settings-context'; -jest.mock( '../../../data', () => ( { - useAccountDomesticCurrency: jest.fn(), -} ) ); - -jest.mock( 'multi-currency/interface/data', () => ( { +jest.mock( 'wcpay/data', () => ( { useCurrencies: jest.fn(), useEnabledCurrencies: jest.fn(), + useAccountDomesticCurrency: jest.fn(), } ) ); jest.mock( '@wordpress/a11y', () => ( { diff --git a/client/additional-methods-setup/wizard/task-item.js b/client/additional-methods-setup/wizard/task-item.js index 57975deeb22..943ac88760e 100644 --- a/client/additional-methods-setup/wizard/task-item.js +++ b/client/additional-methods-setup/wizard/task-item.js @@ -11,13 +11,7 @@ import { Icon, check } from '@wordpress/icons'; import WizardTaskContext from './task/context'; import './task-item.scss'; -const WizardTaskItem = ( { - children, - title, - index, - className, - visibleDescription, -} ) => { +const WizardTaskItem = ( { children, title, index, className } ) => { const { isCompleted, isActive } = useContext( WizardTaskContext ); return ( @@ -45,16 +39,6 @@ const WizardTaskItem = ( { { title } - { visibleDescription && ! isActive && ( - - { visibleDescription } - - ) }
{ children }
); diff --git a/client/additional-methods-setup/wizard/task-item.scss b/client/additional-methods-setup/wizard/task-item.scss index ae24c06ac08..c2b7dbb5ec6 100644 --- a/client/additional-methods-setup/wizard/task-item.scss +++ b/client/additional-methods-setup/wizard/task-item.scss @@ -117,22 +117,6 @@ } } - &__visible-description-element { - position: absolute; - margin-left: 40px; - margin-top: 0; - margin-bottom: 1em; - - &.is-muted-color { - color: $gray-700; - } - - .components-external-link svg { - width: 1em; - height: 1em; - } - } - .add-payment-methods-task { &__payment-selector { &-wrapper { diff --git a/client/capital/index.tsx b/client/capital/index.tsx index 81e76ad91b4..8d1ab3f4741 100644 --- a/client/capital/index.tsx +++ b/client/capital/index.tsx @@ -15,10 +15,7 @@ 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 { - formatExplicitCurrency, - isZeroDecimalCurrency, -} from 'multi-currency/interface/functions'; +import { formatExplicitCurrency, isZeroDecimalCurrency } from 'utils/currency'; import { CapitalLoan } from 'data/capital/types'; import ClickableCell from 'components/clickable-cell'; import Chip from 'components/chip'; diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js index c5ccaceed96..df410850621 100644 --- a/client/checkout/woopay/email-input-iframe.js +++ b/client/checkout/woopay/email-input-iframe.js @@ -9,12 +9,12 @@ import { buildAjaxURL } from 'utils/express-checkout'; import { getAppearance } from 'checkout/upe-styles'; import { getTargetElement, + getAppearanceType, validateEmail, appendRedirectionParams, shouldSkipWooPay, deleteSkipWooPayCookie, } from './utils'; -import { getAppearanceType } from '../utils'; export const handleWooPayEmailInput = async ( field, diff --git a/client/components/account-balances/balance-block.tsx b/client/components/account-balances/balance-block.tsx index c9c9535c9ee..4b71f4ef273 100644 --- a/client/components/account-balances/balance-block.tsx +++ b/client/components/account-balances/balance-block.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; /** * Internal dependencies */ -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'wcpay/utils/currency'; import Loadable from 'components/loadable'; /** diff --git a/client/components/account-balances/index.tsx b/client/components/account-balances/index.tsx index fa3be8b8422..2a1ace68487 100644 --- a/client/components/account-balances/index.tsx +++ b/client/components/account-balances/index.tsx @@ -23,7 +23,7 @@ import { } from './balance-tooltip'; import { fundLabelStrings } from './strings'; import { ClickTooltip } from '../tooltip'; -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'wcpay/utils/currency'; import { useAllDepositsOverviews } from 'wcpay/data'; import { useSelectedCurrency } from 'wcpay/overview/hooks'; import './style.scss'; diff --git a/client/components/account-status/account-fees/expiration-bar.js b/client/components/account-status/account-fees/expiration-bar.js index 2d293e948c9..80003bba2a4 100644 --- a/client/components/account-status/account-fees/expiration-bar.js +++ b/client/components/account-status/account-fees/expiration-bar.js @@ -4,7 +4,7 @@ * Internal dependencies */ import ProgressBar from 'components/progress-bar'; -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'utils/currency'; const ExpirationBar = ( { feeData: { diff --git a/client/components/account-status/account-fees/expiration-description.js b/client/components/account-status/account-fees/expiration-description.js index 6be5b58681c..a07067b6495 100644 --- a/client/components/account-status/account-fees/expiration-description.js +++ b/client/components/account-status/account-fees/expiration-description.js @@ -10,7 +10,7 @@ import moment from 'moment'; /** * Internal dependencies */ -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'utils/currency'; const ExpirationDescription = ( { feeData: { volume_allowance: volumeAllowance, end_time: endTime, ...rest }, diff --git a/client/components/account-status/account-fees/index.js b/client/components/account-status/account-fees/index.js index 4b77b39e5f3..93a93293c11 100644 --- a/client/components/account-status/account-fees/index.js +++ b/client/components/account-status/account-fees/index.js @@ -10,10 +10,7 @@ import { __ } from '@wordpress/i18n'; */ import ExpirationBar from './expiration-bar'; import ExpirationDescription from './expiration-description'; -import { - formatCurrencyName, - getCurrency, -} from 'multi-currency/interface/functions'; +import { formatCurrencyName, getCurrency } from 'utils/currency'; import { formatAccountFeesDescription, getCurrentBaseFee, diff --git a/client/components/active-loan-summary/index.tsx b/client/components/active-loan-summary/index.tsx index 0c5059ef87c..97aac9ac082 100755 --- a/client/components/active-loan-summary/index.tsx +++ b/client/components/active-loan-summary/index.tsx @@ -18,7 +18,7 @@ import { dateI18n } from '@wordpress/date'; /** * Internal dependencies. */ -import { formatExplicitCurrency } from 'multi-currency/interface/functions'; +import { formatExplicitCurrency } from 'utils/currency'; import Loadable from 'components/loadable'; import { useActiveLoanSummary } from 'wcpay/data'; import { getAdminUrl } from 'wcpay/utils'; diff --git a/client/components/csv-export-modal/test/index.test.tsx b/client/components/csv-export-modal/test/index.test.tsx index 3254e197156..731abf9f136 100644 --- a/client/components/csv-export-modal/test/index.test.tsx +++ b/client/components/csv-export-modal/test/index.test.tsx @@ -44,6 +44,7 @@ describe( 'RefundModal', () => { mockUseSettings.mockReturnValue( { isLoading: false, + isDirty: false, isSaving: false, saveSettings: ( a ) => a, } ); diff --git a/multi-currency/client/components/currency-delete-illustration/index.js b/client/components/currency-delete-illustration/index.js similarity index 100% rename from multi-currency/client/components/currency-delete-illustration/index.js rename to client/components/currency-delete-illustration/index.js diff --git a/multi-currency/client/components/currency-delete-illustration/styles.scss b/client/components/currency-delete-illustration/styles.scss similarity index 100% rename from multi-currency/client/components/currency-delete-illustration/styles.scss rename to client/components/currency-delete-illustration/styles.scss diff --git a/client/components/deposits-overview/index.tsx b/client/components/deposits-overview/index.tsx index 5b89c21a95a..23ce733bf50 100644 --- a/client/components/deposits-overview/index.tsx +++ b/client/components/deposits-overview/index.tsx @@ -16,7 +16,7 @@ import { getHistory } from '@woocommerce/navigation'; * Internal dependencies. */ import { getAdminUrl } from 'wcpay/utils'; -import { formatExplicitCurrency } from 'multi-currency/interface/functions'; +import { formatExplicitCurrency } from 'wcpay/utils/currency'; import { recordEvent } from 'tracks'; import Loadable from 'components/loadable'; import { useSelectedCurrencyOverview } from 'wcpay/overview/hooks'; diff --git a/client/components/deposits-overview/recent-deposits-list.tsx b/client/components/deposits-overview/recent-deposits-list.tsx index 88555793d0d..1fed2448758 100644 --- a/client/components/deposits-overview/recent-deposits-list.tsx +++ b/client/components/deposits-overview/recent-deposits-list.tsx @@ -21,7 +21,7 @@ import './style.scss'; import DepositStatusChip from 'components/deposit-status-chip'; import { getDepositDate } from 'deposits/utils'; import { CachedDeposit } from 'wcpay/types/deposits'; -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'wcpay/utils/currency'; import { getDetailsURL } from 'wcpay/components/details-link'; interface RecentDepositsProps { diff --git a/client/components/disputed-order-notice/index.js b/client/components/disputed-order-notice/index.js index ab51a52d16e..de5b720715a 100644 --- a/client/components/disputed-order-notice/index.js +++ b/client/components/disputed-order-notice/index.js @@ -8,7 +8,7 @@ import { createInterpolateElement } from '@wordpress/element'; * Internal dependencies */ import InlineNotice from 'wcpay/components/inline-notice'; -import { formatExplicitCurrency } from 'multi-currency/interface/functions'; +import { formatExplicitCurrency } from 'utils/currency'; import { reasons } from 'wcpay/disputes/strings'; import { getDetailsURL } from 'wcpay/components/details-link'; import { diff --git a/client/components/payment-activity/payment-data-tile.tsx b/client/components/payment-activity/payment-data-tile.tsx index 7c0d190d79f..f9bbfbf7318 100644 --- a/client/components/payment-activity/payment-data-tile.tsx +++ b/client/components/payment-activity/payment-data-tile.tsx @@ -9,7 +9,7 @@ import { recordEvent } from 'wcpay/tracks'; /** * Internal dependencies */ -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'wcpay/utils/currency'; import Loadable from '../loadable'; import './style.scss'; diff --git a/multi-currency/client/components/search/index.js b/client/components/search/index.js similarity index 100% rename from multi-currency/client/components/search/index.js rename to client/components/search/index.js diff --git a/multi-currency/client/components/search/style.scss b/client/components/search/style.scss similarity index 100% rename from multi-currency/client/components/search/style.scss rename to client/components/search/style.scss diff --git a/multi-currency/client/components/search/test/__snapshots__/index.js.snap b/client/components/search/test/__snapshots__/index.js.snap similarity index 100% rename from multi-currency/client/components/search/test/__snapshots__/index.js.snap rename to client/components/search/test/__snapshots__/index.js.snap diff --git a/multi-currency/client/components/search/test/index.js b/client/components/search/test/index.js similarity index 100% rename from multi-currency/client/components/search/test/index.js rename to client/components/search/test/index.js diff --git a/client/components/welcome/currency-select.tsx b/client/components/welcome/currency-select.tsx index 32c1e5a3cd9..7f82c412313 100644 --- a/client/components/welcome/currency-select.tsx +++ b/client/components/welcome/currency-select.tsx @@ -8,7 +8,7 @@ import { decodeEntities } from '@wordpress/html-entities'; * Internal dependencies */ import { useSelectedCurrency } from 'overview/hooks'; -import { getCurrency } from 'multi-currency/interface/functions'; +import { getCurrency } from 'utils/currency'; import InlineLabelSelect from '../inline-label-select'; import { recordEvent } from 'tracks'; diff --git a/client/components/woopay/hooks/use-selected-payment-method.js b/client/components/woopay/hooks/use-selected-payment-method.js index 608fe247ffb..f94289715f5 100644 --- a/client/components/woopay/hooks/use-selected-payment-method.js +++ b/client/components/woopay/hooks/use-selected-payment-method.js @@ -2,40 +2,22 @@ * External dependencies */ import { useEffect, useState } from 'react'; +import { useSelect } from '@wordpress/data'; +import { PAYMENT_STORE_KEY } from '@woocommerce/block-data'; // eslint-disable-line import/no-unresolved -const getWCPayRadioButtonStatus = ( isBlocksCheckout ) => - isBlocksCheckout - ? document.querySelector( - '#radio-control-wc-payment-method-options-woocommerce_payments' - )?.checked - : document.querySelector( '#payment_method_woocommerce_payments' ) - ?.checked; - -const getNewPaymentTokenRadioButtonStatus = ( isBlocksCheckout ) => - isBlocksCheckout - ? document.querySelector( - '#radio-control-wc-payment-method-options-woocommerce_payments' - )?.checked - : document.querySelector( '#wc-woocommerce_payments-payment-token-new' ) - ?.checked || - ! document.querySelector( - '[type=radio][name="wc-woocommerce_payments-payment-token"]' - ); +const getWCPayRadioButtonStatus = () => { + return document.querySelector( '#payment_method_woocommerce_payments' ) + ?.checked; +}; -const getPaymentMethods = ( isBlocksCheckout ) => { - if ( isBlocksCheckout ) { - // For blocks checkout there is no common selector to find all the payment methods including the - // saved tokens. Thus need to concate them here to make a whole list. - return [ - ...document.querySelectorAll( - '[type=radio][name="radio-control-wc-payment-method-options"]' - ), - ...document.querySelectorAll( - '[type=radio][name="radio-control-wc-payment-method-saved-tokens"]' - ), - ]; - } - // for classic checkout +const getNewPaymentTokenRadioButtonStatus = () => + document.querySelector( '#wc-woocommerce_payments-payment-token-new' ) + ?.checked || + ! document.querySelector( + '[type=radio][name="wc-woocommerce_payments-payment-token"]' + ); + +const getPaymentMethods = () => { return document.querySelectorAll( '[type=radio][name="payment_method"]' ); }; @@ -51,15 +33,28 @@ const getPaymentTokens = ( isBlocksCheckout ) => { // hook for checking if WCPay is selected. const useSelectedPaymentMethod = ( isBlocksCheckout ) => { + // For blocks checkout, we use the store to get the active payment method. + const { isWCPayChosenOnBlocksCheckout } = useSelect( ( select ) => { + const store = select( PAYMENT_STORE_KEY ); + return { + isWCPayChosenOnBlocksCheckout: + store.getActivePaymentMethod() === 'woocommerce_payments', + }; + } ); + const [ isWCPayChosen, setIsWCPayChosen ] = useState( - getWCPayRadioButtonStatus( isBlocksCheckout ) + ! isBlocksCheckout && getWCPayRadioButtonStatus() ); const [ isNewPaymentTokenChosen, setNewPaymentTokenChosen ] = useState( - getNewPaymentTokenRadioButtonStatus( isBlocksCheckout ) + ! isBlocksCheckout && getNewPaymentTokenRadioButtonStatus() ); useEffect( () => { + if ( isBlocksCheckout ) { + return; + } + // hides the `Save payment information to my account for future purchases` checkbox. const hideCheckbox = () => { const checkbox = document.querySelector( @@ -87,7 +82,7 @@ const useSelectedPaymentMethod = ( isBlocksCheckout ) => { ); }; - const paymentMethods = getPaymentMethods( isBlocksCheckout ); + const paymentMethods = getPaymentMethods(); paymentMethods.forEach( ( paymentMethod ) => { paymentMethod.addEventListener( 'change', updateIsWCPayChosen ); @@ -119,8 +114,12 @@ const useSelectedPaymentMethod = ( isBlocksCheckout ) => { }, [ isBlocksCheckout ] ); return { - isWCPayChosen, - isNewPaymentTokenChosen, + isWCPayChosen: isBlocksCheckout + ? isWCPayChosenOnBlocksCheckout + : isWCPayChosen, + isNewPaymentTokenChosen: isBlocksCheckout + ? isWCPayChosenOnBlocksCheckout + : isNewPaymentTokenChosen, }; }; diff --git a/client/data/deposits/actions.js b/client/data/deposits/actions.js index 60b4479ab24..392b890657c 100644 --- a/client/data/deposits/actions.js +++ b/client/data/deposits/actions.js @@ -6,7 +6,7 @@ import { apiFetch } from '@wordpress/data-controls'; import { dispatch } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'utils/currency'; /** * Internal Dependencies diff --git a/client/data/index.ts b/client/data/index.ts index 878ecdc11f6..d20938feb56 100644 --- a/client/data/index.ts +++ b/client/data/index.ts @@ -18,6 +18,7 @@ export * from './charges/hooks'; export * from './timeline/hooks'; export * from './disputes/hooks'; export * from './settings/hooks'; +export * from './multi-currency'; export * from './card-readers/hooks'; export * from './capital/hooks'; export * from './documents/hooks'; diff --git a/multi-currency/client/data/action-types.js b/client/data/multi-currency/action-types.js similarity index 100% rename from multi-currency/client/data/action-types.js rename to client/data/multi-currency/action-types.js diff --git a/multi-currency/client/data/actions.js b/client/data/multi-currency/actions.js similarity index 96% rename from multi-currency/client/data/actions.js rename to client/data/multi-currency/actions.js index 0b822dde4cb..7c28cf73781 100644 --- a/multi-currency/client/data/actions.js +++ b/client/data/multi-currency/actions.js @@ -6,13 +6,13 @@ import { apiFetch } from '@wordpress/data-controls'; import { dispatch, select } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { recordEvent } from 'tracks'; /** * Internal Dependencies */ -import { recordEvent } from 'multi-currency/interface/functions'; import TYPES from './action-types'; -import { NAMESPACE, STORE_NAME } from './constants'; +import { NAMESPACE, STORE_NAME } from '../constants'; export function updateCurrencies( data ) { return { diff --git a/multi-currency/client/data/hooks.js b/client/data/multi-currency/hooks.js similarity index 96% rename from multi-currency/client/data/hooks.js rename to client/data/multi-currency/hooks.js index ea5c23e5e75..aa39e24ee6f 100644 --- a/multi-currency/client/data/hooks.js +++ b/client/data/multi-currency/hooks.js @@ -4,11 +4,7 @@ * External dependencies */ import { useSelect, useDispatch, dispatch } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { STORE_NAME } from './constants'; +import { STORE_NAME } from '../constants'; export const useCurrencies = () => useSelect( ( select ) => { diff --git a/client/data/multi-currency/index.js b/client/data/multi-currency/index.js new file mode 100644 index 00000000000..c524cca8b05 --- /dev/null +++ b/client/data/multi-currency/index.js @@ -0,0 +1,12 @@ +/** @format */ + +/** + * Internal dependencies + */ +import reducer from './reducer'; +import * as selectors from './selectors'; +import * as actions from './actions'; +import * as resolvers from './resolvers'; + +export { reducer, selectors, actions, resolvers }; +export * from './hooks'; diff --git a/multi-currency/client/data/reducer.js b/client/data/multi-currency/reducer.js similarity index 100% rename from multi-currency/client/data/reducer.js rename to client/data/multi-currency/reducer.js diff --git a/multi-currency/client/data/resolvers.js b/client/data/multi-currency/resolvers.js similarity index 93% rename from multi-currency/client/data/resolvers.js rename to client/data/multi-currency/resolvers.js index 78168ad708a..4eada7da994 100644 --- a/multi-currency/client/data/resolvers.js +++ b/client/data/multi-currency/resolvers.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { NAMESPACE } from './constants'; +import { NAMESPACE } from '../constants'; import { updateCurrencies, updateCurrencySettings, @@ -34,7 +34,7 @@ export function* getCurrencies() { } /** - * Retrieve single currency settings from the site's REST API. + * Retrieve single currency sttings from the site's REST API. * * @param {string} currencyCode The currency code to fetch settings for. */ diff --git a/multi-currency/client/data/selectors.js b/client/data/multi-currency/selectors.js similarity index 96% rename from multi-currency/client/data/selectors.js rename to client/data/multi-currency/selectors.js index 825a9271db0..6c2a2b20f97 100644 --- a/multi-currency/client/data/selectors.js +++ b/client/data/multi-currency/selectors.js @@ -13,7 +13,7 @@ const getMultiCurrencyState = ( state ) => { return {}; } - return state || {}; + return state.multiCurrency || {}; }; export const getCurrencies = ( state ) => { diff --git a/client/data/settings/hooks.js b/client/data/settings/hooks.js index a1ea500b84d..873cc22a1ea 100644 --- a/client/data/settings/hooks.js +++ b/client/data/settings/hooks.js @@ -328,6 +328,7 @@ export const useSettings = () => { const isSaving = useSelect( ( select ) => select( STORE_NAME ).isSavingSettings() ); + const isDirty = useSelect( ( select ) => select( STORE_NAME ).isDirty() ); const isLoading = useSelect( ( select ) => { select( STORE_NAME ).getSettings(); @@ -342,6 +343,7 @@ export const useSettings = () => { isLoading, saveSettings, isSaving, + isDirty, }; }; diff --git a/client/data/settings/reducer.js b/client/data/settings/reducer.js index 60298c1d9e9..69d9019d1f9 100644 --- a/client/data/settings/reducer.js +++ b/client/data/settings/reducer.js @@ -6,6 +6,7 @@ import ACTION_TYPES from './action-types'; const defaultState = { + isDirty: false, isSaving: false, savingError: null, data: {}, @@ -20,12 +21,14 @@ export const receiveSettings = ( return { ...state, data: action.data, + isDirty: false, }; case ACTION_TYPES.SET_SETTINGS_VALUES: return { ...state, savingError: null, + isDirty: true, data: { ...state.data, ...action.payload, @@ -35,6 +38,8 @@ export const receiveSettings = ( case ACTION_TYPES.SET_IS_SAVING_SETTINGS: return { ...state, + isDirty: + action.isSaving || action.error ? state.isDirty : false, isSaving: action.isSaving, savingError: action.error, }; @@ -42,6 +47,7 @@ export const receiveSettings = ( case ACTION_TYPES.SET_SELECTED_PAYMENT_METHOD: return { ...state, + isDirty: true, data: { ...state.data, enabled_payment_method_ids: state.data.enabled_payment_method_ids.concat( @@ -53,6 +59,7 @@ export const receiveSettings = ( case ACTION_TYPES.SET_UNSELECTED_PAYMENT_METHOD: return { ...state, + isDirty: true, data: { ...state.data, enabled_payment_method_ids: state.data.enabled_payment_method_ids.filter( diff --git a/client/data/settings/selectors.js b/client/data/settings/selectors.js index b8d059f8e41..16cd1b4ec55 100644 --- a/client/data/settings/selectors.js +++ b/client/data/settings/selectors.js @@ -49,6 +49,10 @@ export const isSavingSettings = ( state ) => { return getSettingsState( state ).isSaving || false; }; +export const isDirty = ( state ) => { + return getSettingsState( state ).isDirty || false; +}; + export const getAccountStatementDescriptor = ( state ) => { return getSettings( state ).account_statement_descriptor || ''; }; diff --git a/client/data/settings/test/hooks.js b/client/data/settings/test/hooks.js index 3748b09bc29..ef6500d9b7a 100644 --- a/client/data/settings/test/hooks.js +++ b/client/data/settings/test/hooks.js @@ -177,6 +177,7 @@ describe( 'Settings hooks tests', () => { hasFinishedResolution: jest.fn(), isResolving: jest.fn(), isSavingSettings: jest.fn(), + isDirty: jest.fn(), }; } ); diff --git a/client/data/settings/test/reducer.js b/client/data/settings/test/reducer.js index 7cd4f4ef7c3..159a8eb12e4 100644 --- a/client/data/settings/test/reducer.js +++ b/client/data/settings/test/reducer.js @@ -28,6 +28,7 @@ describe( 'Settings reducer tests', () => { isSaving: false, data: {}, savingError: null, + isDirty: false, } ); } ); @@ -60,6 +61,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves fields other than `data` unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { baz: 'quux', @@ -74,6 +76,7 @@ describe( 'Settings reducer tests', () => { const state = reducer( oldState, updateSettings( newSettings ) ); expect( state ).toEqual( { + isDirty: false, foo: 'bar', data: { quuz: 'corge', @@ -101,6 +104,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', isSaving: false, savingError: {}, @@ -112,6 +116,7 @@ describe( 'Settings reducer tests', () => { ); expect( state ).toEqual( { + isDirty: false, foo: 'bar', savingError: null, isSaving: true, @@ -137,6 +142,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { is_manual_capture_enabled: false, @@ -151,6 +157,7 @@ describe( 'Settings reducer tests', () => { ); expect( state ).toEqual( { + isDirty: true, savingError: null, foo: 'bar', data: { @@ -181,6 +188,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { account_statement_descriptor: 'Statement', @@ -195,6 +203,7 @@ describe( 'Settings reducer tests', () => { ); expect( state ).toEqual( { + isDirty: true, foo: 'bar', savingError: null, data: { @@ -224,6 +233,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { is_payment_request_enabled: false, @@ -238,6 +248,7 @@ describe( 'Settings reducer tests', () => { ); expect( state ).toEqual( { + isDirty: true, foo: 'bar', savingError: null, data: { @@ -271,6 +282,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { payment_request_enabled_locations: initPaymentRequestState, @@ -285,6 +297,7 @@ describe( 'Settings reducer tests', () => { ); expect( state ).toEqual( { + isDirty: true, foo: 'bar', data: { payment_request_enabled_locations: enableAllpaymentRequestState, @@ -350,6 +363,7 @@ describe( 'Settings reducer tests', () => { 'leaves other fields unchanged `%j`', ( setting ) => { const oldState = { + isDirty: false, foo: 'bar', data: { [ setting.stateKey ]: setting.settingValue, @@ -364,6 +378,7 @@ describe( 'Settings reducer tests', () => { ); expect( state ).toEqual( { + isDirty: true, foo: 'bar', savingError: null, data: { @@ -378,6 +393,7 @@ describe( 'Settings reducer tests', () => { describe( 'SET_IS_WOOPAY_ENABLED', () => { test( 'toggles `data.is_woopay_enabled`', () => { const oldState = { + isDirty: true, data: { is_woopay_enabled: false, }, @@ -391,6 +407,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { is_woopay_enabled: false, @@ -402,6 +419,7 @@ describe( 'Settings reducer tests', () => { const state = reducer( oldState, updateIsWooPayEnabled( true ) ); expect( state ).toEqual( { + isDirty: true, foo: 'bar', savingError: null, data: { @@ -430,6 +448,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { woopay_custom_message: '', @@ -444,6 +463,7 @@ describe( 'Settings reducer tests', () => { ); expect( state ).toEqual( { + isDirty: true, foo: 'bar', data: { woopay_custom_message: 'test', @@ -469,6 +489,7 @@ describe( 'Settings reducer tests', () => { test( 'leaves other fields unchanged', () => { const oldState = { + isDirty: false, foo: 'bar', data: { woopay_store_logo: '', @@ -480,6 +501,7 @@ describe( 'Settings reducer tests', () => { const state = reducer( oldState, updateWooPayStoreLogo( 'test' ) ); expect( state ).toEqual( { + isDirty: true, foo: 'bar', data: { woopay_store_logo: 'test', diff --git a/client/data/store.js b/client/data/store.js index c4387901c37..974efdb1e07 100644 --- a/client/data/store.js +++ b/client/data/store.js @@ -14,6 +14,7 @@ import * as charges from './charges'; import * as timeline from './timeline'; import * as disputes from './disputes'; import * as settings from './settings'; +import * as multiCurrency from './multi-currency'; import * as readers from './card-readers'; import * as capital from './capital'; import * as documents from './documents'; @@ -32,6 +33,7 @@ export const initStore = () => timeline: timeline.reducer, disputes: disputes.reducer, settings: settings.reducer, + multiCurrency: multiCurrency.reducer, readers: readers.reducer, capital: capital.reducer, documents: documents.reducer, @@ -47,6 +49,7 @@ export const initStore = () => ...timeline.actions, ...disputes.actions, ...settings.actions, + ...multiCurrency.actions, ...readers.actions, ...capital.actions, ...documents.actions, @@ -63,6 +66,7 @@ export const initStore = () => ...timeline.selectors, ...disputes.selectors, ...settings.selectors, + ...multiCurrency.selectors, ...readers.selectors, ...capital.selectors, ...documents.selectors, @@ -78,6 +82,7 @@ export const initStore = () => ...timeline.resolvers, ...disputes.resolvers, ...settings.resolvers, + ...multiCurrency.resolvers, ...readers.resolvers, ...capital.resolvers, ...documents.resolvers, diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 74aec3f2a7d..4d47ae51d6a 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -34,10 +34,7 @@ import Page from 'components/page'; import ErrorBoundary from 'components/error-boundary'; import { TestModeNotice } from 'components/test-mode-notice'; import InlineNotice from 'components/inline-notice'; -import { - formatCurrency, - formatExplicitCurrency, -} from 'multi-currency/interface/functions'; +import { formatCurrency, formatExplicitCurrency } from 'utils/currency'; import { displayStatus } from '../strings'; import './style.scss'; diff --git a/client/deposits/filters/index.js b/client/deposits/filters/index.js index 0d6d57afecc..34cc4bbdf52 100644 --- a/client/deposits/filters/index.js +++ b/client/deposits/filters/index.js @@ -8,7 +8,7 @@ import { getQuery } from '@woocommerce/navigation'; * Internal dependencies */ import { filters, advancedFilters } from './config'; -import { formatCurrencyName } from 'multi-currency/interface/functions'; +import { formatCurrencyName } from '../../utils/currency'; export const DepositsFilters = ( props ) => { const populateDepositCurrencies = ( filtersConfiguration ) => { diff --git a/client/deposits/instant-deposits/index.tsx b/client/deposits/instant-deposits/index.tsx index 64c49bc069f..683aecb03a3 100644 --- a/client/deposits/instant-deposits/index.tsx +++ b/client/deposits/instant-deposits/index.tsx @@ -12,7 +12,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import './style.scss'; -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'wcpay/utils/currency'; import InstantDepositModal from './modal'; import { useInstantDeposit } from 'wcpay/data'; import type * as AccountOverview from 'wcpay/types/account-overview'; diff --git a/client/deposits/instant-deposits/modal.tsx b/client/deposits/instant-deposits/modal.tsx index e9d0f530aeb..25b2783a348 100644 --- a/client/deposits/instant-deposits/modal.tsx +++ b/client/deposits/instant-deposits/modal.tsx @@ -11,10 +11,7 @@ import { createInterpolateElement } from '@wordpress/element'; /** * Internal dependencies */ -import { - formatCurrency, - formatExplicitCurrency, -} from 'multi-currency/interface/functions'; +import { formatCurrency, formatExplicitCurrency } from 'utils/currency'; import type * as AccountOverview from 'wcpay/types/account-overview'; import './style.scss'; diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index 03789c466e1..21c48d2f631 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -26,10 +26,7 @@ import { useDispatch } from '@wordpress/data'; import { useDeposits, useDepositsSummary } from 'wcpay/data'; import { useReportingExportLanguage } from 'data/index'; import { displayType, displayStatus } from '../strings'; -import { - formatExplicitCurrency, - formatExportAmount, -} from 'multi-currency/interface/functions'; +import { formatExplicitCurrency, formatExportAmount } from 'utils/currency'; import DetailsLink, { getDetailsURL } from 'components/details-link'; import ClickableCell from 'components/clickable-cell'; import Page from '../../components/page'; diff --git a/client/disputes/filters/index.tsx b/client/disputes/filters/index.tsx index 0f6fc09069f..6e8288f2611 100644 --- a/client/disputes/filters/index.tsx +++ b/client/disputes/filters/index.tsx @@ -9,7 +9,7 @@ import { getQuery } from '@woocommerce/navigation'; * Internal dependencies */ import { filters, advancedFilters, DisputesFilterType } from './config'; -import { formatCurrencyName } from 'multi-currency/interface/functions'; +import { formatCurrencyName } from '../../utils/currency'; interface DisputesFiltersProps { storeCurrencies?: string[]; diff --git a/client/disputes/filters/test/index.tsx b/client/disputes/filters/test/index.tsx index 015f28aec19..c122ba7eb3a 100644 --- a/client/disputes/filters/test/index.tsx +++ b/client/disputes/filters/test/index.tsx @@ -12,7 +12,7 @@ import { getQuery, updateQueryString } from '@woocommerce/navigation'; * Internal dependencies */ import { DisputesFilters } from '../'; -import { formatCurrencyName } from 'multi-currency/interface/functions'; +import { formatCurrencyName } from '../../../utils/currency'; // TODO: this is a bit of a hack as we're mocking an old version of WC, we should relook at this. jest.mock( '@woocommerce/settings', () => ( { diff --git a/client/disputes/index.tsx b/client/disputes/index.tsx index 060afccce35..0832ee5515b 100644 --- a/client/disputes/index.tsx +++ b/client/disputes/index.tsx @@ -37,10 +37,7 @@ import Page from 'components/page'; import { TestModeNotice } from 'components/test-mode-notice'; import { reasons } from './strings'; import { formatStringValue } from 'utils'; -import { - formatExplicitCurrency, - formatExportAmount, -} from 'multi-currency/interface/functions'; +import { formatExplicitCurrency, formatExportAmount } from 'utils/currency'; import DisputesFilters from './filters'; import DownloadButton from 'components/download-button'; import disputeStatusMapping from 'components/dispute-status-chip/mappings'; diff --git a/client/disputes/info/index.tsx b/client/disputes/info/index.tsx index 12f7ba0e64a..7aa20ca6174 100644 --- a/client/disputes/info/index.tsx +++ b/client/disputes/info/index.tsx @@ -16,7 +16,7 @@ import OrderLink from 'components/order-link'; import { getDetailsURL } from 'components/details-link'; import { reasons } from '../strings'; import { formatStringValue } from 'utils'; -import { formatExplicitCurrency } from 'multi-currency/interface/functions'; +import { formatExplicitCurrency } from 'utils/currency'; import './style.scss'; import Loadable from 'components/loadable'; import { Dispute } from 'wcpay/types/disputes'; diff --git a/client/disputes/test/index.tsx b/client/disputes/test/index.tsx index 9233f46817f..1409bfc852d 100644 --- a/client/disputes/test/index.tsx +++ b/client/disputes/test/index.tsx @@ -176,6 +176,7 @@ describe( 'Disputes list', () => { isLoading: false, isSaving: false, saveSettings: ( a ) => a, + isDirty: false, } ); global.wcpaySettings = { diff --git a/client/disputes/utils.ts b/client/disputes/utils.ts index 96a1ca40129..e96251c7863 100644 --- a/client/disputes/utils.ts +++ b/client/disputes/utils.ts @@ -18,10 +18,7 @@ import { disputeAwaitingResponseStatuses, disputeUnderReviewStatuses, } from 'wcpay/disputes/filters/config'; -import { - formatCurrency, - formatExplicitCurrency, -} from 'multi-currency/interface/functions'; +import { formatCurrency, formatExplicitCurrency } from 'wcpay/utils/currency'; interface IsDueWithinProps { dueBy: CachedDispute[ 'due_by' ] | EvidenceDetails[ 'due_by' ]; diff --git a/client/express-checkout/blocks/components/express-checkout-container.js b/client/express-checkout/blocks/components/express-checkout-container.js index 17570004571..c2df0e55c6a 100644 --- a/client/express-checkout/blocks/components/express-checkout-container.js +++ b/client/express-checkout/blocks/components/express-checkout-container.js @@ -8,7 +8,10 @@ import { Elements } from '@stripe/react-stripe-js'; * Internal dependencies */ import ExpressCheckoutComponent from './express-checkout-component'; -import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils'; +import { + getExpressCheckoutButtonAppearance, + getExpressCheckoutData, +} from 'wcpay/express-checkout/utils'; import '../express-checkout-element.scss'; const ExpressCheckoutContainer = ( props ) => { @@ -24,6 +27,7 @@ const ExpressCheckoutContainer = ( props ) => { amount: billing.cartTotal.value, currency: billing.currency.code.toLowerCase(), appearance: getExpressCheckoutButtonAppearance( buttonAttributes ), + locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en', }; return ( diff --git a/client/express-checkout/index.js b/client/express-checkout/index.js index 97eae8a9f97..f4efa4aa10f 100644 --- a/client/express-checkout/index.js +++ b/client/express-checkout/index.js @@ -235,6 +235,7 @@ jQuery( ( $ ) => { currency: options?.currency, paymentMethodCreation: 'manual', appearance: getExpressCheckoutButtonAppearance(), + locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en', } ); const eceButton = wcpayECE.createButton( diff --git a/client/globals.d.ts b/client/globals.d.ts index 44d94baa01b..f00b521943a 100644 --- a/client/globals.d.ts +++ b/client/globals.d.ts @@ -16,7 +16,6 @@ declare global { paymentTimeline: boolean; isDisputeIssuerEvidenceEnabled: boolean; isPaymentOverviewWidgetEnabled?: boolean; - isEmbeddedKycEnabled?: boolean; }; fraudServices: unknown[]; testMode: boolean; diff --git a/client/index.js b/client/index.js index eb444c1f9de..12d96efc666 100644 --- a/client/index.js +++ b/client/index.js @@ -23,7 +23,7 @@ import DisputesPage from 'disputes'; import RedirectToTransactionDetails from 'disputes/redirect-to-transaction-details'; import DisputeEvidencePage from 'disputes/evidence'; import AdditionalMethodsPage from 'wcpay/additional-methods-setup'; -import { MultiCurrencySetupPage } from 'multi-currency/interface/components'; +import MultiCurrencySetupPage from 'wcpay/multi-currency-setup'; import CardReadersPage from 'card-readers'; import CapitalPage from 'capital'; import OverviewPage from 'overview'; @@ -70,25 +70,19 @@ addFilter( capability: 'manage_woocommerce', } ); - // Currently under feature flag. - if ( - wcpaySettings && - wcpaySettings.featureFlags.isEmbeddedKycEnabled - ) { - pages.push( { - container: OnboardingKycPage, - path: '/payments/onboarding/kyc', - wpOpenMenu: menuID, - breadcrumbs: [ - rootLink, - __( 'Continue onboarding', 'woocommerce-payments' ), - ], - navArgs: { - id: 'wc-payments-continue-onboarding', - }, - capability: 'manage_woocommerce', - } ); - } + pages.push( { + container: OnboardingKycPage, + path: '/payments/onboarding/kyc', + wpOpenMenu: menuID, + breadcrumbs: [ + rootLink, + __( 'Continue onboarding', 'woocommerce-payments' ), + ], + navArgs: { + id: 'wc-payments-continue-onboarding', + }, + capability: 'manage_woocommerce', + } ); pages.push( { container: OverviewPage, diff --git a/multi-currency/client/analytics/index.js b/client/multi-currency-analytics/index.js similarity index 100% rename from multi-currency/client/analytics/index.js rename to client/multi-currency-analytics/index.js diff --git a/multi-currency/client/setup/index.js b/client/multi-currency-setup/index.js similarity index 77% rename from multi-currency/client/setup/index.js rename to client/multi-currency-setup/index.js index 05e76eb67ce..512ab078182 100644 --- a/multi-currency/client/setup/index.js +++ b/client/multi-currency-setup/index.js @@ -3,9 +3,9 @@ /** * Internal dependencies */ +import Page from 'components/page'; import MultiCurrencySetup from './tasks/multi-currency-setup'; -import { Page } from 'multi-currency/interface/components'; -import { WCPaySettingsContext } from 'multi-currency/interface/functions'; +import WCPaySettingsContext from '../settings/wcpay-settings-context'; const MultiCurrencySetupPage = () => { const { isSetupCompleted } = window.wcpaySettings.multiCurrencySetup; diff --git a/multi-currency/client/setup/tasks/add-currencies-task/constants.js b/client/multi-currency-setup/tasks/add-currencies-task/constants.js similarity index 100% rename from multi-currency/client/setup/tasks/add-currencies-task/constants.js rename to client/multi-currency-setup/tasks/add-currencies-task/constants.js diff --git a/multi-currency/client/setup/tasks/add-currencies-task/index.js b/client/multi-currency-setup/tasks/add-currencies-task/index.js similarity index 93% rename from multi-currency/client/setup/tasks/add-currencies-task/index.js rename to client/multi-currency-setup/tasks/add-currencies-task/index.js index f33fb5e95a3..1795edaa6a0 100644 --- a/multi-currency/client/setup/tasks/add-currencies-task/index.js +++ b/client/multi-currency-setup/tasks/add-currencies-task/index.js @@ -10,24 +10,23 @@ import _ from 'lodash'; /** * Internal dependencies */ -import { WizardTaskContext } from 'multi-currency/interface/functions'; -import Search from 'multi-currency/components/search'; -import { - CollapsibleBody, - LoadableBlock, - WizardTaskItem, -} from 'multi-currency/interface/components'; +import WizardTaskContext from '../../../additional-methods-setup/wizard/task/context'; +import CollapsibleBody from '../../../additional-methods-setup/wizard/collapsible-body'; +import WizardTaskItem from '../../wizard/task-item'; import { useCurrencies, useAvailableCurrencies, useEnabledCurrencies, useDefaultCurrency, -} from 'multi-currency/data'; +} from 'wcpay/data'; // eslint-disable-next-line max-len -import EnabledCurrenciesModalCheckboxList from 'multi-currency/settings/multi-currency/enabled-currencies-list/modal-checkbox-list'; -import EnabledCurrenciesModalCheckbox from 'multi-currency/settings/multi-currency/enabled-currencies-list/modal-checkbox'; +import EnabledCurrenciesModalCheckboxList from '../../../multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox-list'; +import EnabledCurrenciesModalCheckbox from '../../../multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox'; +import Search from 'components/search'; + +import { LoadableBlock } from '../../../components/loadable'; import { recommendedCurrencyCodes, numberWords } from './constants'; import { diff --git a/multi-currency/client/setup/tasks/add-currencies-task/index.scss b/client/multi-currency-setup/tasks/add-currencies-task/index.scss similarity index 100% rename from multi-currency/client/setup/tasks/add-currencies-task/index.scss rename to client/multi-currency-setup/tasks/add-currencies-task/index.scss diff --git a/multi-currency/client/setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap b/client/multi-currency-setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap similarity index 100% rename from multi-currency/client/setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap rename to client/multi-currency-setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap diff --git a/multi-currency/client/setup/tasks/add-currencies-task/test/index.test.js b/client/multi-currency-setup/tasks/add-currencies-task/test/index.test.js similarity index 97% rename from multi-currency/client/setup/tasks/add-currencies-task/test/index.test.js rename to client/multi-currency-setup/tasks/add-currencies-task/test/index.test.js index 7041543dadc..f58beb09ced 100644 --- a/multi-currency/client/setup/tasks/add-currencies-task/test/index.test.js +++ b/client/multi-currency-setup/tasks/add-currencies-task/test/index.test.js @@ -9,25 +9,23 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import AddCurrenciesTask from '..'; -import { useSettings } from 'multi-currency/interface/data'; -import { WizardTaskContext } from 'multi-currency/interface/functions'; import { useCurrencies, useAvailableCurrencies, useDefaultCurrency, useEnabledCurrencies, -} from 'multi-currency/data'; + useSettings, +} from 'wcpay/data'; +import WizardTaskContext from '../../../../additional-methods-setup/wizard/task/context'; import { recommendedCurrencyCodes } from '../constants'; import { __ } from '@wordpress/i18n'; -jest.mock( 'multi-currency/data', () => ( { +jest.mock( 'wcpay/data', () => ( { useCurrencies: jest.fn(), useAvailableCurrencies: jest.fn(), useDefaultCurrency: jest.fn(), useEnabledCurrencies: jest.fn(), -} ) ); -jest.mock( 'multi-currency/interface/data', () => ( { useSettings: jest.fn(), } ) ); diff --git a/multi-currency/client/setup/tasks/add-currencies-task/test/utils.test.js b/client/multi-currency-setup/tasks/add-currencies-task/test/utils.test.js similarity index 100% rename from multi-currency/client/setup/tasks/add-currencies-task/test/utils.test.js rename to client/multi-currency-setup/tasks/add-currencies-task/test/utils.test.js diff --git a/multi-currency/client/setup/tasks/add-currencies-task/utils.js b/client/multi-currency-setup/tasks/add-currencies-task/utils.js similarity index 100% rename from multi-currency/client/setup/tasks/add-currencies-task/utils.js rename to client/multi-currency-setup/tasks/add-currencies-task/utils.js diff --git a/multi-currency/client/setup/tasks/multi-currency-setup.js b/client/multi-currency-setup/tasks/multi-currency-setup.js similarity index 84% rename from multi-currency/client/setup/tasks/multi-currency-setup.js rename to client/multi-currency-setup/tasks/multi-currency-setup.js index cbeb6387bda..77263d9bf33 100644 --- a/multi-currency/client/setup/tasks/multi-currency-setup.js +++ b/client/multi-currency-setup/tasks/multi-currency-setup.js @@ -7,11 +7,9 @@ import { Card, CardBody } from '@wordpress/components'; /** * Internal dependencies */ -import { - Wizard, - WizardTask, - WizardTaskList, -} from 'multi-currency/interface/components'; +import Wizard from '../../additional-methods-setup/wizard/wrapper'; +import WizardTask from '../../additional-methods-setup/wizard/task'; +import WizardTaskList from '../../additional-methods-setup/wizard/task-list'; import StoreSettingsTask from './store-settings-task'; import SetupCompleteTask from './setup-complete-task'; import AddCurrenciesTask from './add-currencies-task'; diff --git a/multi-currency/client/setup/tasks/multi-currency-setup.scss b/client/multi-currency-setup/tasks/multi-currency-setup.scss similarity index 100% rename from multi-currency/client/setup/tasks/multi-currency-setup.scss rename to client/multi-currency-setup/tasks/multi-currency-setup.scss diff --git a/multi-currency/client/setup/tasks/setup-complete-task/index.js b/client/multi-currency-setup/tasks/setup-complete-task/index.js similarity index 89% rename from multi-currency/client/setup/tasks/setup-complete-task/index.js rename to client/multi-currency-setup/tasks/setup-complete-task/index.js index 6c467ec3a08..e846498df0e 100644 --- a/multi-currency/client/setup/tasks/setup-complete-task/index.js +++ b/client/multi-currency-setup/tasks/setup-complete-task/index.js @@ -10,15 +10,13 @@ import { useDispatch } from '@wordpress/data'; /** * Internal dependencies */ -import { - CollapsibleBody, - WizardTaskItem, -} from 'multi-currency/interface/components'; -import { WizardTaskContext } from 'multi-currency/interface/functions'; +import CollapsibleBody from '../../../additional-methods-setup/wizard/collapsible-body'; +import WizardTaskItem from '../../wizard/task-item'; +import WizardTaskContext from '../../../additional-methods-setup/wizard/task/context'; import './index.scss'; -import { useDefaultCurrency } from 'multi-currency/data'; +import { useDefaultCurrency } from 'wcpay/data'; const SetupComplete = () => { const { isActive } = useContext( WizardTaskContext ); diff --git a/multi-currency/client/setup/tasks/setup-complete-task/index.scss b/client/multi-currency-setup/tasks/setup-complete-task/index.scss similarity index 100% rename from multi-currency/client/setup/tasks/setup-complete-task/index.scss rename to client/multi-currency-setup/tasks/setup-complete-task/index.scss diff --git a/multi-currency/client/setup/tasks/setup-complete-task/test/index.test.js b/client/multi-currency-setup/tasks/setup-complete-task/test/index.test.js similarity index 87% rename from multi-currency/client/setup/tasks/setup-complete-task/test/index.test.js rename to client/multi-currency-setup/tasks/setup-complete-task/test/index.test.js index a7a9db81872..48c4ac16d7a 100644 --- a/multi-currency/client/setup/tasks/setup-complete-task/test/index.test.js +++ b/client/multi-currency-setup/tasks/setup-complete-task/test/index.test.js @@ -6,15 +6,14 @@ import { render } from '@testing-library/react'; /** * Internal dependencies */ -import { WizardTaskContext } from 'multi-currency/interface/functions'; +import WizardTaskContext from '../../../../additional-methods-setup/wizard/task/context'; import SetupCompleteTask from '../../setup-complete-task'; jest.mock( '@wordpress/data', () => ( { useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ), } ) ); -jest.mock( 'multi-currency/interface/data', () => ( {} ) ); -jest.mock( 'multi-currency/data', () => ( { +jest.mock( 'wcpay/data', () => ( { useDefaultCurrency: jest.fn().mockReturnValue( { code: 'USD', rate: 1, diff --git a/multi-currency/client/setup/tasks/store-settings-task/index.js b/client/multi-currency-setup/tasks/store-settings-task/index.js similarity index 92% rename from multi-currency/client/setup/tasks/store-settings-task/index.js rename to client/multi-currency-setup/tasks/store-settings-task/index.js index 9a3ca8f0666..7e20fc0f3e4 100644 --- a/multi-currency/client/setup/tasks/store-settings-task/index.js +++ b/client/multi-currency-setup/tasks/store-settings-task/index.js @@ -9,16 +9,13 @@ import interpolateComponents from '@automattic/interpolate-components'; /** * Internal dependencies */ -import { - CollapsibleBody, - WizardTaskItem, -} from 'multi-currency/interface/components'; -import { WizardTaskContext } from 'multi-currency/interface/functions'; -import { useSettings, useMultiCurrency } from 'multi-currency/interface/data'; -import PreviewModal from 'multi-currency/components/preview-modal'; +import WizardTaskContext from '../../../additional-methods-setup/wizard/task/context'; +import CollapsibleBody from '../../../additional-methods-setup/wizard/collapsible-body'; +import WizardTaskItem from '../../wizard/task-item'; +import PreviewModal from '../../../multi-currency/preview-modal'; import './index.scss'; -import { useStoreSettings } from 'multi-currency/data'; +import { useStoreSettings, useSettings, useMultiCurrency } from 'wcpay/data'; const StoreSettingsTask = () => { const { storeSettings, submitStoreSettingsUpdate } = useStoreSettings(); diff --git a/multi-currency/client/setup/tasks/store-settings-task/index.scss b/client/multi-currency-setup/tasks/store-settings-task/index.scss similarity index 100% rename from multi-currency/client/setup/tasks/store-settings-task/index.scss rename to client/multi-currency-setup/tasks/store-settings-task/index.scss diff --git a/multi-currency/client/setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap b/client/multi-currency-setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap similarity index 100% rename from multi-currency/client/setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap rename to client/multi-currency-setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap diff --git a/multi-currency/client/setup/tasks/store-settings-task/test/index.test.js b/client/multi-currency-setup/tasks/store-settings-task/test/index.test.js similarity index 92% rename from multi-currency/client/setup/tasks/store-settings-task/test/index.test.js rename to client/multi-currency-setup/tasks/store-settings-task/test/index.test.js index d80e8f8d12a..e81b7b08f99 100644 --- a/multi-currency/client/setup/tasks/store-settings-task/test/index.test.js +++ b/client/multi-currency-setup/tasks/store-settings-task/test/index.test.js @@ -7,21 +7,21 @@ import { render, screen, fireEvent } from '@testing-library/react'; /** * Internal dependencies */ -import { useCurrencies, useStoreSettings } from 'multi-currency/data'; -import { useSettings, useMultiCurrency } from 'multi-currency/interface/data'; -import { WizardTaskContext } from 'multi-currency/interface/functions'; +import WizardTaskContext from '../../../../additional-methods-setup/wizard/task/context'; +import { + useCurrencies, + useStoreSettings, + useSettings, + useMultiCurrency, +} from 'wcpay/data'; import StoreSettingsTask from '..'; -jest.mock( 'multi-currency/data', () => ( { +jest.mock( 'wcpay/data', () => ( { useStoreSettings: jest.fn(), useCurrencies: jest.fn(), useSettings: jest.fn(), useMultiCurrency: jest.fn(), } ) ); -jest.mock( 'multi-currency/interface/data', () => ( { - useSettings: jest.fn(), - useMultiCurrency: jest.fn(), -} ) ); const changeableSettings = [ 'enable_storefront_switcher', diff --git a/multi-currency/client/setup/tasks/test/__snapshots__/multi-currency-setup.test.js.snap b/client/multi-currency-setup/tasks/test/__snapshots__/multi-currency-setup.test.js.snap similarity index 100% rename from multi-currency/client/setup/tasks/test/__snapshots__/multi-currency-setup.test.js.snap rename to client/multi-currency-setup/tasks/test/__snapshots__/multi-currency-setup.test.js.snap diff --git a/multi-currency/client/setup/tasks/test/multi-currency-setup.test.js b/client/multi-currency-setup/tasks/test/multi-currency-setup.test.js similarity index 100% rename from multi-currency/client/setup/tasks/test/multi-currency-setup.test.js rename to client/multi-currency-setup/tasks/test/multi-currency-setup.test.js diff --git a/multi-currency/client/setup/test/index.js b/client/multi-currency-setup/test/index.js similarity index 100% rename from multi-currency/client/setup/test/index.js rename to client/multi-currency-setup/test/index.js diff --git a/client/multi-currency-setup/wizard/task-item.js b/client/multi-currency-setup/wizard/task-item.js new file mode 100644 index 00000000000..02a4c081feb --- /dev/null +++ b/client/multi-currency-setup/wizard/task-item.js @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +import React, { useContext } from 'react'; +import classNames from 'classnames'; +import { Icon, check } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import WizardTaskContext from '../../additional-methods-setup/wizard/task/context'; +import './task-item.scss'; + +const WizardTaskItem = ( { + children, + title, + index, + className, + visibleDescription, +} ) => { + const { isCompleted, isActive } = useContext( WizardTaskContext ); + + return ( +
  • +
    +
    +
    +
    + { index } +
    + +
    + { title } +
    + { visibleDescription && ! isActive && ( + + { visibleDescription } + + ) } +
    { children }
    +
  • + ); +}; + +export default WizardTaskItem; diff --git a/client/multi-currency-setup/wizard/task-item.scss b/client/multi-currency-setup/wizard/task-item.scss new file mode 100644 index 00000000000..9751a378ab6 --- /dev/null +++ b/client/multi-currency-setup/wizard/task-item.scss @@ -0,0 +1,17 @@ +.wcpay-wizard-task { + &__visible-description-element { + position: absolute; + margin-left: 40px; + margin-top: 0; + margin-bottom: 1em; + + &.is-muted-color { + color: $gray-700; + } + + .components-external-link svg { + width: 1em; + height: 1em; + } + } +} diff --git a/multi-currency/client/utils/missing-currencies-message/__tests__/index.test.js b/client/multi-currency/__tests__/missing-currencies-message.test.js similarity index 89% rename from multi-currency/client/utils/missing-currencies-message/__tests__/index.test.js rename to client/multi-currency/__tests__/missing-currencies-message.test.js index bd7fcff7840..ac74c4ee517 100644 --- a/multi-currency/client/utils/missing-currencies-message/__tests__/index.test.js +++ b/client/multi-currency/__tests__/missing-currencies-message.test.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { getMissingCurrenciesTooltipMessage } from 'multi-currency/utils/missing-currencies-message'; +import { getMissingCurrenciesTooltipMessage } from '../missing-currencies-message'; describe( 'getMissingCurrenciesTooltipMessage', () => { it( 'returns correct string with the given LPM label and currency list', () => { diff --git a/multi-currency/client/blocks/currency-switcher.js b/client/multi-currency/blocks/currency-switcher.js similarity index 99% rename from multi-currency/client/blocks/currency-switcher.js rename to client/multi-currency/blocks/currency-switcher.js index 75111f42768..5dee2d130be 100644 --- a/multi-currency/client/blocks/currency-switcher.js +++ b/client/multi-currency/blocks/currency-switcher.js @@ -2,10 +2,7 @@ /** * Internal dependencies */ -import { - useEnabledCurrencies, - useCurrencies, -} from 'multi-currency/interface/data'; +import { useEnabledCurrencies, useCurrencies } from 'wcpay/data'; /** * External dependencies diff --git a/multi-currency/client/context.js b/client/multi-currency/context.js similarity index 100% rename from multi-currency/client/context.js rename to client/multi-currency/context.js diff --git a/multi-currency/client/index.js b/client/multi-currency/index.js similarity index 91% rename from multi-currency/client/index.js rename to client/multi-currency/index.js index f4daf3b9a3a..a479c326914 100644 --- a/multi-currency/client/index.js +++ b/client/multi-currency/index.js @@ -7,8 +7,8 @@ import ReactDOM from 'react-dom'; /** * Internal dependencies */ -import MultiCurrencySettings from './settings/multi-currency'; -import SingleCurrencySettings from './settings/single-currency'; +import MultiCurrencySettings from './multi-currency-settings'; +import SingleCurrencySettings from './single-currency-settings'; import MultiCurrencySettingsContext from './context'; const MultiCurrencySettingsPage = () => { diff --git a/multi-currency/client/utils/missing-currencies-message/index.ts b/client/multi-currency/missing-currencies-message.ts similarity index 91% rename from multi-currency/client/utils/missing-currencies-message/index.ts rename to client/multi-currency/missing-currencies-message.ts index b6e68116479..514ccff973d 100644 --- a/multi-currency/client/utils/missing-currencies-message/index.ts +++ b/client/multi-currency/missing-currencies-message.ts @@ -6,7 +6,7 @@ import { sprintf, _n } from '@wordpress/i18n'; /** * Internal dependencies */ -import { formatListOfItems } from 'multi-currency/interface/functions'; +import { formatListOfItems } from 'wcpay/utils/format-list-of-items'; export const getMissingCurrenciesTooltipMessage = ( paymentMethodLabel: string, diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/delete-button.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/delete-button.js similarity index 92% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/delete-button.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/delete-button.js index ad99c04d327..cc58435ed22 100644 --- a/multi-currency/client/settings/multi-currency/enabled-currencies-list/delete-button.js +++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/delete-button.js @@ -6,12 +6,10 @@ import { __, sprintf } from '@wordpress/i18n'; import { Button, Icon } from '@wordpress/components'; import interpolateComponents from '@automattic/interpolate-components'; import { useCallback, useState } from '@wordpress/element'; -import { - ConfirmationModal, - PaymentMethodIcon, -} from 'multi-currency/interface/components'; -import CurrencyDeleteIllustration from 'multi-currency/components/currency-delete-illustration'; -import { paymentMethodsMap } from 'multi-currency/interface/assets'; +import ConfirmationModal from 'wcpay/components/confirmation-modal'; +import CurrencyDeleteIllustration from 'wcpay/components/currency-delete-illustration'; +import PaymentMethodIcon from 'wcpay/settings/payment-method-icon'; +import paymentMethodsMap from 'wcpay/payment-methods-map'; const DeleteButton = ( { code, label, symbol, onClick, className } ) => { const [ isConfirmationModalOpen, setIsConfirmationModalOpen ] = useState( diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/index.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/index.js similarity index 97% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/index.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/index.js index 00ac75e0c6e..8d08b90ef11 100644 --- a/multi-currency/client/settings/multi-currency/enabled-currencies-list/index.js +++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/index.js @@ -15,13 +15,13 @@ import { useCurrencies, useDefaultCurrency, useEnabledCurrencies, -} from 'multi-currency/data'; +} from 'wcpay/data'; import EnabledCurrenciesList from './list'; import EnabledCurrenciesListItem from './list-item'; import EnabledCurrenciesListItemPlaceholder from './list-item-placeholder'; import EnabledCurrenciesModal from './modal'; -import { SettingsSection } from 'multi-currency/interface/components'; +import SettingsSection from 'wcpay/settings/settings-section'; const EnabledCurrenciesSettingsDescription = () => { const LEARN_MORE_URL = diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/list-item-placeholder.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/list-item-placeholder.js similarity index 94% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/list-item-placeholder.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/list-item-placeholder.js index c29d2902a8b..6a44378e72a 100644 --- a/multi-currency/client/settings/multi-currency/enabled-currencies-list/list-item-placeholder.js +++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/list-item-placeholder.js @@ -3,7 +3,7 @@ * External dependencies */ import classNames from 'classnames'; -import { LoadableBlock } from 'multi-currency/interface/components'; +import { LoadableBlock } from 'wcpay/components/loadable'; const EnabledCurrenciesListItemPlaceholder = ( { isLoading } ) => { return ( diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/list-item.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/list-item.js similarity index 97% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/list-item.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/list-item.js index 0b8d0b14689..135e95a0a94 100644 --- a/multi-currency/client/settings/multi-currency/enabled-currencies-list/list-item.js +++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/list-item.js @@ -10,7 +10,7 @@ import { Button } from '@wordpress/components'; * Internal dependencies */ import DeleteButton from './delete-button'; -import MultiCurrencySettingsContext from 'multi-currency/context'; +import MultiCurrencySettingsContext from '../../context'; import { useContext } from 'react'; const EnabledCurrenciesListItem = ( { diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/list.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/list.js similarity index 100% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/list.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/list.js diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/modal-checkbox-list.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox-list.js similarity index 100% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/modal-checkbox-list.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox-list.js diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/modal-checkbox.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox.js similarity index 100% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/modal-checkbox.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox.js diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/modal.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/modal.js similarity index 97% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/modal.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/modal.js index 13610e78c17..619e51a01c5 100644 --- a/multi-currency/client/settings/multi-currency/enabled-currencies-list/modal.js +++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/modal.js @@ -13,11 +13,11 @@ import { useAvailableCurrencies, useEnabledCurrencies, useDefaultCurrency, -} from 'multi-currency/data'; +} from 'wcpay/data'; import EnabledCurrenciesModalCheckboxList from './modal-checkbox-list'; import EnabledCurrenciesModalCheckbox from './modal-checkbox'; -import { ConfirmationModal } from 'multi-currency/interface/components'; -import Search from 'multi-currency/components/search'; +import ConfirmationModal from 'wcpay/components/confirmation-modal'; +import Search from 'components/search'; import './style.scss'; // TODO: This works when saving, but list does not refresh. diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/style.scss b/client/multi-currency/multi-currency-settings/enabled-currencies-list/style.scss similarity index 100% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/style.scss rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/style.scss diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/test/__snapshots__/index.js.snap b/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap similarity index 100% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/test/__snapshots__/index.js.snap rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap diff --git a/multi-currency/client/settings/multi-currency/enabled-currencies-list/test/index.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/index.js similarity index 97% rename from multi-currency/client/settings/multi-currency/enabled-currencies-list/test/index.js rename to client/multi-currency/multi-currency-settings/enabled-currencies-list/test/index.js index fb4e89bd92c..38e15b1b04b 100644 --- a/multi-currency/client/settings/multi-currency/enabled-currencies-list/test/index.js +++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/index.js @@ -14,13 +14,13 @@ import { useCurrencies, useDefaultCurrency, useEnabledCurrencies, -} from 'multi-currency/data'; +} from 'wcpay/data'; -import MultiCurrencySettingsContext from 'multi-currency/context'; +import MultiCurrencySettingsContext from '../../../context'; -jest.mock( 'multi-currency/data', () => ( { - useAvailableCurrencies: jest.fn(), +jest.mock( 'wcpay/data', () => ( { useCurrencies: jest.fn(), + useAvailableCurrencies: jest.fn(), useDefaultCurrency: jest.fn(), useEnabledCurrencies: jest.fn(), } ) ); diff --git a/multi-currency/client/settings/multi-currency/index.js b/client/multi-currency/multi-currency-settings/index.js similarity index 87% rename from multi-currency/client/settings/multi-currency/index.js rename to client/multi-currency/multi-currency-settings/index.js index a2caf57151e..89ee0fd6361 100644 --- a/multi-currency/client/settings/multi-currency/index.js +++ b/client/multi-currency/multi-currency-settings/index.js @@ -6,7 +6,7 @@ import React from 'react'; /** * Internal dependencies */ -import { SettingsLayout } from 'multi-currency/interface/components'; +import SettingsLayout from '../../settings/settings-layout'; import EnabledCurrenciesList from './enabled-currencies-list'; import StoreSettings from './store-settings'; import './style.scss'; diff --git a/multi-currency/client/settings/multi-currency/store-settings/index.js b/client/multi-currency/multi-currency-settings/store-settings/index.js similarity index 92% rename from multi-currency/client/settings/multi-currency/store-settings/index.js rename to client/multi-currency/multi-currency-settings/store-settings/index.js index c858f91eebe..9e5be4eb9df 100644 --- a/multi-currency/client/settings/multi-currency/store-settings/index.js +++ b/client/multi-currency/multi-currency-settings/store-settings/index.js @@ -11,12 +11,10 @@ import { createInterpolateElement } from '@wordpress/element'; */ import './style.scss'; -import { useStoreSettings } from 'multi-currency/data'; -import { - LoadableBlock, - SettingsSection, -} from 'multi-currency/interface/components'; -import PreviewModal from 'multi-currency/components/preview-modal'; +import { useStoreSettings } from 'wcpay/data'; +import SettingsSection from 'wcpay/settings/settings-section'; +import { LoadableBlock } from 'wcpay/components/loadable'; +import PreviewModal from 'wcpay/multi-currency/preview-modal'; const StoreSettingsDescription = () => { const LEARN_MORE_URL = @@ -71,6 +69,8 @@ const StoreSettings = () => { const [ isPreviewModalOpen, setPreviewModalOpen ] = useState( false ); + const [ isDirty, setIsDirty ] = useState( false ); + useEffect( () => { if ( Object.keys( storeSettings ).length ) { setIsStorefrontSwitcherEnabledValue( @@ -88,10 +88,12 @@ const StoreSettings = () => { const handleIsAutomaticSwitchEnabledClick = ( value ) => { setIsAutomaticSwitchEnabledValue( value ); + setIsDirty( true ); }; const handleIsStorefrontSwitcherEnabledClick = ( value ) => { setIsStorefrontSwitcherEnabledValue( value ); + setIsDirty( true ); }; const saveSettings = () => { @@ -101,6 +103,7 @@ const StoreSettings = () => { isStorefrontSwitcherEnabledValue ); setIsSavingSettings( false ); + setIsDirty( false ); }; return ( @@ -192,7 +195,7 @@ const StoreSettings = () => { WooPayments
    diff --git a/client/onboarding/step.tsx b/client/onboarding/step.tsx index e827a06c107..ad353fc0996 100644 --- a/client/onboarding/step.tsx +++ b/client/onboarding/step.tsx @@ -2,7 +2,6 @@ * External dependencies */ import React from 'react'; -import { Icon, closeSmall } from '@wordpress/icons'; import ChevronLeft from 'gridicons/dist/chevron-left'; /** @@ -12,7 +11,7 @@ import { useStepperContext } from 'components/stepper'; import { OnboardingSteps } from './types'; import { useTrackAbandoned } from './tracking'; import strings from './strings'; -import Logo from 'assets/images/woopayments.svg'; +import WooLogo from 'assets/images/woo-logo.svg'; import './style.scss'; interface Props { @@ -41,17 +40,13 @@ const Step: React.FC< Props > = ( { name, children, showHeading = true } ) => { { strings.back } - WooPayments + Woo
    diff --git a/client/onboarding/strings.tsx b/client/onboarding/strings.tsx index 432e4aae21d..4792d923042 100644 --- a/client/onboarding/strings.tsx +++ b/client/onboarding/strings.tsx @@ -159,4 +159,5 @@ export default { }, continue: __( 'Continue', 'woocommerce-payments' ), back: __( 'Back', 'woocommerce-payments' ), + cancel: __( 'Cancel', 'woocommerce-payments' ), }; diff --git a/client/onboarding/style.scss b/client/onboarding/style.scss index eb0c84771f6..67a6351aab6 100644 --- a/client/onboarding/style.scss +++ b/client/onboarding/style.scss @@ -14,13 +14,20 @@ body.wcpay-onboarding__body { right: 0; height: 80px; padding-top: 8px; + padding-left: 8px; + padding-right: 8px; display: grid; grid-template-columns: 102px 1fr 102px; align-items: stretch; background-color: #fff; + border-bottom: 1px solid $gray-300; z-index: 10; &-button { + color: var( + --wp-components-color-accent, + $gutenberg-blueberry + ); cursor: pointer; background-color: transparent; border: none; @@ -30,6 +37,10 @@ body.wcpay-onboarding__body { font-size: 14px; .gridicons-chevron-left { + fill: var( + --wp-components-color-accent, + $gutenberg-blueberry + ); margin-right: 2px; } @@ -86,6 +97,16 @@ body.wcpay-onboarding__body { width: 100%; height: 40px; // Matching the updated WP Component. We can remove this when we update Components version. margin-top: $gap-large; + background: var( + --wp-components-color-accent, + $gutenberg-blueberry + ); // override the MOX CTA to use Gutenberg Blueberry. + &:hover { + background: var( + --wp-components-color-accent, + $gutenberg-blueberry-focus + ); + } } } diff --git a/client/overview/task-list/tasks/dispute-task.tsx b/client/overview/task-list/tasks/dispute-task.tsx index 235b92696b9..fdf48c03d78 100644 --- a/client/overview/task-list/tasks/dispute-task.tsx +++ b/client/overview/task-list/tasks/dispute-task.tsx @@ -11,7 +11,7 @@ import { getHistory } from '@woocommerce/navigation'; */ import type { TaskItemProps } from '../types'; import type { CachedDispute } from 'wcpay/types/disputes'; -import { formatCurrency } from 'multi-currency/interface/functions'; +import { formatCurrency } from 'wcpay/utils/currency'; import { getAdminUrl } from 'wcpay/utils'; import { recordEvent } from 'tracks'; import { isDueWithin } from 'wcpay/disputes/utils'; diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 01f87431274..ccc0764f38b 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -16,7 +16,7 @@ import HelpOutlineIcon from 'gridicons/dist/help-outline'; */ import type { Dispute } from 'wcpay/types/disputes'; import { ChargeBillingDetails } from 'wcpay/types/charges'; -import { formatExplicitCurrency } from 'multi-currency/interface/functions'; +import { formatExplicitCurrency } from 'utils/currency'; import { ClickTooltip } from 'wcpay/components/tooltip'; import { getDisputeFeeFormatted } from 'wcpay/disputes/utils'; import DisputeDueByDate from './dispute-due-by-date'; diff --git a/client/payment-details/dispute-details/dispute-summary-row.tsx b/client/payment-details/dispute-details/dispute-summary-row.tsx index 0a43cb223e0..ac6dada265e 100644 --- a/client/payment-details/dispute-details/dispute-summary-row.tsx +++ b/client/payment-details/dispute-details/dispute-summary-row.tsx @@ -14,7 +14,7 @@ import { dateI18n } from '@wordpress/date'; */ import type { Dispute } from 'wcpay/types/disputes'; import { HorizontalList } from 'wcpay/components/horizontal-list'; -import { formatExplicitCurrency } from 'multi-currency/interface/functions'; +import { formatExplicitCurrency } from 'wcpay/utils/currency'; import { reasons } from 'wcpay/disputes/strings'; import { formatStringValue } from 'wcpay/utils'; import { ClickTooltip } from 'wcpay/components/tooltip'; diff --git a/client/payment-details/readers/index.js b/client/payment-details/readers/index.js index 193ee236288..9ff428c94fe 100644 --- a/client/payment-details/readers/index.js +++ b/client/payment-details/readers/index.js @@ -19,10 +19,7 @@ import { useCardReaderStats } from 'wcpay/data'; import { TestModeNotice } from 'components/test-mode-notice'; import Page from 'components/page'; import DownloadButton from 'components/download-button'; -import { - formatExplicitCurrency, - formatExportAmount, -} from 'multi-currency/interface/functions'; +import { formatExplicitCurrency, formatExportAmount } from 'utils/currency'; const PaymentCardReaderChargeDetails = ( props ) => { const { readers, chargeError, isLoading } = useCardReaderStats( diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx index 4e9d9559a4b..4350d609cd7 100644 --- a/client/payment-details/summary/index.tsx +++ b/client/payment-details/summary/index.tsx @@ -37,10 +37,7 @@ import { HorizontalList, HorizontalListItem } from 'components/horizontal-list'; import Loadable, { LoadableBlock } from 'components/loadable'; import riskMappings from 'components/risk-level/strings'; import OrderLink from 'components/order-link'; -import { - formatCurrency, - formatExplicitCurrency, -} from 'multi-currency/interface/functions'; +import { formatCurrency, formatExplicitCurrency } from 'utils/currency'; import CustomerLink from 'components/customer-link'; import { ClickTooltip } from 'components/tooltip'; import DisputeStatusChip from 'components/dispute-status-chip'; diff --git a/client/payment-details/timeline/map-events.js b/client/payment-details/timeline/map-events.js index 64bc74d91d2..1cb14d6aa7a 100644 --- a/client/payment-details/timeline/map-events.js +++ b/client/payment-details/timeline/map-events.js @@ -26,7 +26,7 @@ import { formatCurrency, formatFX, formatExplicitCurrency, -} from 'multi-currency/interface/functions'; +} from 'utils/currency'; import { formatFee } from 'utils/fees'; import { getAdminUrl } from 'wcpay/utils'; import { ShieldIcon } from 'wcpay/icons'; diff --git a/client/settings/express-checkout-settings/general-payment-request-button-settings.js b/client/settings/express-checkout-settings/general-payment-request-button-settings.js index f6e401ff9fb..d20402e6f38 100644 --- a/client/settings/express-checkout-settings/general-payment-request-button-settings.js +++ b/client/settings/express-checkout-settings/general-payment-request-button-settings.js @@ -199,7 +199,7 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => { className="payment-method-settings__cta-selection" label={ __( 'Call to action', 'woocommerce-payments' ) } help={ __( - 'Select a button label that fits best wit the flow of purchase or payment experience on your store.', + 'Select a button label that fits best with the flow of purchase or payment experience on your store.', 'woocommerce-payments' ) } hideLabelFromVision diff --git a/client/settings/express-checkout-settings/test/index.js b/client/settings/express-checkout-settings/test/index.js index dd1c5149ea1..4e182f79fd3 100644 --- a/client/settings/express-checkout-settings/test/index.js +++ b/client/settings/express-checkout-settings/test/index.js @@ -23,7 +23,7 @@ jest.mock( '../../../data', () => ( { useWooPayEnabledSettings: jest.fn().mockReturnValue( [ true, jest.fn() ] ), useWooPayCustomMessage: jest.fn().mockReturnValue( [ 'test', jest.fn() ] ), useWooPayStoreLogo: jest.fn().mockReturnValue( [ 'test', jest.fn() ] ), - usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ), + usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'default' ] ), usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ), usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ), usePaymentRequestButtonBorderRadius: jest.fn().mockReturnValue( [ 4 ] ), diff --git a/client/settings/express-checkout-settings/test/payment-request-settings.test.js b/client/settings/express-checkout-settings/test/payment-request-settings.test.js index 4bc3a0b6e12..129d657444e 100644 --- a/client/settings/express-checkout-settings/test/payment-request-settings.test.js +++ b/client/settings/express-checkout-settings/test/payment-request-settings.test.js @@ -23,7 +23,7 @@ import { jest.mock( '../../../data', () => ( { usePaymentRequestEnabledSettings: jest.fn(), usePaymentRequestLocations: jest.fn(), - usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ), + usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'default' ] ), usePaymentRequestButtonBorderRadius: jest.fn().mockReturnValue( [ 4 ] ), usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ), usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ), @@ -148,7 +148,7 @@ describe( 'PaymentRequestSettings', () => { screen.getByRole( 'combobox', { name: 'Call to action', } ) - ).toHaveValue( 'buy' ); + ).toHaveValue( 'default' ); expect( screen.getByLabelText( 'Small (40 px)' ) ).toBeChecked(); expect( screen.getByLabelText( /Dark/ ) ).toBeChecked(); } ); @@ -189,7 +189,7 @@ describe( 'PaymentRequestSettings', () => { const setButtonThemeMock = jest.fn(); usePaymentRequestButtonType.mockReturnValue( [ - 'buy', + 'default', setButtonTypeMock, ] ); usePaymentRequestButtonSize.mockReturnValue( [ diff --git a/client/settings/express-checkout-settings/test/woopay-settings.test.js b/client/settings/express-checkout-settings/test/woopay-settings.test.js index 2fcab112599..d7ce1018146 100644 --- a/client/settings/express-checkout-settings/test/woopay-settings.test.js +++ b/client/settings/express-checkout-settings/test/woopay-settings.test.js @@ -93,7 +93,7 @@ describe( 'WooPaySettings', () => { ); usePaymentRequestButtonType.mockReturnValue( - getMockPaymentRequestButtonType( [ 'buy' ], jest.fn() ) + getMockPaymentRequestButtonType( [ 'default' ], jest.fn() ) ); usePaymentRequestButtonSize.mockReturnValue( diff --git a/client/settings/fraud-protection/advanced-settings/cards/order-items-threshold.tsx b/client/settings/fraud-protection/advanced-settings/cards/order-items-threshold.tsx index 2dd0e96ea8b..31b4c7be8b6 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/order-items-threshold.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/order-items-threshold.tsx @@ -37,6 +37,7 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp protectionSettingsUI, setProtectionSettingsUI, setProtectionSettingsChanged, + setIsDirty, } = useContext( FraudPreventionSettingsContext ); const settingUI = useMemo( @@ -97,7 +98,10 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp placeholder={ '0' } value={ minItemsCount } type="number" - onChange={ setMinItemsCount } + onChange={ ( value ) => { + setMinItemsCount( value ); + setIsDirty( true ); + } } onKeyDown={ ( e ) => /^[+-.,e]$/m.test( e.key ) && e.preventDefault() } @@ -121,7 +125,10 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp placeholder={ '0' } type="number" value={ maxItemsCount } - onChange={ setMaxItemsCount } + onChange={ ( value ) => { + setMaxItemsCount( value ); + setIsDirty( true ); + } } onKeyDown={ ( e ) => /^[+-.,e]$/m.test( e.key ) && e.preventDefault() } diff --git a/client/settings/fraud-protection/advanced-settings/cards/purchase-price-threshold.tsx b/client/settings/fraud-protection/advanced-settings/cards/purchase-price-threshold.tsx index d99b3b7ca4b..5c47153e0fb 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/purchase-price-threshold.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/purchase-price-threshold.tsx @@ -15,7 +15,7 @@ import AmountInput from 'wcpay/components/amount-input'; /** * Internal dependencies */ -import { getCurrency } from 'multi-currency/interface/functions'; +import { getCurrency } from 'utils/currency'; import FraudProtectionRuleCard from '../rule-card'; import FraudProtectionRuleToggle from '../rule-toggle'; import FraudProtectionRuleDescription from '../rule-description'; @@ -56,6 +56,7 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo protectionSettingsUI, setProtectionSettingsUI, setProtectionSettingsChanged, + setIsDirty, } = useContext( FraudPreventionSettingsContext ); const settingUI = useMemo( @@ -111,7 +112,10 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo prefix={ currencySymbol } placeholder={ '0.00' } value={ minAmount.toString() } - onChange={ ( val ) => setMinAmount( Number( val ) ) } + onChange={ ( val ) => { + setMinAmount( Number( val ) ); + setIsDirty( true ); + } } help={ __( 'Leave blank for no limit', 'woocommerce-payments' @@ -130,7 +134,10 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo prefix={ currencySymbol } placeholder={ '0.00' } value={ maxAmount.toString() } - onChange={ ( val ) => setMaxAmount( Number( val ) ) } + onChange={ ( val ) => { + setMaxAmount( Number( val ) ); + setIsDirty( true ); + } } help={ __( 'Leave blank for no limit', 'woocommerce-payments' diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/address-mismatch.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/address-mismatch.test.tsx index 09c4133ae55..8162cd07f1b 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/address-mismatch.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/address-mismatch.test.tsx @@ -34,6 +34,7 @@ describe( 'Address mismatch card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; test( 'renders correctly', () => { settings.address_mismatch.enabled = false; diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/avs-mismatch.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/avs-mismatch.test.tsx index dd917d3ca2d..b2ae2de8e27 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/avs-mismatch.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/avs-mismatch.test.tsx @@ -42,6 +42,7 @@ describe( 'AVS mismatch card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; const { container } = render( @@ -70,6 +71,7 @@ describe( 'AVS mismatch card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; const { container } = render( diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/cvc-verification.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/cvc-verification.test.tsx index e1b1e76d4aa..dfbbbc47ad5 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/cvc-verification.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/cvc-verification.test.tsx @@ -42,6 +42,7 @@ describe( 'CVC verification card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; const { container } = render( @@ -73,6 +74,7 @@ describe( 'CVC verification card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; const { container } = render( diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx index f8e99540685..6a36f94b4ee 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx @@ -43,6 +43,8 @@ describe( 'International IP address card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + isDirty: false, + setIsDirty: jest.fn(), }; global.wcSettings = { admin: { diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/ip-address-mismatch.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/ip-address-mismatch.test.tsx index 8c091a59fdc..b102364ad75 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/ip-address-mismatch.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/ip-address-mismatch.test.tsx @@ -40,6 +40,7 @@ describe( 'International billing address card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; global.wcSettings = { admin: { diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/order-items-threshold.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/order-items-threshold.test.tsx index 3762aa9db47..268845ba776 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/order-items-threshold.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/order-items-threshold.test.tsx @@ -39,6 +39,7 @@ describe( 'Order items threshold card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; test( 'renders correctly', () => { const { container } = render( diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx index 5399a7d2ba0..23f12a04d51 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx @@ -67,6 +67,7 @@ describe( 'Purchase price threshold card', () => { setProtectionSettingsUI: setSettings, protectionSettingsChanged: false, setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; test( 'renders correctly', () => { const { container } = render( diff --git a/client/settings/fraud-protection/advanced-settings/context.ts b/client/settings/fraud-protection/advanced-settings/context.ts index ade59fc45ce..aa708fa36d0 100644 --- a/client/settings/fraud-protection/advanced-settings/context.ts +++ b/client/settings/fraud-protection/advanced-settings/context.ts @@ -9,6 +9,7 @@ const FraudPreventionSettingsContext = createContext( { setProtectionSettingsUI: () => null, protectionSettingsChanged: false, setProtectionSettingsChanged: () => false, + setIsDirty: () => null, } as FraudPreventionSettingsContextType ); export default FraudPreventionSettingsContext; diff --git a/client/settings/fraud-protection/advanced-settings/index.tsx b/client/settings/fraud-protection/advanced-settings/index.tsx index f18b70a624d..881a09fdb90 100644 --- a/client/settings/fraud-protection/advanced-settings/index.tsx +++ b/client/settings/fraud-protection/advanced-settings/index.tsx @@ -102,6 +102,8 @@ const SaveFraudProtectionSettingsButton: React.FC = ( { children } ) => { }; const FraudProtectionAdvancedSettingsPage: React.FC = () => { + const [ isDirty, setIsDirty ] = useState( false ); + const { saveSettings, isLoading, isSaving } = useSettings() as SettingsHook; const cardObserver = useRef< IntersectionObserver >(); @@ -327,7 +329,8 @@ const FraudProtectionAdvancedSettingsPage: React.FC = () => { disabled={ isSaving || isLoading || - 'error' === advancedFraudProtectionSettings + 'error' === advancedFraudProtectionSettings || + ! isDirty } > { __( 'Save Changes', 'woocommerce-payments' ) } @@ -341,6 +344,7 @@ const FraudProtectionAdvancedSettingsPage: React.FC = () => { setProtectionSettingsUI, protectionSettingsChanged, setProtectionSettingsChanged, + setIsDirty, } } > diff --git a/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx b/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx index ef18e7cd9b5..85e32790595 100644 --- a/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx +++ b/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx @@ -58,6 +58,7 @@ const FraudProtectionRuleToggle: React.FC< FraudProtectionRuleToggleProps > = ( protectionSettingsUI, setProtectionSettingsUI, setProtectionSettingsChanged, + setIsDirty, } = useContext( FraudPreventionSettingsContext ); const { isFRTReviewFeatureActive } = wcpaySettings; @@ -100,6 +101,7 @@ const FraudProtectionRuleToggle: React.FC< FraudProtectionRuleToggleProps > = ( const handleToggleChange = () => { setToggleState( ( value ) => ! value ); + setIsDirty( true ); }; if ( ! protectionSettingsUI ) { diff --git a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap b/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap index d0180ec7b4d..dddbf129bdb 100644 --- a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap +++ b/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap @@ -4743,6 +4743,7 @@ exports[`Advanced fraud protection settings renders correctly 1`] = `
    ); + const avsThresholdToggle = await container.findByLabelText( + 'Block transactions for mismatched AVS' + ); + avsThresholdToggle.click(); + avsThresholdToggle.click(); const [ saveButton ] = await container.findAllByText( 'Save Changes' ); saveButton.click(); expect( mockUseSettings().saveSettings.mock.calls.length ).toBe( 0 ); @@ -285,6 +295,7 @@ describe( 'Advanced fraud protection settings', () => { saveSettings: jest.fn(), isSaving: false, isLoading: false, + isDirty: false, } ); mockUseAdvancedFraudProtectionSettings.mockReturnValue( [ defaultSettings, @@ -298,6 +309,12 @@ describe( 'Advanced fraud protection settings', () => { ); + + const avsThresholdToggle = await container.findByLabelText( + 'Block transactions for mismatched AVS' + ); + avsThresholdToggle.click(); + avsThresholdToggle.click(); const [ saveButton ] = await container.findAllByText( 'Save Changes' ); saveButton.click(); await waitFor( () => { @@ -345,6 +362,7 @@ describe( 'Advanced fraud protection settings', () => { isSaving: false, saveSettings: jest.fn(), isLoading: false, + isDirty: false, } ); mockUseAdvancedFraudProtectionSettings.mockReturnValue( [ defaultSettings, @@ -358,6 +376,12 @@ describe( 'Advanced fraud protection settings', () => { ); + + const avsThresholdToggle = await container.findByLabelText( + 'Block transactions for mismatched AVS' + ); + avsThresholdToggle.click(); + avsThresholdToggle.click(); const [ saveButton ] = await container.findAllByText( 'Save Changes' ); saveButton.click(); await waitFor( () => { @@ -409,6 +433,7 @@ describe( 'Advanced fraud protection settings', () => { saveSettings: jest.fn(), isSaving: false, isLoading: false, + isDirty: false, } ); mockUseAdvancedFraudProtectionSettings.mockReturnValue( [ defaultSettings, @@ -422,6 +447,12 @@ describe( 'Advanced fraud protection settings', () => { ); + + const avsThresholdToggle = await container.findByLabelText( + 'Block transactions for mismatched AVS' + ); + avsThresholdToggle.click(); + avsThresholdToggle.click(); const [ saveButton ] = await container.findAllByText( 'Save Changes' ); saveButton.click(); await waitFor( () => { @@ -456,6 +487,7 @@ describe( 'Advanced fraud protection settings', () => { isSaving: false, saveSettings: jest.fn(), isLoading: false, + isDirty: false, } ); mockUseAdvancedFraudProtectionSettings.mockReturnValue( [ defaultSettings, @@ -469,7 +501,13 @@ describe( 'Advanced fraud protection settings', () => { ); + const avsThresholdToggle = await container.findByLabelText( + 'Block transactions for mismatched AVS' + ); + avsThresholdToggle.click(); + avsThresholdToggle.click(); const [ saveButton ] = await container.findAllByText( 'Save Changes' ); + saveButton.click(); await waitFor( () => { expect( mockUseSettings().saveSettings.mock.calls.length ).toBe( diff --git a/client/settings/fraud-protection/advanced-settings/test/rule-toggle.test.tsx b/client/settings/fraud-protection/advanced-settings/test/rule-toggle.test.tsx index f22eebbf13c..d2476015479 100644 --- a/client/settings/fraud-protection/advanced-settings/test/rule-toggle.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/test/rule-toggle.test.tsx @@ -26,6 +26,7 @@ interface mockContext { protectionSettingsChanged: boolean; setProtectionSettingsUI: jest.Mock; setProtectionSettingsChanged: jest.Mock; + setIsDirty: jest.Mock; } describe( 'Fraud protection rule toggle tests', () => { @@ -43,6 +44,7 @@ describe( 'Fraud protection rule toggle tests', () => { protectionSettingsChanged: false, setProtectionSettingsUI: jest.fn(), setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; beforeEach( () => { @@ -56,6 +58,7 @@ describe( 'Fraud protection rule toggle tests', () => { protectionSettingsChanged: false, setProtectionSettingsUI: jest.fn(), setProtectionSettingsChanged: jest.fn(), + setIsDirty: jest.fn(), }; } ); diff --git a/client/settings/fraud-protection/interfaces.ts b/client/settings/fraud-protection/interfaces.ts index 17fcf415457..7ad040bad87 100644 --- a/client/settings/fraud-protection/interfaces.ts +++ b/client/settings/fraud-protection/interfaces.ts @@ -36,6 +36,7 @@ export interface FraudPreventionSettingsContextType { setProtectionSettingsUI: ( settings: ProtectionSettingsUI ) => void; protectionSettingsChanged: boolean; setProtectionSettingsChanged: Dispatch< SetStateAction< boolean > >; + setIsDirty: Dispatch< SetStateAction< boolean > >; } export interface FraudProtectionSettingsSingleCheck { diff --git a/client/settings/fraud-protection/test/index.test.tsx b/client/settings/fraud-protection/test/index.test.tsx index e7650195cde..0719a904c78 100644 --- a/client/settings/fraud-protection/test/index.test.tsx +++ b/client/settings/fraud-protection/test/index.test.tsx @@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data'; import FraudProtection from '..'; import { useCurrentProtectionLevel, + useCurrencies, useAdvancedFraudProtectionSettings, useSettings, } from 'wcpay/data'; @@ -28,6 +29,7 @@ jest.mock( 'wcpay/data', () => ( { useAdvancedFraudProtectionSettings: jest.fn(), useCurrentProtectionLevel: jest.fn(), useSettings: jest.fn(), + useCurrencies: jest.fn(), } ) ); jest.mock( '@wordpress/data', () => ( { @@ -42,6 +44,10 @@ const mockUseCurrentProtectionLevel = useCurrentProtectionLevel as jest.MockedFu () => [ string, ( level: string ) => void ] >; +const mockUseCurrencies = useCurrencies as jest.MockedFunction< + () => { currencies: Record< string, any >; isLoading: boolean } +>; + const mockUseAdvancedFraudProtectionSettings = useAdvancedFraudProtectionSettings as jest.MockedFunction< () => [ any[] | string, ( settings: string ) => void ] >; @@ -50,6 +56,7 @@ const mockUseSettings = useSettings as jest.MockedFunction< () => { settings: any; isLoading: boolean; + isDirty: boolean; saveSettings: () => void; isSaving: boolean; } @@ -63,6 +70,16 @@ describe( 'FraudProtection', () => { 'standard', jest.fn(), ] ); + mockUseCurrencies.mockReturnValue( { + isLoading: false, + currencies: { + available: { + EUR: { name: 'Euro', symbol: '€' }, + USD: { name: 'US Dollar', symbol: '$' }, + PLN: { name: 'Polish złoty', symbol: 'zł' }, + }, + }, + } ); mockUseAdvancedFraudProtectionSettings.mockReturnValue( [ [], @@ -71,6 +88,7 @@ describe( 'FraudProtection', () => { mockUseSettings.mockReturnValue( { settings: {}, isSaving: false, + isDirty: false, saveSettings: jest.fn(), isLoading: false, } ); diff --git a/client/settings/payment-methods-list/index.js b/client/settings/payment-methods-list/index.js index 997c2bb9874..99a34b40daf 100644 --- a/client/settings/payment-methods-list/index.js +++ b/client/settings/payment-methods-list/index.js @@ -22,7 +22,7 @@ import { upeCapabilityStatuses } from 'wcpay/additional-methods-setup/constants' import ConfirmPaymentMethodActivationModal from './activation-modal'; import ConfirmPaymentMethodDeleteModal from './delete-modal'; import CapabilityRequestNotice from './capability-request'; -import { getMissingCurrenciesTooltipMessage } from 'multi-currency/interface/functions'; +import { getMissingCurrenciesTooltipMessage } from 'wcpay/multi-currency/missing-currencies-message'; const PaymentMethodsList = ( { methodIds } ) => { const [ enabledMethodIds ] = useEnabledPaymentMethodIds(); diff --git a/client/settings/payment-methods-section/__tests__/payment-methods-section.test.js b/client/settings/payment-methods-section/__tests__/payment-methods-section.test.js index d64f2ded639..2e1f1da1538 100644 --- a/client/settings/payment-methods-section/__tests__/payment-methods-section.test.js +++ b/client/settings/payment-methods-section/__tests__/payment-methods-section.test.js @@ -35,6 +35,8 @@ jest.mock( '@woocommerce/components', () => { jest.mock( 'wcpay/data', () => ( { useEnabledPaymentMethodIds: jest.fn(), useGetAvailablePaymentMethodIds: jest.fn(), + useCurrencies: jest.fn().mockReturnValue( { isLoading: true } ), + useEnabledCurrencies: jest.fn().mockReturnValue( {} ), useGetPaymentMethodStatuses: jest.fn().mockReturnValue( {} ), useManualCapture: jest.fn(), useSelectedPaymentMethod: jest.fn(), @@ -43,16 +45,6 @@ jest.mock( 'wcpay/data', () => ( { useSettings: jest.fn().mockReturnValue( { isLoading: false } ), } ) ); -jest.mock( 'multi-currency/interface/data', () => ( { - useCurrencies: jest.fn().mockReturnValue( { isLoading: true } ), - useEnabledCurrencies: jest.fn().mockReturnValue( {} ), -} ) ); - -jest.mock( 'multi-currency/interface/data', () => ( { - useCurrencies: jest.fn().mockReturnValue( { isLoading: true } ), - useEnabledCurrencies: jest.fn().mockReturnValue( {} ), -} ) ); - jest.mock( '@wordpress/data', () => ( { useDispatch: jest .fn() diff --git a/client/settings/save-settings-section/index.js b/client/settings/save-settings-section/index.js index 28083c94348..17f90da54de 100644 --- a/client/settings/save-settings-section/index.js +++ b/client/settings/save-settings-section/index.js @@ -16,7 +16,7 @@ import './style.scss'; import WooPayDisableFeedback from '../woopay-disable-feedback'; const SaveSettingsSection = ( { disabled = false } ) => { - const { saveSettings, isSaving, isLoading } = useSettings(); + const { saveSettings, isSaving, isLoading, isDirty } = useSettings(); const settings = useGetSettings(); // Keep the inital value of is_payment_request_enabled @@ -111,7 +111,7 @@ const SaveSettingsSection = ( { disabled = false } ) => {