- { __( '', 'woocommerce-gateway-stripe' ) }
{ interpolateComponents( {
mixedString: __(
"Optimize your checkout experience for more sales by dynamically displaying the most relevant payment methods you've enabled for each customer. {{docLink}}Learn more{{/docLink}} about Stripe's Optimized Checkout Suite.",
diff --git a/client/settings/payment-settings/promotional-banner/stripe-tax-banner.js b/client/settings/payment-settings/promotional-banner/stripe-tax-banner.js
new file mode 100644
index 0000000000..174efafd43
--- /dev/null
+++ b/client/settings/payment-settings/promotional-banner/stripe-tax-banner.js
@@ -0,0 +1,109 @@
+import { React } from 'react';
+import styled from '@emotion/styled';
+import interpolateComponents from '@automattic/interpolate-components';
+import { __ } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
+import CardBody from 'wcstripe/settings/card-body';
+import illustration from 'wcstripe/settings/payment-settings/promotional-banner/illustrations/stripe-tax.svg';
+import {
+ BannerIllustration,
+ ButtonsRow,
+ CardColumn,
+ CardInner,
+ DismissButton,
+ MainCTALink,
+} from 'wcstripe/settings/payment-settings/promotional-banner/banner-layout';
+import { recordEvent } from 'wcstripe/tracking';
+import { ExternalLink } from '@wordpress/components';
+
+const BannerIllustrationStripeTax = styled( BannerIllustration )`
+ width: 80px;
+ margin: 10px;
+
+ @media ( min-width: 600px ) {
+ margin-bottom: -30px;
+ }
+`;
+
+const ButtonsRowStripeTax = styled( ButtonsRow )`
+ @media ( min-width: 600px ) {
+ margin-bottom: 0.7em;
+ }
+`;
+
+const ColumnIllustration = styled( CardColumn )`
+ @media ( max-width: 599px ) {
+ text-align: center;
+ }
+`;
+
+const TitleStripeTax = styled.h4`
+ margin-top: 0.6em !important;
+ font-weight: 500;
+`;
+
+export const StripeTaxBanner = ( { setShowPromotionalBanner } ) => {
+ const handleBannerDismiss = () => {
+ apiFetch( {
+ path: '/wc/v3/wc_stripe/settings/notice',
+ method: 'POST',
+ data: { wc_stripe_show_stripe_tax_banner: 'no' },
+ } ).finally( () => {
+ setShowPromotionalBanner( false );
+ } );
+ };
+
+ const handleButtonClick = () => {
+ recordEvent( 'wcstripe_stripe_tax_banner_button_click', {} );
+ window.open( 'https://woocommerce.com/products/stripe-tax/', '_blank' );
+ };
+
+ return (
+
+
+
+
+ { __(
+ 'Automate tax compliance with Stripe Tax',
+ 'woocommerce-gateway-stripe'
+ ) }
+
+
+ { interpolateComponents( {
+ mixedString: __(
+ 'Automatically calculate and collect sales tax, value-added tax (VAT), and goods and services tax (GST) wherever you sell. {{docLink}}Learn more{{/docLink}} about how Stripe Tax keeps you compliant.',
+ 'woocommerce-gateway-stripe'
+ ),
+ components: {
+ docLink: (
+
+ ),
+ },
+ } ) }
+
+
+
+
+
+
+
+
+ { __( 'Get Stripe Tax', 'woocommerce-gateway-stripe' ) }
+
+
+ { __( 'Dismiss', 'woocommerce-gateway-stripe' ) }
+
+
+
+ );
+};
diff --git a/client/settings/settings-manager/index.js b/client/settings/settings-manager/index.js
index ebc62c6540..00db4997e5 100644
--- a/client/settings/settings-manager/index.js
+++ b/client/settings/settings-manager/index.js
@@ -18,6 +18,7 @@ import { getPromotionalBannerType } from 'wcstripe/settings/payment-settings/pro
import {
BNPL_PROMOTION_BANNER,
OC_PROMOTION_BANNER,
+ STRIPE_TAX_BANNER,
} from 'wcstripe/settings/payment-settings/constants';
const StyledTabPanel = styled( TabPanel )`
@@ -59,6 +60,13 @@ const SettingsManager = () => {
) {
initialBannerState = true;
}
+ if (
+ promotionalBannerType === STRIPE_TAX_BANNER &&
+ // eslint-disable-next-line camelcase
+ wc_stripe_settings_params?.show_stripe_tax_banner === '1'
+ ) {
+ initialBannerState = true;
+ }
if (
promotionalBannerType === OC_PROMOTION_BANNER &&
// eslint-disable-next-line camelcase
diff --git a/includes/admin/class-wc-stripe-settings-controller.php b/includes/admin/class-wc-stripe-settings-controller.php
index 757631d26d..498152e313 100644
--- a/includes/admin/class-wc-stripe-settings-controller.php
+++ b/includes/admin/class-wc-stripe-settings-controller.php
@@ -263,6 +263,10 @@ public function admin_scripts( $hook_suffix ) {
// Show the OC promotional banner only if OC is disabled
&& ! $is_oc_enabled;
+ $show_stripe_tax_banner = get_option( 'wc_stripe_show_stripe_tax_banner', 'yes' ) === 'yes'
+ // Show the Stripe Tax banner only if OC is enabled
+ && $is_oc_enabled;
+
$params = [
'time' => time(),
'i18n_out_of_sync' => $message,
@@ -273,6 +277,7 @@ public function admin_scripts( $hook_suffix ) {
'show_optimized_checkout_notice' => get_option( 'wc_stripe_show_optimized_checkout_notice', 'yes' ) === 'yes' ? true : false,
'show_bnpl_promotional_banner' => $show_bnpl_promotion_banner,
'show_oc_promotional_banner' => $show_oc_promotion_banner,
+ 'show_stripe_tax_banner' => $show_stripe_tax_banner,
'is_test_mode' => $this->get_gateway()->is_in_test_mode(),
'plugin_version' => WC_STRIPE_VERSION,
'account_country' => $this->account->get_account_country(),
diff --git a/readme.txt b/readme.txt
index 8c700a2964..403d659c07 100644
--- a/readme.txt
+++ b/readme.txt
@@ -123,6 +123,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
* Fix - Ensure state and postal code are optional in express checkout for Gulf countries (UAE, Bahrain, Kuwait, Oman, Qatar)
* Dev - Removes the `_wcstripe_feature_upe` feature flag and the related method from the `WC_Stripe_Feature_Flags` class
* Dev - Fixes some incorrect subscriptions support implementations for payment methods
+* Add - New promotional banner to highlight the Stripe Tax extension for OCS-enabled merchants
* Fix - Ensure correct express checkout prices in block cart and checkout with non-default decimal configuration
* Fix - Disable express checkout when Amazon Pay is disabled and the only method
* Fix - Don't allow WP-Cron jobs to detach payment methods on staging sites