Square Payments: Create landing page

[WBerredo]

Related to https://github.com/Automattic/dotcom-forge/issues/7781
Related to https://github.com/Automattic/dotcom-forge/issues/7785

Proposed Changes

• Create a landing page to be shown on the /start-with/square-payments
• Update page layout to mach the design in figma
• Add a CTA to redirect to the store creation endpoint
• Send a track event for page view and CTA click

PS: Mobile visualization will be handled in a follow-up PR

Why are these changes being made?

As part of the Partner Aware Onboarding project to shows users a page to about the partnership before starting a store with those definitions selected.

Testing Instructions

• Go to /start-with/square-payments in a logged in and logged out session
• Check if the layout matches the pictures below
• Click on the CTA and check if you are redirected to /setup/entrepreneur/start?partnerBundle=square
• Check on tracks if the events are being properly recorded

Logged out	Logged in

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-111714

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-111714&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-111714&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~4 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper        +86 B  (+0.0%)       +4 B  (+0.0%)
entry-main           +86 B  (+0.0%)       +4 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~9307 bytes added 📈 [gzipped])

name        parsed_size              gzip_size
start-with     +26876 B  (+2013.2%)    +9307 B  (+1491.5%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[epeicher]

Great work, I have checked, and it matches the design for both logged-in and logged-out versions. I have also tested the CTA redirection and track event, thanks for adding it.

I have added a couple of minor (non-blocking) comments, but this can be

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/square-payments-landing on your sandbox.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/15101213

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @WBerredo for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.