Andal.LND/frontend-app-account
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Make VerifiedName not editable and show proper icon when the Name is in pending status

Browse Source
This commit is contained in:
Simon Chen
2021-08-28 09:14:26 -04:00
parent b1c1c6502d
commit 2936498b02
5 changed files with 76 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/account-settings/AccountSettingsPage.jsx
View File

@@ -14,7 +14,7 @@ import {
getLanguageList,
} from '@edx/frontend-platform/i18n';
import { Hyperlink, Icon } from '@edx/paragon';
import { CheckCircle } from '@edx/paragon/icons';
import { CheckCircle, WarningFilled } from '@edx/paragon/icons';
import messages from './AccountSettingsPage.messages';
import { fetchSettings, saveSettings, updateDraft } from './data/actions';
@@ -154,11 +154,13 @@ class AccountSettingsPage extends React.Component {
handleEditableFieldChange = (name, value) => {
this.props.updateDraft(name, value);
};
}
handleSubmit = (formId, values) => {
this.props.saveSettings(formId, values);
};
}
isVerifiedNameEditable = (verifiedName) => ['approved', 'denied'].includes(verifiedName.status)
isEditable(fieldName) {
return !this.props.staticFields.includes(fieldName);
@@ -348,7 +350,11 @@ class AccountSettingsPage extends React.Component {
(
<div className="d-flex">
{this.props.intl.formatMessage(messages['account.settings.field.name.verified'])}
{showVerifiedApproved && <Icon src={CheckCircle} className="ml-1" style={{ height: '18px', width: '18px', color: 'green' }} />}
{
showVerifiedApproved
? (<Icon src={CheckCircle} className="ml-1" style={{ height: '18px', width: '18px', color: 'green' }} />)
: (<Icon src={WarningFilled} className="ml-1" style={{ height: '18px', width: '18px', color: 'yellow' }} />)
}
</div>
)
}
@@ -357,8 +363,9 @@ class AccountSettingsPage extends React.Component {
? this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.verified'])
: this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.pending'])
}
isEditable={this.isEditable('verified_name')}
{...editableFieldProps}
isEditable={this.isVerifiedNameEditable(verifiedName) && this.isEditable('verified_name')}
isGrayedOut={!this.isVerifiedNameEditable(verifiedName)}
{...(this.isVerifiedNameEditable(verifiedName) && editableFieldProps)}
/>
)}

2
src/account-settings/AccountSettingsPage.messages.jsx
View File

@@ -103,7 +103,7 @@ const messages = defineMessages({
},
'account.settings.field.name.verified.help.text.pending': {
id: 'account.settings.field.name.verified.help.text.pending',
defaultMessage: 'This name is pending verification.',
defaultMessage: 'Verification Pending. This usually takes 48 hours or less. Verified Name cannot be changed while identity verification is pending',
description: 'Help text for the account settings verified name field when the name is pending verification.',
},
'account.settings.field.name.verified.sucess.message': {

5
src/account-settings/EditableField.jsx
View File

@@ -37,6 +37,7 @@ function EditableField(props) {
onChange,
isEditing,
isEditable,
isGrayedOut,
intl,
...others
} = props;
@@ -161,7 +162,7 @@ function EditableField(props) {
</Button>
) : null}
</div>
<p data-hj-suppress>{renderValue(value)}</p>
<p data-hj-suppress className={isGrayedOut ? 'grayed-out' : null}>{renderValue(value)}</p>
<p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
</div>
),
@@ -196,6 +197,7 @@ EditableField.propTypes = {
onChange: PropTypes.func.isRequired,
isEditing: PropTypes.bool,
isEditable: PropTypes.bool,
isGrayedOut: PropTypes.bool,
intl: intlShape.isRequired,
};
@@ -211,6 +213,7 @@ EditableField.defaultProps = {
helpText: undefined,
isEditing: false,
isEditable: true,
isGrayedOut: false,
userSuppliedValue: undefined,
};

4
src/account-settings/_style.scss
View File

@@ -50,4 +50,8 @@
line-height: 1.6rem;
}
}
.grayed-out{
opacity: 0.6; /* Real browsers */
filter: alpha(opacity = 60); /* MSIE */
}
}

54
src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap
View File

@@ -108,6 +108,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -171,6 +172,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -241,6 +243,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -304,6 +307,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -367,6 +371,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -430,6 +435,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -493,6 +499,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -556,6 +563,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -619,6 +627,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -755,6 +764,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -818,6 +828,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -888,6 +899,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -951,6 +963,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1014,6 +1027,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1077,6 +1091,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1140,6 +1155,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1203,6 +1219,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1266,6 +1283,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1457,6 +1475,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1520,6 +1539,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Hispanic, Latin, or Spanish origin, White
@@ -1583,6 +1603,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1646,6 +1667,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1709,6 +1731,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1772,6 +1795,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1835,6 +1859,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1898,6 +1923,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1961,6 +1987,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2083,6 +2110,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2146,6 +2174,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Asian
@@ -2209,6 +2238,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2272,6 +2302,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2335,6 +2366,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2398,6 +2430,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2461,6 +2494,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2524,6 +2558,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2587,6 +2622,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2709,6 +2745,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2772,6 +2809,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -2842,6 +2880,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2905,6 +2944,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2968,6 +3008,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3031,6 +3072,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3094,6 +3136,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Other: test
@@ -3157,6 +3200,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3220,6 +3264,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3342,6 +3387,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer to self describe: test
@@ -3405,6 +3451,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -3475,6 +3522,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3538,6 +3586,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3601,6 +3650,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3664,6 +3714,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3727,6 +3778,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3790,6 +3842,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3853,6 +3906,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond