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

Add customData and acceptanceLanguage Props #58

Merged
merged 5 commits into from
Sep 20, 2022
Merged

Add customData and acceptanceLanguage Props #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c8e8f45
Support custom data and custom acceptance language
timothymorse Sep 16, 2022
d32d73b
Update README and add tests
timothymorse Sep 16, 2022
e9287f9
Add next version to for the PR
timothymorse Sep 19, 2022
8dca3fb
Revert version change
timothymorse Sep 19, 2022
47e92cd
Merge branch 'next' into timothymorse/IRON-12530
timothymorse Sep 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,12 @@ You can hook into events using the triggered event callback props described here

| Prop | Description | Type | Required? | Default |
|:--------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------:|:-------------------------------------------:|:--------------------------------------------:|
| `acceptanceLanguage` | Override the acceptance language specified in the Ironclad Clickwrap App's UI. | string | No | Value specified in Ironclad Clickwrap Group's UI |
| `accessId` | Ironclad Clickwrap Site Access ID | string | Yes, if `injectSnippetOnly` is not passed | undefined |
| `clickWrapStyle` | Override the clickwrap style specified in the Ironclad Clickwrap Group Interface | string.oneOf[`'full'`, `'scroll'`, `'checkbox'`, `'combined'`, `'embedded'`] | No | Value specified in Ironclad Clickwrap Group's UI |
| `confirmationEmail` | Override whether to send a confirmation email to the signer upon contract acceptance | bool | No | Value specified in Ironclad Clickwrap Group's UI |
| `containerId` | The div ID that will contain your clickwrap. You should override this if you plan on displaying more than one contract on a page. | string | No | ps-clickwrap |
| `customData` | Object containing custom keys and values you specify that is added to the metadata on your acceptance. | object | No | undefined |
| `disableSending` | Turn this on if you want to manually send the agreed event instead of it automatically being sent on contract acceptance. [See documentation on manually sending the agreed event here.](https://developer.pactsafe.com/docs/get-to-know-our-javascript-library#section-3-sending-agreed-in-javascript) | bool | No | false |
| `displayAll` | Display all contracts in the group immediately. If disabled, a contract will only be displayed if the signer hasn't accepted the latest version. | bool | No | true |
| `displayImmediately` | Display the group's contracts as soon as the Signer ID is available. If disabled, contracts will remain hidden until you call `displayRequired()` | bool | No | true |
Expand Down
30 changes: 22 additions & 8 deletions src/PSClickWrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,9 @@ class PSClickWrap extends React.Component {

componentDidUpdate(prevProps) {
const {
acceptanceLanguage,
clickWrapStyle,
customData,
filter,
groupKey,
injectSnippetOnly,
Expand All @@ -97,6 +99,12 @@ class PSClickWrap extends React.Component {
_ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle);
_ps.getByKey(clickwrapGroupKey).retrieveHTML();
}
if (!isEqual(customData, prevProps.customData)) {
_ps('set', 'custom_data', customData);
}
if (acceptanceLanguage !== prevProps.acceptanceLanguage) {
_ps('set', 'acceptance_language', acceptanceLanguage);
};
if (!isEqual(renderData, prevProps.renderData)) {
if (clickWrapStyle && _psLoadedValidGroup) { _ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle); }
_ps(`${clickwrapGroupKey}:retrieveHTML`, renderData);
Expand Down Expand Up @@ -191,7 +199,9 @@ class PSClickWrap extends React.Component {

createClickWrap() {
const {
acceptanceLanguage,
clickWrapStyle,
customData,
confirmationEmail,
containerId,
displayAll,
Expand All @@ -205,16 +215,18 @@ class PSClickWrap extends React.Component {
allowDisagreed,
} = this.props;
const options = {
filter,
container_selector: containerId,
allow_disagreed: allowDisagreed || false,
acceptance_language: acceptanceLanguage,
auto_run: displayImmediately,
confirmation_email: confirmationEmail,
signer_id_selector: signerIdSelector,
style: clickWrapStyle,
container_selector: containerId,
custom_data: customData,
display_all: displayAll,
render_data: renderData,
auto_run: displayImmediately,
filter,
force_scroll: forceScroll,
allow_disagreed: allowDisagreed || false,
render_data: renderData,
signer_id_selector: signerIdSelector,
style: clickWrapStyle,
};

if (injectSnippetOnly) return;
Expand Down Expand Up @@ -256,7 +268,8 @@ PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR = 'PSClickWrap Error: Y
PSClickWrap.MUST_SET_ALLOW_DISAGREED = 'PSClickWrap Error: You must set allowDisagreed as true to make onInvalid work';

PSClickWrap.propTypes = {
accessId: isRequiredIf(PropTypes.string, (props) => !props.hasOwnProperty('injectSnippetOnly')),
acceptanceLanguage: PropTypes.string,
accessId: isRequiredIf(PropTypes.string, props => !props.hasOwnProperty('injectSnippetOnly')),
clickWrapStyle: PropTypes.oneOf([
'full',
'scroll',
Expand All @@ -265,6 +278,7 @@ PSClickWrap.propTypes = {
'embedded',
]),
confirmationEmail: PropTypes.bool,
customData: PropTypes.object,
disableSending: PropTypes.bool,
displayAll: PropTypes.bool,
displayImmediately: PropTypes.bool,
Expand Down
22 changes: 22 additions & 0 deletions tests/PSClickWrap.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,28 @@ describe('PSClickWrap _ps interface tests', () => {
expect(_ps.mock.calls[FUNC.SET_LIB][2]).toBe('react-sdk');
expect(_ps.mock.calls[FUNC.SET_VER][2]).toBe('_client-version');
});

it('ensures customData is passed properly if passed as a prop', () => {
const testCustomData = { key_1: 'key1val', key_2: 2 }
mount(<PSClickWrap accessId="0000000-000000-0000-0000000" groupKey="example-clickwrap" signerId="[email protected]" customData={testCustomData} />);
expect(_ps.mock.calls[FUNC.LOAD][2].custom_data).toMatchObject(testCustomData);
});

it('sets customData to undefined if it is not passed as a prop', () => {
mount(<PSClickWrap accessId="0000000-000000-0000-0000000" groupKey="example-clickwrap" signerId="[email protected]" />);
expect(_ps.mock.calls[FUNC.LOAD][2].custom_data).toBeUndefined();
});

it('ensures acceptanceLanguage is passed properly if passed as a prop', () => {
const testAcceptanceLanguage = "I agree to these contracts here";
mount(<PSClickWrap accessId="0000000-000000-0000-0000000" groupKey="example-clickwrap" signerId="[email protected]" acceptanceLanguage={testAcceptanceLanguage} />);
expect(_ps.mock.calls[FUNC.LOAD][2].acceptance_language).toBe(testAcceptanceLanguage);
});

it('sets acceptanceLanguage to be undefined if it is not passed as a prop', () => {
mount(<PSClickWrap accessId="0000000-000000-0000-0000000" groupKey="example-clickwrap" signerId="[email protected]" />);
expect(_ps.mock.calls[FUNC.LOAD][2].acceptance_language).toBeUndefined();
});
});

describe('PSClickWrap _ps event prop tests', () => {
Expand Down