-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
1,447 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosure.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Styles } from '@monkvision/types'; | ||
|
|
||
| export const styles: Styles = { | ||
| container: { | ||
| height: '100%', | ||
| width: '100%', | ||
| }, | ||
| orientationErrorContainer: { | ||
| height: '100%', | ||
| width: '100%', | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| flexDirection: 'column', | ||
| boxSizing: 'border-box', | ||
| padding: '50px 10%', | ||
| }, | ||
| orientationErrorTitleContainer: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }, | ||
| orientationErrorTitle: { | ||
| fontSize: 18, | ||
| marginLeft: 16, | ||
| }, | ||
| orientationErrorDescription: { | ||
| fontSize: 16, | ||
| paddingTop: 16, | ||
| opacity: 0.8, | ||
| textAlign: 'center', | ||
| }, | ||
| }; |
221 changes: 221 additions & 0 deletions
221
packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosure.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,221 @@ | ||
| import { useAnalytics } from '@monkvision/analytics'; | ||
| import { Camera, CameraHUDProps, CameraProps } from '@monkvision/camera-web'; | ||
| import { | ||
| useI18nSync, | ||
| useLoadingState, | ||
| useObjectMemo, | ||
| useWindowDimensions, | ||
| } from '@monkvision/common'; | ||
| import { BackdropDialog, Icon, InspectionGallery } from '@monkvision/common-ui-web'; | ||
| import { MonkApiConfig } from '@monkvision/network'; | ||
| import { | ||
| AddDamage, | ||
| CameraConfig, | ||
| CaptureAppConfig, | ||
| ComplianceOptions, | ||
| CompressionOptions, | ||
| DeviceOrientation, | ||
| MonkPicture, | ||
| } from '@monkvision/types'; | ||
| import { useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { styles } from './DamageDisclosure.styles'; | ||
| import { DamageDisclosureHUD, DamageDisclosureHUDProps } from './DamageDisclosureHUD'; | ||
| import { useDamageDisclosureState } from './hooks'; | ||
| import { | ||
| useAdaptiveCameraConfig, | ||
| useAddDamageMode, | ||
| usePhotoCaptureImages, | ||
| usePictureTaken, | ||
| useUploadQueue, | ||
| useBadConnectionWarning, | ||
| useTracking, | ||
| } from '../hooks'; | ||
| import { CaptureScreen } from '../types'; | ||
|
|
||
| /** | ||
| * Props of the DamageDisclosure component. | ||
| */ | ||
| export interface DamageDisclosureProps | ||
| extends Pick<CameraProps<DamageDisclosureHUDProps>, 'resolution' | 'allowImageUpscaling'>, | ||
| Pick< | ||
| CaptureAppConfig, | ||
| | keyof CameraConfig | ||
| | 'maxUploadDurationWarning' | ||
| | 'useAdaptiveImageQuality' | ||
| | 'showCloseButton' | ||
| | 'enforceOrientation' | ||
| | 'addDamage' | ||
| >, | ||
| Partial<CompressionOptions>, | ||
| Partial<ComplianceOptions> { | ||
| /** | ||
| * The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as | ||
| * the one described in the auth token in the `apiConfig` prop. | ||
| */ | ||
| inspectionId: string; | ||
| /** | ||
| * The api config used to communicate with the API. Make sure that the user described in the auth token is the same | ||
| * one as the one that created the inspection provided in the `inspectionId` prop. | ||
| */ | ||
| apiConfig: MonkApiConfig; | ||
| /** | ||
| * Callback called when the user clicks on the Close button. If this callback is not provided, the button will not be | ||
| * displayed on the screen. | ||
| */ | ||
| onClose?: () => void; | ||
| /** | ||
| * Callback called when inspection capture is complete. | ||
| */ | ||
| onComplete?: () => void; | ||
| /** | ||
| * Callback called when a picture has been taken by the user. | ||
| */ | ||
| onPictureTaken?: (picture: MonkPicture) => void; | ||
| /** | ||
| * The language to be used by this component. | ||
| * | ||
| * @default en | ||
| */ | ||
| lang?: string | null; | ||
| } | ||
|
|
||
| // No ts-doc for this component : the component exported is DamageDisclosureHOC | ||
| export function DamageDisclosure({ | ||
| inspectionId, | ||
| apiConfig, | ||
| onClose, | ||
| onComplete, | ||
| onPictureTaken, | ||
| useLiveCompliance = false, | ||
| maxUploadDurationWarning = 15000, | ||
| showCloseButton = false, | ||
| addDamage = AddDamage.PART_SELECT, | ||
| useAdaptiveImageQuality = true, | ||
| lang, | ||
| enforceOrientation, | ||
| ...initialCameraConfig | ||
| }: DamageDisclosureProps) { | ||
| useI18nSync(lang); | ||
| const complianceOptions: ComplianceOptions = useObjectMemo({ | ||
| useLiveCompliance, | ||
| }); | ||
| const { t } = useTranslation(); | ||
| const [currentScreen, setCurrentScreen] = useState(CaptureScreen.CAMERA); | ||
| const dimensions = useWindowDimensions(); | ||
| const analytics = useAnalytics(); | ||
| const loading = useLoadingState(); | ||
| const handleOpenGallery = () => { | ||
| setCurrentScreen(CaptureScreen.GALLERY); | ||
| analytics.trackEvent('Gallery Opened'); | ||
| }; | ||
| const addDamageHandle = useAddDamageMode({ | ||
| addDamage, | ||
| currentScreen, | ||
| damageDisclosure: true, | ||
| handleOpenGallery, | ||
| }); | ||
| const disclosureState = useDamageDisclosureState({ | ||
| inspectionId, | ||
| apiConfig, | ||
| loading, | ||
| complianceOptions, | ||
| }); | ||
| useTracking({ inspectionId, authToken: apiConfig.authToken }); | ||
| const { adaptiveCameraConfig, uploadEventHandlers: adaptiveUploadEventHandlers } = | ||
| useAdaptiveCameraConfig({ | ||
| initialCameraConfig, | ||
| useAdaptiveImageQuality, | ||
| }); | ||
| const { | ||
| isBadConnectionWarningDialogDisplayed, | ||
| closeBadConnectionWarningDialog, | ||
| uploadEventHandlers: badConnectionWarningUploadEventHandlers, | ||
| } = useBadConnectionWarning({ maxUploadDurationWarning }); | ||
| const uploadQueue = useUploadQueue({ | ||
| inspectionId, | ||
| apiConfig, | ||
| complianceOptions, | ||
| eventHandlers: [adaptiveUploadEventHandlers, badConnectionWarningUploadEventHandlers], | ||
| }); | ||
| const images = usePhotoCaptureImages(inspectionId); | ||
| const handlePictureTaken = usePictureTaken({ | ||
| sightState: disclosureState, | ||
| addDamageHandle, | ||
| uploadQueue, | ||
| onPictureTaken, | ||
| }); | ||
| const handleGalleryBack = () => { | ||
| setCurrentScreen(CaptureScreen.CAMERA); | ||
| }; | ||
| const isViolatingEnforcedOrientation = | ||
| enforceOrientation && | ||
| (enforceOrientation === DeviceOrientation.PORTRAIT) !== dimensions.isPortrait; | ||
| const hudProps: Omit<DamageDisclosureHUDProps, keyof CameraHUDProps> = { | ||
| inspectionId, | ||
| mode: addDamageHandle.mode, | ||
| vehicleParts: addDamageHandle.vehicleParts, | ||
| lastPictureTakenUri: disclosureState.lastPictureTakenUri, | ||
| onOpenGallery: handleOpenGallery, | ||
| onAddDamage: addDamageHandle.handleAddDamage, | ||
| onAddDamagePartsSelected: addDamageHandle.handleAddDamagePartsSelected, | ||
| onCancelAddDamage: addDamageHandle.handleCancelAddDamage, | ||
| onRetry: disclosureState.retryLoadingInspection, | ||
| loading, | ||
| onClose, | ||
| showCloseButton, | ||
| images, | ||
| addDamage, | ||
| onValidateVehicleParts: addDamageHandle.handleValidateVehicleParts, | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={styles['container']}> | ||
| {currentScreen === CaptureScreen.CAMERA && isViolatingEnforcedOrientation && ( | ||
| <div style={styles['orientationErrorContainer']}> | ||
| <div style={styles['orientationErrorTitleContainer']}> | ||
| <Icon icon='rotate' primaryColor='text-primary' size={30} /> | ||
| <div style={styles['orientationErrorTitle']}>{t('photo.orientationError.title')}</div> | ||
| </div> | ||
| <div style={styles['orientationErrorDescription']}> | ||
| {t('photo.orientationError.description')} | ||
| </div> | ||
| </div> | ||
| )} | ||
| {currentScreen === CaptureScreen.CAMERA && !isViolatingEnforcedOrientation && ( | ||
| <Camera | ||
| HUDComponent={DamageDisclosureHUD} | ||
| onPictureTaken={handlePictureTaken} | ||
| hudProps={hudProps} | ||
| {...adaptiveCameraConfig} | ||
| /> | ||
| )} | ||
| {currentScreen === CaptureScreen.GALLERY && ( | ||
| <InspectionGallery | ||
| inspectionId={inspectionId} | ||
| sights={[]} | ||
| apiConfig={apiConfig} | ||
| captureMode={true} | ||
| lang={lang} | ||
| showBackButton={true} | ||
| onBack={handleGalleryBack} | ||
| onNavigateToCapture={handleGalleryBack} | ||
| onValidate={onComplete} | ||
| addDamage={addDamage} | ||
| validateButtonLabel={t('photo.gallery.next')} | ||
| isInspectionCompleted={false} | ||
| disableSightPicture={true} | ||
| /> | ||
| )} | ||
| <BackdropDialog | ||
| show={isBadConnectionWarningDialogDisplayed} | ||
| showCancelButton={false} | ||
| dialogIcon='warning-outline' | ||
| dialogIconPrimaryColor='caution-base' | ||
| message={t('photo.badConnectionWarning.message')} | ||
| confirmLabel={t('photo.badConnectionWarning.confirm')} | ||
| onConfirm={closeBadConnectionWarningDialog} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
40 changes: 40 additions & 0 deletions
40
packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHOC.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { i18nWrap, MonkProvider } from '@monkvision/common'; | ||
| import { i18nInspectionCaptureWeb } from '../i18n'; | ||
| import { DamageDisclosure, DamageDisclosureProps } from './DamageDisclosure'; | ||
|
|
||
| /** | ||
| * The DamageDisclosure component is a ready-to-use, single page component that implements a Camera app, allowing users | ||
| * to capture photos of damaged parts of their vehicle for the purpose of disclosing damage. In order to use this | ||
| * component, you first need to generate an Auth0 authentication token, and create an inspection using the Monk Api. | ||
| * When creating the inspection, don't forget to set the tasks statuses to `NOT_STARTED`. This component will handle the | ||
| * starting of the tasks at the end of the capturing process. You can then pass the inspection ID, the api config (with | ||
| * the auth token), as well as the list of sights to be taken by the user to this component, and everything will be | ||
| * handled automatically for you. | ||
| * | ||
| * @example | ||
| * import { DamageDisclosure } from '@monkvision/inspection-capture-web'; | ||
| * | ||
| * export function PhotoCaptureScreen({ inspectionId, apiConfig }: PhotoCaptureScreenProps) { | ||
| * const { i18n } = useTranslation(); | ||
| * | ||
| * return ( | ||
| * <DamageDisclosure | ||
| * inspectionId={inspectionId} | ||
| * apiConfig={apiConfig} | ||
| * compliances={{ iqa: true }} | ||
| * onComplete={() => { / * Navigate to another page * / }} | ||
| * lang={i18n.language} | ||
| * /> | ||
| * ); | ||
| * } | ||
| */ | ||
| export const DamageDisclosureHOC = i18nWrap(function DamageDisclosureHOC( | ||
| props: DamageDisclosureProps, | ||
| ) { | ||
| return ( | ||
| <MonkProvider> | ||
| <DamageDisclosure {...props} /> | ||
| </MonkProvider> | ||
| ); | ||
| }, | ||
| i18nInspectionCaptureWeb); |
23 changes: 23 additions & 0 deletions
23
...ection-capture-web/src/DamageDisclosure/DamageDisclosureHUD/DamageDisclosureHUD.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { Styles } from '@monkvision/types'; | ||
|
|
||
| export const styles: Styles = { | ||
| container: { | ||
| width: '100%', | ||
| height: '100%', | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| justifyContent: 'flex-end', | ||
| position: 'relative', | ||
| alignSelf: 'stretch', | ||
| }, | ||
| containerPortrait: { | ||
| __media: { portrait: true }, | ||
| flexDirection: 'column', | ||
| }, | ||
| previewContainer: { | ||
| position: 'relative', | ||
| width: '100%', | ||
| height: '100%', | ||
| }, | ||
| }; |
Oops, something went wrong.