Merge pull request #547 from open-formulieren/chore/restructure-appoi…

…ntments-code

🚚 Group appointment components for more logical code organization

src/components/appointments/CreateAppointment/Summary.js

@@ -15,12 +15,12 @@ import SummaryConfirmation from 'components/SummaryConfirmation';
 import {ValidationError} from 'errors';
 import useTitle from 'hooks/useTitle';
 
-import {getContactDetailsFields} from '../ContactDetailsStep';
-import {fieldLabel as dateLabel} from '../DateSelect';
-import {getLocations, fieldLabel as locationLabel} from '../LocationSelect';
-import {amountLabel} from '../Product';
-import {getAllProducts, fieldLabel as productLabel} from '../ProductSelect';
-import {fieldLabel as timeLabel} from '../TimeSelect';
+import {fieldLabel as dateLabel} from '../fields/DateSelect';
+import {getLocations, fieldLabel as locationLabel} from '../fields/LocationSelect';
+import {amountLabel} from '../fields/Product';
+import {getAllProducts, fieldLabel as productLabel} from '../fields/ProductSelect';
+import {fieldLabel as timeLabel} from '../fields/TimeSelect';
+import {getContactDetailsFields} from '../steps/ContactDetailsStep';
 import {useCreateAppointmentContext} from './CreateAppointmentState';
 
 const createAppointment = async (baseUrl, submission, appointmentData, statementValues) => {

src/components/appointments/CreateAppointment/routes.js

@@ -3,9 +3,7 @@ import {Navigate, matchPath, resolvePath} from 'react-router-dom';
 
 import useQuery from 'hooks/useQuery';
 
-import ChooseProductStep from '../ChooseProductStep';
-import ContactDetailsStep from '../ContactDetailsStep';
-import LocationAndTimeStep from '../LocationAndTimeStep';
+import {ChooseProductStep, ContactDetailsStep, LocationAndTimeStep} from '../steps';
 import Confirmation from './Confirmation';
 import Summary from './Summary';
 

src/components/appointments/ManageAppointment.js

@@ -4,8 +4,7 @@ import {Route, Routes} from 'react-router-dom';
 import ErrorBoundary from 'components/ErrorBoundary';
 import {LayoutColumn} from 'components/Layout';
 
-import CancelAppointment from './CancelAppointment';
-import CancelAppointmentSuccess from './CancelAppointmentSuccess';
+import {CancelAppointment, CancelAppointmentSuccess} from './cancel';
 
 // with react router v6, these routes can be hoisted into the App if we'd like to
 

src/components/appointments/CancelAppointment.stories.js → src/components/appointments/cancel/CancelAppointment.stories.js

@@ -3,8 +3,8 @@ import {withRouter} from 'storybook-addon-react-router-v6';
 import Card from 'components/Card';
 import {ConfigDecorator, LayoutDecorator} from 'story-utils/decorators';
 
+import {mockAppointmentCancelErrorPost, mockAppointmentCancelPost} from '../mocks';
 import CancelAppointment from './CancelAppointment';
-import {mockAppointmentCancelErrorPost, mockAppointmentCancelPost} from './mocks';
 
 export default {
   title: 'Private API / Appointments / Cancellation / Cancel',

src/components/appointments/cancel/index.js

@@ -0,0 +1,2 @@
+export {default as CancelAppointment} from './CancelAppointment';
+export {default as CancelAppointmentSuccess} from './CancelAppointmentSuccess';

src/components/appointments/DateSelect.js → src/components/appointments/fields/DateSelect.js

@@ -10,8 +10,8 @@ import {ConfigContext} from 'Context';
 import {get} from 'api';
 import {DateField} from 'components/forms';
 
-import {ProductsType} from './types';
-import {prepareProductsForProductIDQuery} from './utils';
+import {ProductsType} from '../types';
+import {prepareProductsForProductIDQuery} from '../utils';
 
 export const fieldLabel = defineMessage({
   description: 'Appoinments: appointment date label',

src/components/appointments/DateSelect.spec.js → src/components/appointments/fields/DateSelect.spec.js

@@ -9,8 +9,8 @@ import {ConfigContext} from 'Context';
 import {BASE_URL} from 'api-mocks';
 import mswServer from 'api-mocks/msw-server';
 
+import {mockAppointmentDatesGet} from '../mocks';
 import DateSelect from './DateSelect';
-import {mockAppointmentDatesGet} from './mocks';
 
 const waitForPosition = () => act(async () => {});
 

src/components/appointments/DateSelect.stories.js → src/components/appointments/fields/DateSelect.stories.js

@@ -3,8 +3,8 @@ import {userEvent, within} from '@storybook/testing-library';
 
 import {ConfigDecorator, FormikDecorator} from 'story-utils/decorators';
 
+import {mockAppointmentDatesGet} from '../mocks';
 import DateSelect from './DateSelect';
-import {mockAppointmentDatesGet} from './mocks';
 
 export default {
   title: 'Private API / Appointments / Fields / DateSelect',

src/components/appointments/LocationSelect.js → src/components/appointments/fields/LocationSelect.js

@@ -7,7 +7,7 @@ import {get} from 'api';
 import {getCached, setCached} from 'cache';
 import {AsyncSelectField} from 'components/forms';
 
-import {ProductsType} from './types';
+import {ProductsType} from '../types';
 
 // TODO: use a nicer widget/form field than select
 

src/components/appointments/LocationSelect.stories.js → src/components/appointments/fields/LocationSelect.stories.js

@@ -3,8 +3,8 @@ import {userEvent, waitFor, within} from '@storybook/testing-library';
 
 import {ConfigDecorator, FormikDecorator} from 'story-utils/decorators';
 
+import {mockAppointmentLocationsGet} from '../mocks';
 import LocationSelect from './LocationSelect';
-import {mockAppointmentLocationsGet} from './mocks';
 
 export default {
   title: 'Private API / Appointments / Fields / LocationSelect',

src/components/appointments/Product.js → src/components/appointments/fields/Product.js

@@ -4,9 +4,9 @@ import {defineMessage, useIntl} from 'react-intl';
 
 import {NumberField} from 'components/forms';
 
-import {AppointmentConfigContext} from './Context';
+import {AppointmentConfigContext} from '../Context';
+import {ProductsType} from '../types';
 import ProductSelect from './ProductSelect';
-import {ProductsType} from './types';
 
 export const amountLabel = defineMessage({
   description: 'Appointments: product amount field label',

src/components/appointments/Product.stories.js → src/components/appointments/fields/Product.stories.js

@@ -3,9 +3,9 @@ import {userEvent, within} from '@storybook/testing-library';
 
 import {ConfigDecorator, FormikDecorator} from 'story-utils/decorators';
 
-import {AppointmentConfigContext} from './Context';
+import {AppointmentConfigContext} from '../Context';
+import {mockAppointmentProductsGet} from '../mocks';
 import Product from './Product';
-import {mockAppointmentProductsGet} from './mocks';
 
 const PRODUCTS_DATA = [
   {

src/components/appointments/ProductSelect.js → src/components/appointments/fields/ProductSelect.js

@@ -8,7 +8,7 @@ import {get} from 'api';
 import {getCached, setCached} from 'cache';
 import {AsyncSelectField} from 'components/forms';
 
-import {ProductsType} from './types';
+import {ProductsType} from '../types';
 
 const CACHED_PRODUCTS_KEY = 'appointment|all-products';
 const CACHED_PRODUCTS_MAX_AGE_MS = 15 * 60 * 1000; // 15 minutes

src/components/appointments/ProductSelect.stories.js → src/components/appointments/fields/ProductSelect.stories.js

@@ -3,8 +3,8 @@ import {userEvent, within} from '@storybook/testing-library';
 
 import {ConfigDecorator, FormikDecorator} from 'story-utils/decorators';
 
+import {mockAppointmentProductsGet} from '../mocks';
 import {default as ProductSelectComponent} from './ProductSelect';
-import {mockAppointmentProductsGet} from './mocks';
 
 export default {
   title: 'Private API / Appointments / Fields / ProductSelect',

src/components/appointments/TimeSelect.js → src/components/appointments/fields/TimeSelect.js

@@ -8,8 +8,8 @@ import {get} from 'api';
 import {AsyncSelectField} from 'components/forms';
 import {useCalendarLocale} from 'components/forms/DateField';
 
-import {ProductsType} from './types';
-import {prepareProductsForProductIDQuery} from './utils';
+import {ProductsType} from '../types';
+import {prepareProductsForProductIDQuery} from '../utils';
 
 export const fieldLabel = defineMessage({
   description: 'Appoinments: time select label',

src/components/appointments/TimeSelect.stories.js → src/components/appointments/fields/TimeSelect.stories.js

@@ -4,8 +4,8 @@ import {addDays, formatISO} from 'date-fns';
 
 import {ConfigDecorator, FormikDecorator} from 'story-utils/decorators';
 
+import {mockAppointmentTimesGet} from '../mocks';
 import TimeSelect from './TimeSelect';
-import {mockAppointmentTimesGet} from './mocks';
 
 const tomorrow = formatISO(addDays(new Date(), 1), {representation: 'date'});
 

src/components/appointments/fields/index.js

@@ -0,0 +1,4 @@
+export {default as DateSelect} from './DateSelect';
+export {default as LocationSelect} from './LocationSelect';
+export {default as Product} from './Product';
+export {default as TimeSelect} from './TimeSelect';

src/components/appointments/ChooseProductStep.js → src/components/appointments/steps/ChooseProductStep.js

@@ -16,10 +16,10 @@ import useQuery from 'hooks/useQuery';
 import useTitle from 'hooks/useTitle';
 import {getBEMClassName} from 'utils';
 
-import {AppointmentConfigContext} from './Context';
-import {useCreateAppointmentContext} from './CreateAppointment/CreateAppointmentState';
-import Product from './Product';
-import SubmitRow from './SubmitRow';
+import {AppointmentConfigContext} from '../Context';
+import {useCreateAppointmentContext} from '../CreateAppointment/CreateAppointmentState';
+import SubmitRow from '../SubmitRow';
+import {Product} from '../fields';
 
 const productSchema = z
   .array(

src/components/appointments/ChooseProductStep.spec.js → src/components/appointments/steps/ChooseProductStep.spec.js

@@ -8,10 +8,10 @@ import {ConfigContext} from 'Context';
 import {BASE_URL, buildSubmission} from 'api-mocks';
 import mswServer from 'api-mocks/msw-server';
 
+import {CreateAppointmentContext} from '../Context';
+import {buildContextValue} from '../CreateAppointment/CreateAppointmentState';
+import {mockAppointmentProductsGet} from '../mocks';
 import ChooseProductStep from './ChooseProductStep';
-import {CreateAppointmentContext} from './Context';
-import {buildContextValue} from './CreateAppointment/CreateAppointmentState';
-import {mockAppointmentProductsGet} from './mocks';
 
 const render = () => {
   const appointmentContext = buildContextValue({

src/components/appointments/ChooseProductStep.stories.js → src/components/appointments/steps/ChooseProductStep.stories.js

@@ -4,10 +4,10 @@ import {withRouter} from 'storybook-addon-react-router-v6';
 
 import {ConfigDecorator, LayoutDecorator, withCard} from 'story-utils/decorators';
 
+import {AppointmentConfigContext} from '../Context';
+import {mockAppointmentProductsGet} from '../mocks';
+import {withAppointmentState} from '../story-utils';
 import ChooseProductStep from './ChooseProductStep';
-import {AppointmentConfigContext} from './Context';
-import {mockAppointmentProductsGet} from './mocks';
-import {withAppointmentState} from './story-utils';
 
 export default {
   title: 'Private API / Appointments / Steps / 1 - Choose product',

src/components/appointments/ContactDetailsStep.js → src/components/appointments/steps/ContactDetailsStep.js

@@ -16,8 +16,8 @@ import Loader from 'components/Loader';
 import {FormioComponent, getEmptyValue, getSchema} from 'components/formio';
 import useTitle from 'hooks/useTitle';
 
-import {useCreateAppointmentContext} from './CreateAppointment/CreateAppointmentState';
-import SubmitRow from './SubmitRow';
+import {useCreateAppointmentContext} from '../CreateAppointment/CreateAppointmentState';
+import SubmitRow from '../SubmitRow';
 
 const CACHED_CONTACT_DETAILS_FIELDS_KEY = 'appointments|contactDetailsFields';
 const CACHED_CONTACT_DETAILS_FIELDS_MAX_AGE_MS = 15 * 60 * 1000; // 15 minutes

src/components/appointments/ContactDetailsStep.stories.js → src/components/appointments/steps/ContactDetailsStep.stories.js

@@ -5,9 +5,9 @@ import {withRouter} from 'storybook-addon-react-router-v6';
 
 import {ConfigDecorator, LayoutDecorator, withCard} from 'story-utils/decorators';
 
+import {mockAppointmentCustomerFieldsGet} from '../mocks';
+import {withAppointmentState} from '../story-utils';
 import ContactDetailsStep from './ContactDetailsStep';
-import {mockAppointmentCustomerFieldsGet} from './mocks';
-import {withAppointmentState} from './story-utils';
 
 const TOMORROW = formatISO(addDays(new Date(), 1), {representation: 'date'});
 

src/components/appointments/LocationAndTimeStep.js → src/components/appointments/steps/LocationAndTimeStep.js

@@ -14,13 +14,11 @@ import {CardTitle} from 'components/Card';
 import Loader from 'components/Loader';
 import useTitle from 'hooks/useTitle';
 
-import {useCreateAppointmentContext} from './CreateAppointment/CreateAppointmentState';
-import DateSelect from './DateSelect';
-import LocationSelect from './LocationSelect';
-import {getAllProducts} from './ProductSelect';
-import SubmitRow from './SubmitRow';
-import TimeSelect from './TimeSelect';
-import {ProductsType} from './types';
+import {useCreateAppointmentContext} from '../CreateAppointment/CreateAppointmentState';
+import SubmitRow from '../SubmitRow';
+import {DateSelect, LocationSelect, TimeSelect} from '../fields';
+import {getAllProducts} from '../fields/ProductSelect';
+import {ProductsType} from '../types';
 
 const schema = z.object({
   location: z.string(),

src/components/appointments/LocationAndTimeStep.spec.js → src/components/appointments/steps/LocationAndTimeStep.spec.js

@@ -9,15 +9,15 @@ import {ConfigContext} from 'Context';
 import {BASE_URL, buildSubmission} from 'api-mocks';
 import mswServer from 'api-mocks/msw-server';
 
-import {CreateAppointmentContext} from './Context';
-import {buildContextValue} from './CreateAppointment/CreateAppointmentState';
-import LocationAndTimeStep from './LocationAndTimeStep';
+import {CreateAppointmentContext} from '../Context';
+import {buildContextValue} from '../CreateAppointment/CreateAppointmentState';
 import {
   mockAppointmentDatesGet,
   mockAppointmentLocationsGet,
   mockAppointmentProductsGet,
   mockAppointmentTimesGet,
-} from './mocks';
+} from '../mocks';
+import LocationAndTimeStep from './LocationAndTimeStep';
 
 const render = initialValues => {
   const {products, ...stepData} = initialValues;

src/components/appointments/LocationAndTimeStep.stories.js → src/components/appointments/steps/LocationAndTimeStep.stories.js

@@ -5,14 +5,14 @@ import {withRouter} from 'storybook-addon-react-router-v6';
 
 import {ConfigDecorator, LayoutDecorator, withCard} from 'story-utils/decorators';
 
-import LocationAndTimeStep from './LocationAndTimeStep';
 import {
   mockAppointmentDatesGet,
   mockAppointmentLocationsGet,
   mockAppointmentProductsGet,
   mockAppointmentTimesGet,
-} from './mocks';
-import {withAppointmentState} from './story-utils';
+} from '../mocks';
+import {withAppointmentState} from '../story-utils';
+import LocationAndTimeStep from './LocationAndTimeStep';
 
 export default {
   title: 'Private API / Appointments / Steps / 2 - Location and time',

src/components/appointments/steps/index.js

@@ -0,0 +1,3 @@
+export {default as ChooseProductStep} from './ChooseProductStep';
+export {default as ContactDetailsStep} from './ContactDetailsStep';
+export {default as LocationAndTimeStep} from './LocationAndTimeStep';