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.

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

feat: added text overrides on CheckoutActions #453

Merged
Changes from all commits
Commits
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
33 changes: 27 additions & 6 deletions package/src/components/CheckoutActions/v1/CheckoutActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,10 @@ class CheckoutActions extends Component {
*/
props: PropTypes.object
})),
/**
* The text for the "Cancel" button text.
*/
cancelButtonText: PropTypes.string,
/**
* 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
Expand Down Expand Up @@ -123,10 +127,27 @@ class CheckoutActions extends Component {
* accepts compatible props.
*/
CheckoutActionIncomplete: CustomPropTypes.component.isRequired
}).isRequired
}).isRequired,
/**
* The text for the "Place your order" button text when `isSaving` equals `false`.
*/
isNotSavingButtonText: PropTypes.string,
/**
* The text for the "Placing your order..." button text when `isSaving` equals `true`.
*/
isSavingButtonText: PropTypes.string,
/**
* The text for the "Save and continue" button text.
*/
saveButtonText: PropTypes.string
};

static defaultProps = {};
static defaultProps = {
cancelButtonText: "Cancel",
isNotSavingButtonText: "Place your order",
isSavingButtonText: "Placing your order...",
saveButtonText: "Save and continue"
};

static getDerivedStateFromProps(props, state) {
if (!isEqual(props.actions, state.previousActionsProp)) {
Expand Down Expand Up @@ -233,7 +254,7 @@ class CheckoutActions extends Component {
};

renderFormActions = (action) => {
const { actions, components: { Button } } = this.props;
const { actions, components: { Button }, cancelButtonText, saveButtonText, isSavingButtonText, isNotSavingButtonText } = this.props;
const { readyForSave, isSaving } = this.getCurrentActionByID(action.id);
const lastStep = actions.length - 1 === this.getCurrentActionIndex(action.id);

Expand All @@ -246,21 +267,21 @@ class CheckoutActions extends Component {
this.setStateForAction(action.id, { isActive: false });
}}
>
Cancel
{cancelButtonText}
</Button>
) : (
""
)}
<Button onClick={() => this.actionSubmit(action.id)} isDisabled={!readyForSave} isWaiting={isSaving}>
Save and continue
{saveButtonText}
</Button>
</React.Fragment>
);

const placeOrderButton = (
<PlaceOrderButtonContainer>
<Button onClick={() => this.actionSubmit(action.id)} actionType="important" isWaiting={isSaving} isFullWidth>
{isSaving ? "Placing your order..." : "Place your order"}
{isSaving ? isSavingButtonText : isNotSavingButtonText}
</Button>
</PlaceOrderButtonContainer>
);
Expand Down