-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #388 from reactioncommerce/feat-aldeed-payment-che…
…ckout-components New checkout components for multiple payments
- Loading branch information
Showing
39 changed files
with
2,667 additions
and
162 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
133 changes: 133 additions & 0 deletions
133
package/src/components/AddressChoice/v1/AddressChoice.js
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,133 @@ | ||
| import React, { Component } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { withComponents } from "@reactioncommerce/components-context"; | ||
| import { addressToString, CustomPropTypes } from "../../../utils"; | ||
|
|
||
| class AddressChoice extends Component { | ||
| static propTypes = { | ||
| /** | ||
| * A list of addresses to show for selection | ||
| */ | ||
| addresses: CustomPropTypes.addressBook, | ||
| /** | ||
| * You can provide a `className` prop that will be applied to the outermost DOM element | ||
| * rendered by this component. We do not recommend using this for styling purposes, but | ||
| * it can be useful as a selector in some situations. | ||
| */ | ||
| className: PropTypes.string, | ||
| /** | ||
| * If you've set up a components context using | ||
| * [@reactioncommerce/components-context](https://github.com/reactioncommerce/components-context) | ||
| * (recommended), then this prop will come from there automatically. If you have not | ||
| * set up a components context or you want to override one of the components in a | ||
| * single spot, you can pass in the components prop directly. | ||
| */ | ||
| components: PropTypes.shape({ | ||
| /** | ||
| * Pass either the Reaction AddressForm component or your own component that | ||
| * accepts compatible props. | ||
| */ | ||
| AddressForm: CustomPropTypes.component.isRequired, | ||
| /** | ||
| * A reaction SelectableList component or compatible component. | ||
| */ | ||
| SelectableList: CustomPropTypes.component.isRequired | ||
| }), | ||
| /** | ||
| * If true, choosing an address and typing in address fields is disabled | ||
| */ | ||
| isReadOnly: PropTypes.bool, | ||
| /** | ||
| * Called with an address whenever the selected or entered | ||
| * address changes. If they selected one, it will be the | ||
| * complete address that was passed in `addresses`. If they're | ||
| * entering one, it will be whatever they have entered so far | ||
| * and may be partial. | ||
| */ | ||
| onChange: PropTypes.func, | ||
| /** | ||
| * The label for the "Use a different address" selection item, if it | ||
| * is shown. | ||
| */ | ||
| otherAddressLabel: PropTypes.string | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| isReadOnly: false, | ||
| onChange() {}, | ||
| otherAddressLabel: "Use a different address" | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| let selectedOption = "OTHER"; | ||
| if (Array.isArray(props.addresses) && props.addresses.length > 0) { | ||
| selectedOption = "0"; | ||
| } | ||
|
|
||
| this.state = { selectedOption }; | ||
| } | ||
|
|
||
| handleChangeAddress = (address) => { | ||
| this.props.onChange(address); | ||
| } | ||
|
|
||
| handleChangeSelection = (selectedOption) => { | ||
| const { addresses } = this.props; | ||
|
|
||
| this.setState({ selectedOption }); | ||
|
|
||
| if (selectedOption !== "OTHER" && Array.isArray(addresses)) { | ||
| this.props.onChange(addresses[Number(selectedOption)]); | ||
| } | ||
| } | ||
|
|
||
| renderSelectList() { | ||
| const { | ||
| addresses, | ||
| components: { SelectableList }, | ||
| isReadOnly, | ||
| otherAddressLabel | ||
| } = this.props; | ||
| const { selectedOption } = this.state; | ||
|
|
||
| if (!Array.isArray(addresses) || addresses.length === 0) return null; | ||
|
|
||
| const listOptions = addresses.map((address, index) => ({ | ||
| id: String(index), | ||
| label: addressToString(address, { includeFullName: true }), | ||
| value: String(index) | ||
| })); | ||
|
|
||
| listOptions.push({ | ||
| id: "OTHER", | ||
| label: otherAddressLabel, | ||
| value: "OTHER" | ||
| }); | ||
|
|
||
| return ( | ||
| <SelectableList | ||
| name="addressList" | ||
| isReadOnly={isReadOnly} | ||
| onChange={this.handleChangeSelection} | ||
| options={listOptions} | ||
| value={selectedOption} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| const { className, components: { AddressForm }, isReadOnly } = this.props; | ||
| const { selectedOption } = this.state; | ||
|
|
||
| return ( | ||
| <div className={className}> | ||
| {this.renderSelectList()} | ||
| {selectedOption === "OTHER" && <AddressForm isReadOnly={isReadOnly} onChange={this.handleChangeAddress} />} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withComponents(AddressChoice); |
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,84 @@ | ||
| ### Overview | ||
|
|
||
| The `AddressChoice` component is a way of collecting an address while giving an option of choosing a previously saved address. If no previously saved addresses are provided, it will render an [AddressForm](./#!/AddressForm). Otherwise it will render a choice list where each address is in the list and the final option is to enter a new address. | ||
|
|
||
| ### Usage | ||
|
|
||
| #### Simple | ||
| If you don't pass in any `addresses`, it renders an [AddressForm](./#!/AddressForm). | ||
|
|
||
| ```jsx | ||
| <AddressChoice onChange={console.log.bind(console)} /> | ||
| ``` | ||
|
|
||
| #### Read Only | ||
| Use `isReadOnly` prop to disable editing, such as when submitting the form or loading something. | ||
|
|
||
| ```jsx | ||
| <AddressChoice isReadOnly /> | ||
| ``` | ||
|
|
||
| #### With Addresses | ||
| When you provide one or more `addresses`, they are presented in a [SelectableList](./#!/SelectableList) along with a final option that shows the [AddressForm](./#!/AddressForm) when selected. | ||
|
|
||
| `onChange` prop is called whenever the address changes, whether by selecting an existing address or changing a field in the custom address form. | ||
|
|
||
| ```jsx | ||
| const addresses = [ | ||
| { | ||
| _id: "20", | ||
| address1: "7742 Hwy 23", | ||
| address2: "", | ||
| country: "US", | ||
| city: "Belle Chasse", | ||
| fullName: "Salvos Seafood", | ||
| postal: "70037", | ||
| region: "LA", | ||
| phone: "(504) 393-7303" | ||
| }, | ||
| { | ||
| _id: "21", | ||
| address1: "35 Akin Adesola St", | ||
| address2: "", | ||
| country: "NG", | ||
| city: "Lagos", | ||
| fullName: "Ocean Basket Victoria Island", | ||
| postal: "101241", | ||
| region: "Victoria Island", | ||
| phone: "234 816 059 1821" | ||
| } | ||
| ]; | ||
|
|
||
| <AddressChoice addresses={addresses} onChange={console.log.bind(console)} /> | ||
| ``` | ||
|
|
||
| #### Read Only With Addresses | ||
|
|
||
| ```jsx | ||
| const addresses = [ | ||
| { | ||
| _id: "20", | ||
| address1: "7742 Hwy 23", | ||
| address2: "", | ||
| country: "US", | ||
| city: "Belle Chasse", | ||
| fullName: "Salvos Seafood", | ||
| postal: "70037", | ||
| region: "LA", | ||
| phone: "(504) 393-7303" | ||
| }, | ||
| { | ||
| _id: "21", | ||
| address1: "35 Akin Adesola St", | ||
| address2: "", | ||
| country: "NG", | ||
| city: "Lagos", | ||
| fullName: "Ocean Basket Victoria Island", | ||
| postal: "101241", | ||
| region: "Victoria Island", | ||
| phone: "234 816 059 1821" | ||
| } | ||
| ]; | ||
|
|
||
| <AddressChoice addresses={addresses} isReadOnly onChange={console.log.bind(console)} /> | ||
| ``` |
Oops, something went wrong.