diff --git a/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx b/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx
index 013d181f665..16d54ff419b 100644
--- a/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx
+++ b/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx
@@ -147,4 +147,44 @@ describe('LocationCollectionItem', () => {
expect(sunHours).not.to.exist();
});
});
+
+ context('when handleSelect callback is not provided', () => {
+ it('renders the component without the button', () => {
+ const onClick = sinon.stub();
+ const { container } = render(
+ ,
+ );
+
+ expect(container.textContent).to.contain('in_person_proofing.body.location.location_button');
+ });
+ });
+
+ context('when handleSelect callback is provided', () => {
+ it('renders the component with the button', () => {
+ const { container } = render(
+ ,
+ );
+
+ expect(container.textContent).to.not.contain(
+ 'in_person_proofing.body.location.location_button',
+ );
+ });
+ });
});
diff --git a/app/javascript/packages/document-capture/components/location-collection-item.tsx b/app/javascript/packages/document-capture/components/location-collection-item.tsx
index 3cfc1ac2fd6..5d27d870685 100644
--- a/app/javascript/packages/document-capture/components/location-collection-item.tsx
+++ b/app/javascript/packages/document-capture/components/location-collection-item.tsx
@@ -4,7 +4,7 @@ import { useI18n } from '@18f/identity-react-i18n';
interface LocationCollectionItemProps {
distance?: string;
formattedCityStateZip: string;
- handleSelect: (event: React.MouseEvent, selection: number) => void;
+ handleSelect?: (event: React.MouseEvent, selection: number) => void;
name?: string;
saturdayHours: string;
selectId: number;
@@ -60,24 +60,28 @@ function LocationCollectionItem({
{`${t('in_person_proofing.body.location.retail_hours_sun')} ${sundayHours}`}
)}
- handleSelect(event, selectId)}
- type="submit"
- >
- {t('in_person_proofing.body.location.location_button')}
-
+ {handleSelect && (
+ handleSelect(event, selectId)}
+ type="submit"
+ >
+ {t('in_person_proofing.body.location.location_button')}
+
+ )}
- {
- handleSelect(event, selectId);
- }}
- type="submit"
- >
- {t('in_person_proofing.body.location.location_button')}
-
+ {handleSelect && (
+ {
+ handleSelect(event, selectId);
+ }}
+ type="submit"
+ >
+ {t('in_person_proofing.body.location.location_button')}
+
+ )}