Skip to content

Commit

Permalink
[CYS] Update the Share feedback survey design (#45802)
Browse files Browse the repository at this point in the history 
* Update the CYS feedback survey design

* Add changefile(s) from automation for the following project(s): woocommerce

* Fix typo

---------

Co-authored-by: github-actions <github-actions@github.com>
  • Loading branch information
@albarin
albarin and github-actions committed Mar 21, 2024
1 parent de90c5f commit 4eb9063
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 116 deletions.
40 changes: 29 additions & 11 deletions plugins/woocommerce-admin/client/customize-store/transitional/style.scss
View file
Expand Up @@ -133,9 +133,10 @@
.woocommerce-ai-survey-modal {
max-height: 100%;
max-width: 620px;
color: var(--gutenberg-gray-900, #1e1e1e);

.components-modal__header {
padding: 32px 32px 24px 32px;
padding: 32px 32px 8px 32px;

.components-modal__header-heading {
font-size: 20px;
Expand All @@ -146,14 +147,30 @@
}

.components-modal__content {
padding-top: 0;
padding-bottom: 16px;
padding: 0 0 16px;
}


hr {
margin-top: 24px;
margin-bottom: 16px;
color: var(--gutenberg-gray-100, #f0f0f0);
border-bottom: 0;
}
}

.woocommerce-ai-survey-form {
.content {
padding-left: 32px;
padding-right: 32px;

hr {
margin: 20px 0;
}
}

.woocommerce-ai-survey-form__description {
margin: 0 0 12px;
margin: 0 0 24px;
font-size: 13px;
font-style: normal;
font-weight: 400;
Expand Down Expand Up @@ -193,14 +210,13 @@
}
}

hr {
color: var(--gutenberg-gray-100, #f0f0f0);
margin: 20px 0;
}
.components-checkbox-control__input-container {
margin-right: 16px;

.components-checkbox-control__input {
border: 1px solid $gray-600;
border-radius: 2px;
.components-checkbox-control__input {
border: 1px solid $gray-600;
border-radius: 2px;
}
}

.components-checkbox-control:last-child {
Expand All @@ -211,6 +227,8 @@
display: flex;
justify-content: flex-end;
gap: 12px;
padding-left: 32px;
padding-right: 32px;

.components-button {
padding: 8px 16px;
Expand Down
217 changes: 112 additions & 105 deletions plugins/woocommerce-admin/client/customize-store/transitional/survey-form/index.tsx
View file
Expand Up @@ -113,118 +113,125 @@ export const SurveyForm = ( {
return (
<>
<div className="woocommerce-ai-survey-form">
<p className="woocommerce-ai-survey-form__description">
{ __(
'Our goal is to make sure you have all the right tools to start customizing your store. We’d love to know if we hit our mark and how we can improve.',
'woocommerce'
) }
</p>

<h4>
{ __(
'On a scale of 1 = difficult to 5 = very easy, how would you rate the overall experience?',
'woocommerce'
) }
<span>*</span>
</h4>
<StarRating value={ rating } onChange={ setRating } />

<hr />

<h4>
{ showAISurvey
? __(
'What motivated you to choose the “Design with AI” option?',
'woocommerce'
)
: __(
'What motivated you to choose the "Design your own theme" option?',
'woocommerce'
) }
<span>*</span>
</h4>
<CheckboxControl
label={
showAISurvey
<div className="content">
<p className="woocommerce-ai-survey-form__description">
{ __(
'Our goal is to make sure you have all the right tools to start customizing your store. We’d love to know if we hit our mark and how we can improve.',
'woocommerce'
) }
</p>

<h4>
{ __(
'On a scale of 1 = difficult to 5 = very easy, how would you rate the overall experience?',
'woocommerce'
) }
<span>*</span>
</h4>
<StarRating value={ rating } onChange={ setRating } />

<hr />

<h4>
{ showAISurvey
? __(
'I wanted to see how AI could help me streamline the process.',
'What motivated you to choose the “Design with AI” option?',
'woocommerce'
)
: __(
'I wanted to design my own theme.',
'What motivated you to choose the "Design your own theme" option?',
'woocommerce'
) }
<span>*</span>
</h4>
<CheckboxControl
label={
showAISurvey
? __(
'I wanted to see how AI could help me streamline the process.',
'woocommerce'
)
: __(
'I wanted to design my own theme.',
'woocommerce'
)
}
checked={ isStreamlineChecked }
onChange={ setStreamlineChecked }
/>
<CheckboxControl
label={ __(
"I didn't like any of the available themes.",
'woocommerce'
) }
checked={ isDislikeThemesChecked }
onChange={ setDislikeChecked }
/>
<CheckboxControl
label={ __(
"I didn't find a theme that matched my needs.",
'woocommerce'
) }
checked={ isThemeNoMatchChecked }
onChange={ setThemeNoMatchChecked }
/>
<CheckboxControl
label={ __( 'Other.', 'woocommerce' ) }
checked={ isOtherChecked }
onChange={ setOtherChecked }
/>

<hr />

<h4>
{ __(
'Did you find anything confusing, irrelevant, or not useful?',
'woocommerce'
) }
</h4>
<TextareaControl
value={ feedbackText }
onChange={ setFeedbackText }
/>

<hr />

<h4>
{ showAISurvey
? __(
'Feel free to spill the beans here. All suggestions, feedback, or comments about the AI-generated store experience are welcome.',
'woocommerce'
)
}
checked={ isStreamlineChecked }
onChange={ setStreamlineChecked }
/>
<CheckboxControl
label={ __(
"I didn't like any of the available themes.",
'woocommerce'
) }
checked={ isDislikeThemesChecked }
onChange={ setDislikeChecked }
/>
<CheckboxControl
label={ __(
"I didn't find a theme that matched my needs.",
'woocommerce'
) }
checked={ isThemeNoMatchChecked }
onChange={ setThemeNoMatchChecked }
/>
<CheckboxControl
label={ __( 'Other.', 'woocommerce' ) }
checked={ isOtherChecked }
onChange={ setOtherChecked }
/>

<hr />

<h4>
{ __(
'Did you find anything confusing, irrelevant, or not useful?',
'woocommerce'
) }
</h4>
<TextareaControl
value={ feedbackText }
onChange={ setFeedbackText }
/>

<h4>
{ showAISurvey
? __(
'Feel free to spill the beans here. All suggestions, feedback, or comments about the AI-generated store experience are welcome.',
'woocommerce'
)
: __(
'Feel free to spill the beans here. All suggestions, feedback, or comments about the "Design your own theme" experience are welcome.',
'woocommerce'
) }
</h4>
<TextareaControl
value={ spillBeansText }
onChange={ setSpillBeansText }
/>

<div className="buttons">
<Button
className="is-spinner"
variant="tertiary"
onClick={ closeFunction }
>
{ __( 'Cancel', 'woocommerce' ) }
</Button>
: __(
'Feel free to spill the beans here. All suggestions, feedback, or comments about the "Design your own theme" experience are welcome.',
'woocommerce'
) }
</h4>
<TextareaControl
value={ spillBeansText }
onChange={ setSpillBeansText }
/>
</div>

<Button
variant="primary"
onClick={ sendData }
disabled={ disableSendButton }
>
{ __( 'Send', 'woocommerce' ) }
</Button>
<div>
<hr />
<div className="buttons">
<Button
className="is-spinner"
variant="tertiary"
onClick={ closeFunction }
>
{ __( 'Cancel', 'woocommerce' ) }
</Button>

<Button
variant="primary"
onClick={ sendData }
disabled={ disableSendButton }
>
{ __( 'Send', 'woocommerce' ) }
</Button>
</div>
</div>
</div>
</>
Expand Down
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/45802-update-cys-survey-design
View file
@@ -0,0 +1,4 @@
Significance: minor
Type: update

CYS - Update the "Share feedback" survey design

0 comments on commit 4eb9063

Please sign in to comment.