Skip to content

Commit

Permalink
add close button on survey ends
Browse files Browse the repository at this point in the history
  • Loading branch information
Dan Paun committed Mar 15, 2024
1 parent 09ac7ce commit 58b196f
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 61 deletions.
121 changes: 78 additions & 43 deletions client/overview/survey/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@
*/
import React from 'react';
import { HorizontalRule } from '@wordpress/primitives';

/**
* Internal dependencies.
*/
import {
Card,
CardBody,
Expand All @@ -17,6 +13,11 @@ import {
Icon,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { createInterpolateElement, useState } from '@wordpress/element';

/**
* Internal dependencies.
*/
import './style.scss';
import Emoticons from 'wcpay/overview/survey/emoticons';
import { useOverviewSurveyContext } from './context';
Expand All @@ -32,6 +33,8 @@ const Survey = () => {
setSurveyAnswers,
} = useOverviewSurveyContext();

const [ showComponent, setShowComponent ] = useState( true );

const currentRating = surveyAnswers.rating ?? '';
const ratingWithComment = [ 'very-unhappy', 'unhappy', 'neutral' ];
const ratings = [
Expand All @@ -53,6 +56,10 @@ const Survey = () => {
}
};

if ( ! showComponent ) {
return <></>;
}

return (
<Card>
<CardBody className="wcpay-overview__survey__container">
Expand Down Expand Up @@ -111,31 +118,44 @@ const Survey = () => {
{ ! surveySubmitted && showComment && (
<>
<HorizontalRule />
<TextareaControl
className="ssr-text-field"
label={ __(
'Why do you feel that way? (optional)',
'woocommerce-payments'
) }
onChange={ ( text ) => {
setSurveyAnswers(
(
prev: OverviewSurveyFields
): OverviewSurveyFields => ( {
...prev,
comments: text,
} )
);
} }
value={ surveyAnswers.comments ?? '' }
readOnly={ 'pending' === status }
/>
<p className="survey-bottom-disclaimer">
{ __(
'Your feedback will be only be shared with WooCommerce and treated pursuant to our privacy policy.',
'woocommerce-payments'
) }
</p>
<div className="comment_container">
<TextareaControl
label={ __(
'Why do you feel that way? (optional)',
'woocommerce-payments'
) }
onChange={ ( text ) => {
setSurveyAnswers(
(
prev: OverviewSurveyFields
): OverviewSurveyFields => ( {
...prev,
comments: text,
} )
);
} }
value={ surveyAnswers.comments ?? '' }
readOnly={ 'pending' === status }
/>
<p className="survey-bottom-disclaimer">
{ createInterpolateElement(
__(
'Your feedback will be only be shared with WooCommerce and treated pursuant to our <a>privacy policy</a>.',
'woocommerce-payments'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href="https://automattic.com/privacy/"
target="_blank"
rel="noreferrer"
/>
),
}
) }
</p>
</div>
<div className="wcpay-confirmation-modal__footer">
<Button
variant={ 'secondary' }
Expand All @@ -160,21 +180,36 @@ const Survey = () => {
</>
) }
{ surveySubmitted && (
<div className="survey_container">
<span>
<span
className="padding_right_7"
role="img"
aria-label="Thank you!"
>
🙌
<>
<div className="survey_container">
<span>
<span
className="padding_right_7"
role="img"
aria-label="Thank you!"
>
🙌
</span>
{ __(
'We appreciate your feedback!',
'woocommerce-payments'
) }
</span>
{ __(
'We appreciate your feedback!',
'woocommerce-payments'
) }
</span>
</div>
</div>

<div className="close_survey">
<button
type="button"
className="components-button has-icon"
aria-label="Close dialog"
onClick={ () => {
setShowComponent( false );
} }
>
<Icon icon={ close } type="close" size={ 32 } />
</button>
</div>
</>
) }
</CardBody>
</Card>
Expand Down
36 changes: 35 additions & 1 deletion client/overview/survey/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,29 @@
.close_container {
position: absolute;
right: 0;
margin-top: -11px;
margin-right: -11px;

.has-icon {
margin-top: 7px;
}
}

.padding_right_7 {
padding-right: 7px;
}

.padding_right_14 {
padding-right: 14px;
}

.emoticons_container {
line-height: 45px;
align-items: center;
flex-grow: 1;
justify-content: left;
display: flex;
flex-direction: row;
padding-top: 15px;

div {
float: left;
Expand All @@ -50,6 +59,31 @@
.padding_left_10 {
padding-left: 10px;
}

@media ( max-width: 600px ) {
.padding_left_10 {
padding-left: 10px;
display: block;
}
}
}
}

.comment_container {
max-width: 450px;
margin: auto;

.survey-bottom-disclaimer {
font-size: 11px;
color: #757575;
font-style: italic;
}
}

.close_survey {
position: absolute;
top: 0;
right: 0;
margin-top: 7px;
}
}
46 changes: 29 additions & 17 deletions client/overview/survey/test/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,29 +216,41 @@ exports[`WcPayOverviewSurveyContextProvider test survey with comments textbox 1`
</div>
<hr />
<div
class="components-base-control ssr-text-field css-wdf2ti-Wrapper ej5x27r4"
class="comment_container"
>
<div
class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
class="components-base-control css-wdf2ti-Wrapper ej5x27r4"
>
<label
class="components-base-control__label css-eweeby-StyledLabel-labelStyles ej5x27r2"
for="inspector-textarea-control-1"
<div
class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
>
Why do you feel that way? (optional)
</label>
<textarea
class="components-textarea-control__input css-zika3g-StyledTextarea-inputStyleNeutral-inputStyleFocus-inputControl ebk7yr50"
id="inspector-textarea-control-1"
rows="4"
/>
<label
class="components-base-control__label css-eweeby-StyledLabel-labelStyles ej5x27r2"
for="inspector-textarea-control-1"
>
Why do you feel that way? (optional)
</label>
<textarea
class="components-textarea-control__input css-zika3g-StyledTextarea-inputStyleNeutral-inputStyleFocus-inputControl ebk7yr50"
id="inspector-textarea-control-1"
rows="4"
/>
</div>
</div>
<p
class="survey-bottom-disclaimer"
>
Your feedback will be only be shared with WooCommerce and treated pursuant to our
<a
href="https://automattic.com/privacy/"
rel="noreferrer"
target="_blank"
>
privacy policy
</a>
.
</p>
</div>
<p
class="survey-bottom-disclaimer"
>
Your feedback will be only be shared with WooCommerce and treated pursuant to our privacy policy.
</p>
<div
class="wcpay-confirmation-modal__footer"
>
Expand Down

0 comments on commit 58b196f

Please sign in to comment.