AddProjectBuilderSelectionView.tsx

import React, { FunctionComponent, useMemo } from 'react';
import { Else, If, Then } from 'react-if';
import ViewStep from '../view-step/ViewStep';
import { ProjectFormData } from '../../js/types/Project';
import { BuilderListItem } from '../../js/types/Builder';
import FormSection from '../form-section/FormSection';
import { AddProjectSteps } from '../../6-react-app/containers/add-project-button/AddProjectButton';
import TileBuilderCard from '../../3-components/tile-builder-card/TileBuilderCard';

interface ViewStepProps {
    step: AddProjectSteps;
    totalSteps: number;
    onCancel: () => void;
    currentDetails: ProjectFormData;
    onBuilderSelect: (details: ProjectFormData) => void;
    onSubmit: (details: ProjectFormData) => void;
    builderFilterString: string;
    filteredBuilders: BuilderListItem[];
    onUpdateFilterString: (string: string) => void;
}

const AddProjectBuilderSelectionView: FunctionComponent<ViewStepProps> = ({
    step,
    totalSteps,
    onCancel,
    currentDetails,
    onBuilderSelect,
    onSubmit,
    builderFilterString,
    filteredBuilders,
    onUpdateFilterString
}) => {
    const selectedBuilder = useMemo(
        () =>
            filteredBuilders.find(
                builder => builder.id === currentDetails.builder.id
            ),
        [filteredBuilders, currentDetails]
    );

    const updateBuilderSearch = ({
        target
    }: React.ChangeEvent<HTMLInputElement>) =>
        onUpdateFilterString(target.value);

    const handleBuilderSelected = ({ id }: BuilderListItem) => {
        onBuilderSelect({
            ...currentDetails,
            builder: {
                ...currentDetails.builder,
                id
            }
        });
    };

    const handleNextStep = () => {
        if (currentDetails.builder.id) {
            onSubmit(currentDetails);
        }
    };

    return (
        <ViewStep
            heading="Builder"
            step={step}
            totalSteps={totalSteps}
            prevText="Cancel &amp; Go Back"
            prevCallback={onCancel}
            nextText="Next Step"
            nextEnabled={Boolean(selectedBuilder)}
            nextCallback={handleNextStep}
        >
            <div
                className="c-add-project-builder-selection-view"
                data-testroot="cadd2"
            >
                <If condition={Boolean(filteredBuilders.length)}>
                    <Then>
                        <FormSection
                            heading="Select a Builder"
                            customContainer={true}
                        >
                            <div className="cadd2-search-results">
                                <div className="cadd2-search-container">
                                    {filteredBuilders.map(builder => (
                                        <TileBuilderCard
                                            key={builder.id}
                                            builder={builder}
                                            isSelected={Boolean(
                                                currentDetails.builder.id ===
                                                    builder.id
                                            )}
                                            selectedCallback={
                                                handleBuilderSelected
                                            }
                                        />
                                    ))}
                                </div>
                            </div>
                        </FormSection>
                    </Then>
                    <Else>
                        <FormSection heading="Select a Builder">
                            <div
                                className="cadd2-search-empty"
                                data-testid="builder-filtered-empty"
                            >
                                No builder found, please refine your keywords
                            </div>
                        </FormSection>
                    </Else>
                </If>

                <FormSection>
                    <label
                        htmlFor="cadd2-search-input"
                        className="cadd2-search-label"
                    >
                        ..or select from the list
                    </label>
                    <input
                        onChange={updateBuilderSearch}
                        value={builderFilterString}
                        name="cadd2-search-input"
                        type="search"
                        placeholder="Start typing a builder name, state, address or phone number then select from the list."
                        className="cadd2-search-input"
                        data-testid="builder-search-input"
                    />
                </FormSection>

                {selectedBuilder && (
                    <FormSection>
                        <div className="cadd2-selected-heading">
                            Confirm Details
                        </div>
                        <div
                            className="cadd2-selected-content"
                            data-testid="builder-selected"
                        >
                            <div
                                className="cadd2-selected-name"
                                data-testid="name"
                            >
                                {selectedBuilder.name}
                            </div>
                            <div className="cadd2-selected-info">
                                <div
                                    className="cadd2-selected-text"
                                    data-testid="address-line-1"
                                >
                                    {selectedBuilder.primaryAddressHouseNumber}{' '}
                                    {selectedBuilder.primaryAddressStreet}
                                </div>
                                <div
                                    className="cadd2-selected-text"
                                    data-testid="address-line-2"
                                >
                                    {selectedBuilder.primaryAddressSuburb}{' '}
                                    {
                                        selectedBuilder.primaryAddressStateShortName
                                    }{' '}
                                    {selectedBuilder.primaryAddressPostcode}
                                </div>
                            </div>
                            <div className="cadd2-selected-info">
                                <div
                                    className="cadd2-selected-text"
                                    data-testid="contactName"
                                >
                                    {selectedBuilder.contactUser.firstName}{' '}
                                    {selectedBuilder.contactUser.lastName}
                                </div>
                                <div
                                    className="cadd2-selected-text"
                                    data-testid="contactPhone"
                                >
                                    {selectedBuilder.contactUser.phoneNumber}
                                </div>
                            </div>
                        </div>
                    </FormSection>
                )}
            </div>
        </ViewStep>
    );
};

export default AddProjectBuilderSelectionView;

AddProjectButton.tsx

<AddProjectBuilderSelectionView
    step={AddProjectSteps.BuilderSelection}
    totalSteps={TOTAL_STEPS}
    onCancel={goBack}
    currentDetails={projectData}
    onBuilderSelect={setProjectData} // <- this is now *required* to add in AddProjectButton
    onSubmit={goForward}
    builderFilterString={builderFilterString}
    filteredBuilders={filteredBuilders}
    onUpdateFilterString={updateFilteredBuilders}
/>