diff --git a/changelog/update-9971-simplify-localization-csv-export b/changelog/update-9971-simplify-localization-csv-export new file mode 100644 index 00000000000..dac5219b344 --- /dev/null +++ b/changelog/update-9971-simplify-localization-csv-export @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Simplify localization of CSV exports to use global site language settings from WP Admin diff --git a/client/components/csv-export-modal/index.tsx b/client/components/csv-export-modal/index.tsx deleted file mode 100644 index 2cddf0908ab..00000000000 --- a/client/components/csv-export-modal/index.tsx +++ /dev/null @@ -1,227 +0,0 @@ -/** @format */ -/** - * External dependencies - */ -import React, { useState } from 'react'; -import { __ } from '@wordpress/i18n'; -import { - Button, - SelectControl, - CheckboxControl, - ExternalLink, -} from '@wordpress/components'; -import interpolateComponents from '@automattic/interpolate-components'; -import { useDispatch } from '@wordpress/data'; -import DomainsIcon from 'gridicons/dist/domains'; - -/** - * Internal dependencies - */ -import { ReportingExportLanguageHook } from 'wcpay/settings/reporting-settings/interfaces'; -import { useReportingExportLanguage, useSettings } from 'wcpay/data'; -import ConfirmationModal from 'wcpay/components/confirmation-modal'; -import { getAdminUrl, getExportLanguageOptions } from 'wcpay/utils'; -import './styles.scss'; - -interface CSVExportModalProps { - totalItems: number; - exportType: 'transactions' | 'deposits' | 'disputes'; - onClose: () => void; - onSubmit: ( language: string ) => void; -} - -interface SettingsHook { - isSaving: boolean; - isLoading: boolean; - saveSettings: () => void; -} - -const CVSExportModal: React.FunctionComponent< CSVExportModalProps > = ( { - totalItems, - exportType, - onClose, - onSubmit, -} ) => { - const { updateOptions } = useDispatch( 'wc/admin/options' ); - const { saveSettings } = useSettings() as SettingsHook; - - const [ - exportLanguage, - updateExportLanguage, - ] = useReportingExportLanguage() as ReportingExportLanguageHook; - - const [ modalLanguage, setModalLanguage ] = useState( exportLanguage ); - const [ modalRemember, setModalRemember ] = useState( true ); - - const onDownload = async () => { - onSubmit( modalLanguage ); - - // If the Remember checkbox is checked, dismiss the modal. - if ( modalRemember ) { - await updateOptions( { - wcpay_reporting_export_modal_dismissed: modalRemember, - } ); - - updateExportLanguage( modalLanguage ); - saveSettings(); - - wcpaySettings.reporting.exportModalDismissed = true; - } - }; - - const buttonContent = ( - <> - - - - ); - - const getModalTitle = ( type: string ): string => { - switch ( type ) { - case 'transactions': - return __( - 'Export transactions report', - 'woocommerce-payments' - ); - case 'deposits': - return __( 'Export deposits report', 'woocommerce-payments' ); - case 'disputes': - return __( 'Export disputes report', 'woocommerce-payments' ); - default: - return __( 'Export report', 'woocommerce-payments' ); - } - }; - - const getExportNumberText = ( type: string ): string => { - switch ( type ) { - case 'transactions': - return __( - 'Exporting {{total/}} transactions…', - 'woocommerce-payments' - ); - case 'deposits': - return __( - 'Exporting {{total/}} deposits…', - 'woocommerce-payments' - ); - case 'disputes': - return __( - 'Exporting {{total/}} disputes…', - 'woocommerce-payments' - ); - default: - return __( - 'Exporting {{total/}} rows…', - 'woocommerce-payments' - ); - } - }; - - const getExportLabel = ( type: string ): string => { - switch ( type ) { - case 'transactions': - return __( - 'Export transactions report in', - 'woocommerce-payments' - ); - case 'deposits': - return __( - 'Export deposits report in', - 'woocommerce-payments' - ); - case 'disputes': - return __( - 'Export disputes report in', - 'woocommerce-payments' - ); - default: - return __( 'Export report in', 'woocommerce-payments' ); - } - }; - - const handleExportLanguageChange = ( language: string ) => { - setModalLanguage( language ); - }; - - const handleExportLanguageRememberChange = ( value: boolean ) => { - setModalRemember( value ); - }; - - return ( - { - return false; - } } - > -
- { interpolateComponents( { - mixedString: getExportNumberText( exportType ), - components: { - total: { totalItems }, - }, - } ) } -
- -
-

Settings

- -
-
- - - { getExportLabel( exportType ) } - -
-
- -
-
- -
- - ), - }, - } ) } - checked={ modalRemember } - onChange={ handleExportLanguageRememberChange } - data-testid="export-modal-remember" - /> -
-
-
- ); -}; - -export default CVSExportModal; diff --git a/client/components/csv-export-modal/styles.scss b/client/components/csv-export-modal/styles.scss deleted file mode 100644 index 600a6d2a18a..00000000000 --- a/client/components/csv-export-modal/styles.scss +++ /dev/null @@ -1,51 +0,0 @@ -.reporting-export-modal { - .components-modal__header { - border-bottom: 1px solid #dcdcde !important; - } - - .wcpay-confirmation-modal__footer { - .is-secondary { - box-shadow: none; - } - } - - &__items-number { - border-bottom: 1px solid #dcdcde; - padding: 15px 0; - } - - &__settings { - @include breakpoint( '>660px' ) { - min-width: 500px; - } - - &--language { - display: flex; - flex-wrap: wrap; - } - - &--language-label { - flex: 1 1 200px; - display: flex; - - .domains-icon { - width: 16px; - margin: 7px 0; - } - - .export-label { - padding: 10px 0 0 8px; - } - } - - &--language-select { - flex: 1 1 200px; - } - - &--remember { - p { - padding-top: 0 !important; - } - } - } -} diff --git a/client/components/csv-export-modal/test/__snapshots__/index.test.tsx.snap b/client/components/csv-export-modal/test/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 251b5f8438f..00000000000 --- a/client/components/csv-export-modal/test/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`RefundModal it renders correctly 1`] = ` -