-
Notifications
You must be signed in to change notification settings - Fork 2k
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.
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
Task: Create Plans page for Jetpack App Site Creation #82135
Task: Create Plans page for Jetpack App Site Creation #82135
Conversation
- Created jetpack-app-plans directory - Added an entry into sections.js with a path and module - Created controller.jsx that displays JetpackAppPlans component and passes query parameters - Created index.js defining a page and including jetpackAppPlans controller - Created main.jsx that shows a loading indicator while querying plans, and PlansFeaturesMain component once plans are loaded - Created style.scss with jetpack-app-plans style that includes plan-features-layout-switcher to support media queries when displaying plans grid
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~105 bytes added 📈 [gzipped])
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. Sections (~16726 bytes added 📈 [gzipped])
Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. Async-loaded Components (~12 bytes added 📈 [gzipped])
React components that are loaded lazily, when a certain part of UI is displayed for the first time. 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. Generated by performance advisor bot at iscalypsofastyet.com. |
ChangelogI created a basic structure for separate.page.for.domains.movNow, we can:
I added tasks to the description. I think the most important next step is to make sure we can set the required inputs, and get the required outputs from and into our app to support the requirements. There will be more issues and caveats that you may find, please include them into tasks and/or mention in the changelog. CC: @guarani @ravishanker |
Good find! This is working great, thanks for making this happen @staskus! The code looks good and I only removed some parameters from I haven't found the time today to add anything else to this PR yet. |
- Allow redirect_to parameter to URL which is then used to callback with a selected plan - Do not pass selected plan if free plan is selected
Changelog✅ Configured plan selection to include free, personal, premium, business, and e-commerce (c5cfdc1 More details on handling onUpgradeClick and removePaidDomain eventsThe goal was to find out the way to pass information from the page into the app. I wanted to avoid calling platform-specific code and keep things as simple as possible. My solution is to use Example
Printing
|
Use getPlanCartItem to get plan
👋 There's an error in the console:
Untitled.movBased on your screen recordings above, there was no error, and I'm not sure why it wasn't happening before and is happening now. Please let me know if I'm missing something. |
Interesting. Update: This commit merged 2 days ago changed I merged with trunk after I made a changelog update Thank you for making the changes, @guarani ! |
Changelog✅ Hid main header and sidebar Plans.different.sizes.mov |
@southp, could you take a look at this draft PR when you have time? Most importantly if the whole structure for creating a new page makes sense. We decided to create a separate page for Jetpack App Plan Selection during Site Creation so we wouldn't need to make too many alternations to existing flows and components. Outside a header and loading, most of the functionality is contained within I'm not sure what are the rules behind the placement and naming of new pages. I put it into Thanks! |
@jdc91, thank you for the review and valuable comments! 🙇 I addressed most of the comments. I explained what I couldn't make work next to the comments. |
Redirect to jetpack-app/plans when accessing jetpack-app route, since it's the only page of the route for now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good and works well in my testing 👍 Nice work 🙌
I've left a few suggestions for follow-ups and a few notes to keep in mind.
Feel free to ship as-is and address the feedback in future PRs based on your project's prioritization.
🚀
); | ||
|
||
// Default to /plans page until we have more pages | ||
page( '/jetpack-app', '/jetpack-app/plans' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note that when this lands in production, to access the new /jetpack-app
route it in staging/production you'll need to request the route to be pointed to Calypso.
Here's an example recent request for another route: pMz3w-ilk-p2
I added README.md and noted other improvements in the following task #82934. We want to make more UI adjustments so other improvements will fit well as well. |
Fixes: #82131
Investigation: wordpress-mobile/WordPress-iOS#21598 (comment)
Discussion: p1695414275007579-slack-CFFF01Q4V
More context: pcdRpT-3RO-p2,
Requirements
Description
Created Plans page for Jetpack App Site Creation. It is intended to be reused and integrated into the native app flows.
Added routes:
For mobile-app user agent:
jetpack-app
redirects tojetpack-app/plans
jetpack-app/plans
Other cases:
jetpack-app
redirects homejetpack-app/plans
redirects homeTasks
Basic setup
Functionality
intent
props toPlansFeatureMain
. Consider creating a similarintent
to "plans-jetpack-app" but for a site creation, which includes free plan as wellcontroller.jsx
that would satisfy the requirementsonUpgradeClick
) to passcartItem
for a mobile application once the plan is selectedremovePaidDomain
which is triggered when paid domain is set and free plan is selected...
Style
style.scss
which would include all the relevant styles so the page would appear fine for phones, and tablets. See styles of other features that are usingPlansFeaturesMain
Coding Standards
Testing Instructions
UI
.com/jetpack-app-plans
paid_domain_name parameter
paid_domain_name
parameter (.com/jetpack-app/plans?paid_domain_name=greatdomain.com
)Free
opens a pop-upplan_id
andplan_slug
parameter. The app can use this redirection to come back to the native flow.Pre-merge Checklist