Check that at least one product is selected
@@ -4,6 +4,7 @@ import React, { useState } from "react";
import { FormattedMessage } from "react-intl";
import { jsx } from "theme-ui";
+import { Alert } from "../alert";
import { TicketsForm } from "../tickets-form";
import { Ticket } from "../tickets-form/types";
import { InvoiceInformationState, SelectedProducts } from "./types";
@@ -19,6 +20,9 @@ type Props = {
onUpdateIsBusiness: (isBusiness: boolean) => void;
};
+const hasSelectedAtLeastOneProduct = (selectedProducts: SelectedProducts) =>
+ Object.values(selectedProducts).length > 0;
+
export const TicketsSection: React.SFC<Props> = ({
tickets,
selectedProducts,
@@ -27,7 +31,18 @@ export const TicketsSection: React.SFC<Props> = ({
onNextStep,
invoiceInformation,
onUpdateIsBusiness,
-}) => (
+}) => {
+ const [shouldShowNoTickets, setShouldShowNoTickets] = useState(false);
+
+ const onContinue = () => {
+ if (hasSelectedAtLeastOneProduct(selectedProducts)) {
+ return onNextStep();
+ }
+
+ setShouldShowNoTickets(true);
+ };
+
+ return (
<React.Fragment>
<Heading sx={{ mb: 3 }}>
<FormattedMessage id="tickets.heading" />
@@ -77,8 +92,15 @@ export const TicketsSection: React.SFC<Props> = ({
/>
)}
- <Button onClick={onNextStep}>
+ {shouldShowNoTickets && (
+ <Alert variant="alert">
+ <FormattedMessage id="order.needToSelectProducts" />
+ </Alert>
+ )}
+
+ <Button onClick={onContinue}>
<FormattedMessage id="order.nextStep" />
</Button>
</React.Fragment>
);
+};
