This repository has been archived by the owner on Feb 29, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Bug 1492089 - Add EOY Template (#4487)
- Loading branch information
Showing
18 changed files
with
528 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React from "react"; | ||
| import {SimpleSnippet} from "../SimpleSnippet/SimpleSnippet"; | ||
|
|
||
| export class EOYSnippet extends React.PureComponent { | ||
| constructor(props) { | ||
| super(props); | ||
| this.handleSubmit = this.handleSubmit.bind(this); | ||
| } | ||
|
|
||
| /** | ||
| * setFrequencyValue - `frequency` form parameter value should be `monthly` | ||
| * if `monthly-checkbox` is selected or `single` otherwise | ||
| */ | ||
| setFrequencyValue() { | ||
| const frequencyCheckbox = this.refs.form.querySelector("#monthly-checkbox"); | ||
| if (frequencyCheckbox.checked) { | ||
| this.refs.form.querySelector("[name='frequency']").value = "monthly"; | ||
| } | ||
| } | ||
|
|
||
| handleSubmit(event) { | ||
| event.preventDefault(); | ||
| this.setFrequencyValue(); | ||
| this.refs.form.submit(); | ||
| if (!this.props.content.do_not_autoblock) { | ||
| this.props.onBlock(); | ||
| } | ||
| } | ||
|
|
||
| renderDonations() { | ||
| const fieldNames = ["first", "second", "third", "fourth"]; | ||
| const numberFormat = new Intl.NumberFormat(this.props.content.locale || navigator.language, { | ||
| style: "currency", | ||
| currency: this.props.content.currency_code, | ||
| minimumFractionDigits: 0, | ||
| }); | ||
| // Default to `second` button | ||
| const {selected_button} = this.props.content; | ||
| const btnStyle = { | ||
| color: this.props.content.button_color, | ||
| backgroundColor: this.props.content.button_background_color, | ||
| }; | ||
|
|
||
| return (<form className="EOYSnippetForm" action={this.props.content.donation_form_url} method={this.props.form_method} onSubmit={this.handleSubmit} ref="form"> | ||
| {fieldNames.map((field, idx) => { | ||
| const button_name = `donation_amount_${field}`; | ||
| const amount = this.props.content[button_name]; | ||
| return (<React.Fragment key={idx}> | ||
| <input type="radio" name="amount" value={amount} id={field} defaultChecked={button_name === selected_button} /> | ||
| <label htmlFor={field} className="donation-amount"> | ||
| {numberFormat.format(amount)} | ||
| </label> | ||
| </React.Fragment>); | ||
| })} | ||
|
|
||
| <div className="monthly-checkbox-container"> | ||
| <input id="monthly-checkbox" type="checkbox" /> | ||
| <label htmlFor="monthly-checkbox"> | ||
| {this.props.content.monthly_checkbox_label_text} | ||
| </label> | ||
| </div> | ||
|
|
||
| <input type="hidden" name="frequency" value="single" /> | ||
| <input type="hidden" name="currency" value={this.props.content.currency_code} /> | ||
| <input type="hidden" name="presets" value={fieldNames.map(field => this.props.content[`donation_amount_${field}`])} /> | ||
| <button style={btnStyle} type="submit" className="ASRouterButton donation-form-url">{this.props.content.button_label}</button> | ||
| </form>); | ||
| } | ||
|
|
||
| render() { | ||
| const textStyle = { | ||
| color: this.props.content.text_color, | ||
| backgroundColor: this.props.content.background_color, | ||
| }; | ||
| const customElement = <em style={{backgroundColor: this.props.content.highlight_color}} />; | ||
| return (<SimpleSnippet {...this.props} | ||
| className={this.props.content.test} | ||
| customElements={{em: customElement}} | ||
| textStyle={textStyle} | ||
| extraContent={this.renderDonations()} />); | ||
| } | ||
| } |
136 changes: 136 additions & 0 deletions
136
content-src/asrouter/templates/EOYSnippet/EOYSnippet.schema.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| { | ||
| "title": "EOYSnippet", | ||
| "description": "Fundraising Snippet", | ||
| "version": "1.0.0", | ||
| "type": "object", | ||
| "definitions": { | ||
| "plainText": { | ||
| "description": "Plain text (no HTML allowed)", | ||
| "type": "string" | ||
| }, | ||
| "richText": { | ||
| "description": "Text with HTML subset allowed: i, b, u, strong, em, br", | ||
| "type": "string" | ||
| }, | ||
| "link_url": { | ||
| "description": "Target for links or buttons", | ||
| "type": "string", | ||
| "format": "uri" | ||
| } | ||
| }, | ||
| "properties": { | ||
| "donation_form_url": { | ||
| "type": "string", | ||
| "description": "Url to the donation form." | ||
| }, | ||
| "currency_code": { | ||
| "type": "string", | ||
| "description": "The code for the currency. Examle gbp, cad, usd." | ||
| }, | ||
| "locale": { | ||
| "type": "string", | ||
| "description": "String for the locale code." | ||
| }, | ||
| "text": { | ||
| "allOf": [ | ||
| {"$ref": "#/definitions/richText"}, | ||
| {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"} | ||
| ] | ||
| }, | ||
| "text_color": { | ||
| "type": "string", | ||
| "description": "Modify the text message color" | ||
| }, | ||
| "background_color": { | ||
| "type": "string", | ||
| "description": "Snippet background color." | ||
| }, | ||
| "highlight_color": { | ||
| "type": "string", | ||
| "description": "Paragraph em highlight color." | ||
| }, | ||
| "donation_amount_first": { | ||
| "type": "number", | ||
| "description": "First button amount." | ||
| }, | ||
| "donation_amount_second": { | ||
| "type": "number", | ||
| "description": "Second button amount." | ||
| }, | ||
| "donation_amount_third": { | ||
| "type": "number", | ||
| "description": "Third button amount." | ||
| }, | ||
| "donation_amount_fourth": { | ||
| "type": "number", | ||
| "description": "Fourth button amount." | ||
| }, | ||
| "selected_button": { | ||
| "type": "string", | ||
| "description": "Default donation_amount_second. Donation amount button that's selected by default." | ||
| }, | ||
| "icon": { | ||
| "type": "string", | ||
| "description": "Snippet icon. 64x64px. SVG or PNG preferred." | ||
| }, | ||
| "title_icon": { | ||
| "type": "string", | ||
| "description": "Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale." | ||
| }, | ||
| "button_label": { | ||
| "allOf": [ | ||
| {"$ref": "#/definitions/plainText"}, | ||
| {"description": "Text for a button next to main snippet text that links to button_url. Requires button_url."} | ||
| ] | ||
| }, | ||
| "button_color": { | ||
| "type": "string", | ||
| "description": "The text color of the button. Valid CSS color." | ||
| }, | ||
| "button_background_color": { | ||
| "type": "string", | ||
| "description": "The background color of the button. Valid CSS color." | ||
| }, | ||
| "block_button_text": { | ||
| "type": "string", | ||
| "description": "Tooltip text used for dismiss button." | ||
| }, | ||
| "monthly_checkbox_label_text": { | ||
| "type": "string", | ||
| "description": "Label text for monthly checkbox." | ||
| }, | ||
| "test": { | ||
| "type": "string", | ||
| "description": "Different styles for the snippet. Options are bold and takeover." | ||
| }, | ||
| "do_not_autoblock": { | ||
| "type": "boolean", | ||
| "description": "Used to prevent blocking the snippet after the CTA (link or button) has been clicked" | ||
| }, | ||
| "links": { | ||
| "additionalProperties": { | ||
| "url": { | ||
| "allOf": [ | ||
| {"$ref": "#/definitions/link_url"}, | ||
| {"description": "The url where the link points to."} | ||
| ] | ||
| }, | ||
| "metric": { | ||
| "type": "string", | ||
| "description": "Custom event name sent with telemetry event." | ||
| }, | ||
| "args": { | ||
| "type": "string", | ||
| "description": "Additional parameters for link action, example which specific menu the button should open" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "additionalProperties": false, | ||
| "required": ["text", "donation_form_url", "donation_amount_first", "donation_amount_second", "donation_amount_third", "donation_amount_fourth", "button_label", "currency_code"], | ||
| "dependencies": { | ||
| "button_color": ["button_label"], | ||
| "button_background_color": ["button_label"] | ||
| } | ||
| } | ||
|
|
50 changes: 50 additions & 0 deletions
50
content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| .EOYSnippetForm { | ||
| margin-top: 12px; | ||
| align-self: start; | ||
| font-size: 12px; | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| .donation-amount, | ||
| .donation-form-url { | ||
| white-space: nowrap; | ||
| font-size: 14px; | ||
| padding: 5px 14px; | ||
| border-radius: 2px; | ||
| } | ||
|
|
||
| .donation-amount { | ||
| color: $grey-90; | ||
| margin-inline-end: 18px; | ||
| border: 1px solid $grey-40; | ||
| background: $grey-10; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| input { | ||
| &[type='radio'] { | ||
| opacity: 0; | ||
| margin-inline-end: -18px; | ||
|
|
||
| &:checked+.donation-amount { | ||
| background: $grey-50; | ||
| color: $white; | ||
| border: 1px solid $grey-60; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .monthly-checkbox-container { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .donation-form-url { | ||
| margin-inline-start: 18px; | ||
| background-color: $snippets-donation-button-bg; | ||
| border: 0; | ||
| color: $white; | ||
| align-self: flex-end; | ||
| display: flex; | ||
| cursor: pointer; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.