Skip to content

update: subscription onboarding to use WP components #10907

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jul 16, 2025
Merged

update: subscription onboarding to use WP components #10907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
30efc33
update: subscription onboarding to use WP components
frosso Jul 4, 2025
8baea27
Merge branch 'develop' into update/subscription-product-onboarding-wp…
frosso Jul 4, 2025
aa026f1
Merge branch 'develop' into update/subscription-product-onboarding-wp…
frosso Jul 9, 2025
2e92ccd
update wrapper
frosso Jul 9, 2025
e46816e
Merge branch 'develop' into update/subscription-product-onboarding-wp…
frosso Jul 10, 2025
86718a3
Merge branch 'develop' into update/subscription-product-onboarding-wp…
frosso Jul 15, 2025
0770017
Merge branch 'develop' into update/subscription-product-onboarding-wp…
frosso Jul 15, 2025
b036c63
Merge branch 'develop' into update/subscription-product-onboarding-wp…
rtio Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/update-subscription-product-onboarding-wp-components
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: update

update: subscription-product-onboarding to use WP components bundled within the WP installation
23 changes: 10 additions & 13 deletions client/subscription-product-onboarding/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import React from 'react';
import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
import { Icon } from 'wcpay/components/wp-components-wrapped/components/icon';
import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
import UnbundledWpComponentsProvider from 'wcpay/wordpress-components-context/unbundled-wp-components-provider';
import {
createInterpolateElement,
useEffect,
Expand Down Expand Up @@ -87,14 +89,7 @@ const SubscriptionProductOnboardingModalContent = ( {
'woocommerce-payments'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modifying to the external link component, since this opens in a new window. The external link component provides a visual hint that the link will open in a new page, and it ensures a11y compatibility by adding the "(opens in a new tab)" text.

href="https://wordpress.com/tos/"
target="_blank"
rel="noreferrer"
/>
),
a: <ExternalLink href="https://wordpress.com/tos/" />,
}
) }
</p>
Expand Down Expand Up @@ -135,11 +130,13 @@ const SubscriptionProductOnboardingModal = () => {
}

return (
<SubscriptionProductOnboardingModalContent
onRequestClose={ () => {
setOpen( false );
} }
/>
<UnbundledWpComponentsProvider>
<SubscriptionProductOnboardingModalContent
onRequestClose={ () => {
setOpen( false );
} }
/>
</UnbundledWpComponentsProvider>
);
};

Expand Down
1 change: 1 addition & 0 deletions client/subscription-product-onboarding/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
}

.components-modal__content {
padding-top: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing the top spacing on the dialog itself - see before & after:

Screenshot 2025-07-04 at 3 42 10 PM Screenshot 2025-07-04 at 3 46 27 PM

padding-bottom: 0;
margin-top: 0;

Expand Down
Loading