Skip to content

Commit

Permalink
feat: added text override on CheckoutActions
Browse files Browse the repository at this point in the history
Signed-off-by: Haris Spahija <haris.spahija@pon.com>
  • Loading branch information
HarisSpahijaPon committed Nov 21, 2019
1 parent 4808ec2 commit 3ca2ba2
Showing 1 changed file with 27 additions and 6 deletions.
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

0 comments on commit 3ca2ba2

Please sign in to comment.