Skip to content

Commit

Permalink
Update the CYS feedback survey design
Browse files Browse the repository at this point in the history
  • Loading branch information
@albarin
albarin committed Mar 21, 2024
1 parent b357bdc commit 2679f23
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 116 deletions.
40 changes: 29 additions & 11 deletions plugins/woocommerce-admin/client/customize-store/transitional/style.scss
View file
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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?',
'woocommer,c,,,,e'
) }
<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

0 comments on commit 2679f23

Please sign in to comment.