Skip to content
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

Jump to bottom

Seller Experience: Added store name and tagline view. #60222

Merged
merged 6 commits into from Jan 24, 2022
Merged

Seller Experience: Added store name and tagline view. #60222

merged 6 commits into from Jan 24, 2022

Conversation

nelsonec87
Copy link
Contributor

@nelsonec87 nelsonec87 commented Jan 18, 2022 •
edited

Changes proposed in this Pull Request

  • Added new view so the user can enter the store name and a tagline - under the seller-experience feature flag.

Testing instructions

  • Access start/setup-site/intent?siteSlug=<SITE SLUG> (which doesn't enable the seller-experience feature flag)

  • Things should be unchanged!
    image

  • Access start/setup-site/intent?siteSlug=<SITE SLUG>&flags=seller-experience (which enables the seller-experience feature flag)

  • Click the "Start Selling" button
    image

  • Check the new view

image

Related to #60154

@nelsonec87 nelsonec87 added the [Feature Group] Customer Seller Experience The customer experience when purchasing services or products. label Jan 18, 2022
@nelsonec87 nelsonec87 requested a review from a team January 18, 2022 21:52
@nelsonec87 nelsonec87 self-assigned this Jan 18, 2022
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 18, 2022
@github-actions
Copy link

github-actions bot commented Jan 18, 2022 •
edited by matticbot

Calypso Live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-25478
Jetpack Cloud live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-25478&env=jetpack

a8ci18n
a8ci18n reviewed Jan 18, 2022
View reviewed changes
client/signup/steps/sell-details/sell-details.tsx Outdated
<form className="sell-details__form" onSubmit={ handleSubmit }>
<FormFieldset className="sell-details__form-fieldset">
<FormLabel htmlFor="siteTitle" optional>
{ translate( 'Store name' ) }
Copy link

Choose a reason for hiding this comment

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

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 24 times:
translate( 'Store Name' ) ES Score: 9

a8ci18n
a8ci18n reviewed Jan 18, 2022
View reviewed changes
client/signup/steps/sell-details/sell-details.tsx Outdated
<FormInput name="tagline" id="tagline" value={ formValues.tagline } onChange={ onChange } />
<FormSettingExplanation>
<Icon className="sell-details__form-icon" icon={ tip } size={ 20 } />
{ translate( 'In a few words, explain what your store is about.' ) }
Copy link

Choose a reason for hiding this comment

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

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 49 times:
translate( 'In a few words, explain what your blog is about.' ) ES Score: 7

@matticbot
Copy link
Contributor

matticbot commented Jan 18, 2022 •
edited

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

Sections (~43 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
signup                +236 B  (+0.1%)      +15 B  (+0.0%)
jetpack-connect       +205 B  (+0.0%)      +16 B  (+0.0%)
accept-invite         +205 B  (+0.1%)      +16 B  (+0.0%)
plans                 +189 B  (+0.0%)      +10 B  (+0.0%)
domains               +189 B  (+0.0%)       +9 B  (+0.0%)
checkout              +189 B  (+0.0%)       +9 B  (+0.0%)

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 (~560 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-site-options                  +763 B  (+0.9%)     +729 B  (+2.8%)
async-load-signup-steps-starting-point                -196 B  (-0.2%)     -425 B  (-1.6%)
async-load-calypso-blocks-editor-checkout-modal       +189 B  (+0.0%)       +9 B  (+0.0%)
async-load-signup-steps-intent                        +100 B  (+0.1%)      -10 B  (-0.0%)

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.
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.

@kwight
Copy link
Contributor

kwight commented Jan 19, 2022

Great start!

The Figma (9XooISHKU1phs4Ju2Yyy5p-fi-211%3A4142) seems to have a better balance for when the step title wraps; can you verify we're not making something worse than the existing step for blogging? Wrapping (which can happen a lot in more verbose languages) looks like it could be better; we may need a designer to give a minimum width for the input fields, or something (p1642614351036200-slack-C029SB8JT8S).

Figma:
Screen Shot 2022-01-19 at 9 32 15 AM

Artificial long wrapping:
Screen Shot 2022-01-19 at 9 35 22 AM

@saygunnyc
Copy link

Thanks for the ping @kwight!

Wrapping (which can happen a lot in more verbose languages) looks like it could be better;

💯 Let's lean towards using wrapping rather than extending the text field to minimize the spacing between two columns, or minimize the input fields.

Checking the Figma file, I can see the right column is designed to be 504 px on Desktop, and the maximum width of the title text area over the left column is 441px on an Import flow. I suggest that we limit the maximum size of the left column to match that.

Hope this is helpful!

@nelsonec87
Copy link
Contributor Author

New solution using the same handling as the "Write" intent:

image

@saygunnyc
Copy link

Hey @nelsonec87, the copy "First, let's give your store a name" seems like it's bold.
Just wanted to make sure it's not, as it's NOT over the designs.

@kwight kwight changed the title Seller-xp: Added store name and tagline view Seller Experience: Added store name and tagline view. Jan 19, 2022
@nelsonec87 nelsonec87 removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 19, 2022
@nelsonec87
Copy link
Contributor Author

Hi @saygunnyc , I've checked it and it's currently font-weight: 400 in all steps 👍

@roo2
Copy link
Contributor

roo2 commented Jan 19, 2022

just to confirm, it looks like the long text wrapping issue was only related to an earlier version of this PR, the existing screens seem to handle long titles well (and it looks like this PR has been updated to handle long titles now as well)

a8ci18n
a8ci18n reviewed Jan 20, 2022
View reviewed changes
client/signup/steps/site-options/index.tsx Outdated
const headerImage = 'store-options' === stepName ? intentImageUrl : siteOptionsImage;

const siteTitleLabel =
'store-options' === stepName ? translate( 'Store name' ) : translate( 'Blog name' );
Copy link

Choose a reason for hiding this comment

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

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 24 times:
translate( 'Store Name' ) ES Score: 9

a8ci18n
a8ci18n reviewed Jan 20, 2022
View reviewed changes
client/signup/steps/site-options/index.tsx Outdated

const taglineExplanation =
'store-options' === stepName
? translate( 'In a few words, explain what your store is about.' )
Copy link

Choose a reason for hiding this comment

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

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 49 times:
translate( 'In a few words, explain what your blog is about.' ) ES Score: 7

@nelsonec87 nelsonec87 added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 20, 2022
a8ci18n
a8ci18n reviewed Jan 21, 2022
View reviewed changes
client/signup/steps/site-options/index.tsx
return {
headerText: translate( "First, let's give your store a name" ),
headerImage: intentImageUrl,
siteTitleLabel: translate( 'Store name' ),
Copy link

Choose a reason for hiding this comment

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

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 24 times:
translate( 'Store Name' ) ES Score: 9

a8ci18n
a8ci18n reviewed Jan 21, 2022
View reviewed changes
client/signup/steps/site-options/index.tsx
headerText: translate( "First, let's give your store a name" ),
headerImage: intentImageUrl,
siteTitleLabel: translate( 'Store name' ),
taglineExplanation: translate( 'In a few words, explain what your store is about.' ),
Copy link

Choose a reason for hiding this comment

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

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 49 times:
translate( 'In a few words, explain what your blog is about.' ) ES Score: 7

@nelsonec87 nelsonec87 mentioned this pull request Jan 24, 2022
Merged
blackjackkent
blackjackkent approved these changes Jan 24, 2022
View reviewed changes
Copy link
Contributor

@blackjackkent blackjackkent left a comment

Choose a reason for hiding this comment

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

This is looking good to me! :) And verified that it is hidden as expected when the seller experience tag is disabled in development.

@nelsonec87 nelsonec87 merged commit a0e7484 into trunk Jan 24, 2022
@nelsonec87 nelsonec87 deleted the feature/seller-xp-add-store-name-view branch January 24, 2022 17:54
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 24, 2022
@a8ci18n
Copy link

a8ci18n commented Jan 24, 2022

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

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

@kwight kwight mentioned this pull request Jan 26, 2022
Closed
@a8ci18n
Copy link

a8ci18n commented Feb 4, 2022

Translation for this Pull Request has now been finished.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kwight kwight kwight left review comments

@a8ci18n a8ci18n a8ci18n left review comments

@blackjackkent blackjackkent blackjackkent approved these changes

Assignees

@nelsonec87 nelsonec87

Labels
[Feature Group] Customer Seller Experience The customer experience when purchasing services or products.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@nelsonec87 @matticbot @kwight @saygunnyc @roo2 @a8ci18n @blackjackkent