\n
\n
{`${\n inEditMode\n ? 'Upload Images'\n : isUploading\n ? 'Uploading images...'\n : 'Upload complete'\n }`}
\n {!inEditMode && (\n \n {uploadProgress != null\n ? `${uploadProgress.toFixed(0)}%`\n : `${getNumberOfUploadedFiles()}/${numberOfFiles} uploaded`}\n \n )}\n \n
\n
\n \n Farm\n \n onFarmChange(v.value)}\n disabled={!inEditMode}\n />\n
\n
\n \n Field\n \n ({ value: -1, label }),\n }}\n disabled={!inEditMode}\n onChange={v => onFieldNameChange(v.label)}\n />\n
\n {crops && (\n
\n \n Crop\n \n ({ value: -1, label }),\n }}\n disabled={!inEditMode}\n onChange={v => onCropChange(v.label)}\n />\n
\n )}\n
\n {options.length > 0 && (\n
\n {options.map(({ key, Component }) => {\n return (\n
\n onOptionChange(key, active)}\n />\n
\n )\n })}\n
\n )}\n\n {isOverlappingProject && (gcpEnabled || purchasesEnabled) && (\n
\n {!gcpState ? (\n
\n gcpEnabled ? setShowGcp(uuid()) : setShowBuyAddOn(true)\n }>\n Add Ground Control Points\n \n ) : (\n \n \n {\n gcpState.gcps.filter(p => isValidGcp(p, gcpState.markers))\n .length\n }{' '}\n GCPs registered\n \n setShowGcp(uuid())}>\n Edit\n \n
\n )}\n \n )}\n {missingGeoreference && (\n
\n {\n positionImportFileInput.current.value = null\n positionImportFileInput.current.click()\n }}>\n Import Image Positions\n \n
\n )}\n\n {cost && inEditMode && (\n
{costToString(cost, units)}\n )}\n {isDoneUploading ||\n (hasUploadError && (\n
\n {(isDoneUploading && <>{success(projectType).message}) ||\n (hasUploadError &&\n 'Something went wrong when uploading images, please try again')}\n \n ))}\n\n
\n {isDoneUploading && projectId ? (\n \n {success(projectType).linkText}\n \n ) : (\n \n {isUploading ? (\n \n ) : (\n `Upload ${numberOfFiles} ${\n numberOfFiles === 1 ? 'image' : 'images'\n }`\n )}\n \n )}\n
\n\n {gcpEnabled && showGcp && (\n
setShowGcp(false)}\n />\n )}\n {\n const file = positionImportFileInput.current.files[0]\n if (file) {\n setPositionsFile(file)\n setImportPositions(true)\n }\n }}\n />\n {positionsFile && showImportPositions && (\n f.file.name)}\n file={positionsFile}\n show={showImportPositions}\n skipMinimumNumberMapped={true}\n onClose={onCloseImportPositions}\n />\n )}\n \n Achieve centimeter-level accuracy with your maps using Ground\n Control Points (GCP).\n
\n \n GCP is an add-on that allows registering Ground Control Points in\n the images and use them to more accurately georeference the maps.\n
\n \n }\n onDismiss={() => {\n setShowBuyAddOn(false)\n onPermissionsUpdated()\n setShowGcp(uuid())\n }}\n products={gcpAddOnProduct}\n defaultProductId={gcpAddOnProduct[0]?.id}\n createSubscription={subscriptionOptions =>\n apiClient.subscriptions.create({ ...subscriptionOptions })\n }\n getPurchaseUrl={apiClient.user.getPurchaseUrl.bind(apiClient.user)}\n getUserPaymentMethod={apiClient.user.defaultPaymentMethod.bind(\n apiClient.user\n )}\n getStripe={() => getStripe(stripeToken)}\n />\n \n )\n\n function onCloseGcp(state) {\n setShowGcp(false)\n setGcpState(state)\n const [pointsCsv, markersCsv] = createGcpFiles(state)\n\n if (pointsCsv.length > 0 && markersCsv.length > 0) {\n onAddFiles([\n new File([pointsCsv], 'gcp_markers.csv', { type: 'text/csv' }),\n new File([markersCsv], 'gcp_projections.csv', { type: 'text/csv' }),\n ])\n\n setProcessingOption('gcpCrs', state.crs)\n }\n }\n\n function onCloseImportPositions(save, positions) {\n setImportPositions(false)\n if (save) {\n const existingFeatures = {}\n for (const position of positions) {\n const existingFeature = metaData.features.find(\n f => f.properties.filename === position.image\n )\n if (existingFeature) {\n existingFeatures[position.image] = existingFeature\n } else {\n console.warn(\n `Could not find a matching feature for image ${position.image}`\n )\n }\n }\n\n const positionsCsv = positions\n .filter(p => !!existingFeatures[p.image])\n .map(p =>\n [existingFeatures[p.image].id, p.lng, p.lat, p.z]\n .filter(x => x)\n .join(',')\n )\n .join('\\n')\n onAddFiles([\n new File([positionsCsv], 'camera_positions.csv', { type: 'text/csv' }),\n ])\n const newFeatures = positions.map(p => {\n const existingFeature = existingFeatures[p.image]\n return (\n existingFeature && {\n ...existingFeature,\n geometry: {\n type: 'Point',\n coordinates: [p.lng, p.lat, p.z].map(Number),\n },\n properties: {\n ...existingFeature.properties,\n latitude: Number(p.lat),\n longitude: Number(p.lng),\n absolute_altitude: Number(p.z),\n },\n }\n )\n })\n onUpdateMetadata({\n geojson: { type: 'FeatureCollection', features: newFeatures },\n })\n }\n }\n}\n\nUploadFiles.propTypes = {\n crops: PropTypes.array,\n files: PropTypes.object,\n projectId: PropTypes.number,\n projectType: PropTypes.string,\n crop: PropTypes.string,\n status: PropTypes.string,\n fieldName: PropTypes.string,\n fields: PropTypes.array,\n onFieldNameChange: PropTypes.func,\n onCropChange: PropTypes.func,\n onUpload: PropTypes.func,\n farms: PropTypes.array,\n farmId: PropTypes.number,\n onFarmChange: PropTypes.func,\n options: PropTypes.array,\n onOptionChange: PropTypes.func,\n onPermissionsUpdated: PropTypes.func,\n gcpEnabled: PropTypes.bool,\n onAddFiles: PropTypes.func,\n metaData: PropTypes.object,\n cost: costPropType,\n validationMessage: PropTypes.node,\n onUpdateMetadata: PropTypes.func,\n units: PropTypes.string,\n mapboxToken: PropTypes.string,\n apiClient: PropTypes.shape({\n subscriptions: PropTypes.shape({ create: PropTypes.func }),\n user: PropTypes.shape({\n defaultPaymentMethod: PropTypes.func,\n getPurchaseUrl: PropTypes.func,\n }),\n }),\n stripeToken: PropTypes.string,\n currency: PropTypes.string,\n purchasesEnabled: PropTypes.bool,\n uploadProgress: PropTypes.number,\n setProcessingOption: PropTypes.func,\n}\n\nexport function createGcpFiles({ gcps, markers }) {\n const validGcps = gcps.filter(p => isValidGcp(p, markers))\n const pointsCsv = validGcps\n .map(p => [p.id, ...p.coordinates].join(','))\n .join('\\n')\n const markersCsv = markers\n .filter(m => validGcps.some(gcp => gcp.id === m.gcpId))\n .map(m =>\n [\n m.gcpId,\n m.imageFilename.substring(0, m.imageFilename.lastIndexOf('.')),\n ...m.coordinates,\n ].join(',')\n )\n .join('\\n')\n\n return [pointsCsv, markersCsv]\n}\n\nfunction isValidGcp(gcp, markers) {\n return markers.filter(marker => marker.gcpId === gcp.id).length >= 3\n}\n","import { useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { Properties, Property } from '../ui/shared/properties'\nimport { getImage } from '../../exif-utils'\nimport { distanceToString } from '../../units'\n\nexport default function FileMetadata({\n lastSelectedCaptureFeatures,\n lastSelectedFiles,\n units,\n}) {\n const [imgsrc, setImgsrc] = useState([])\n\n const getPreviewImage = () => {\n if (lastSelectedCaptureFeatures && lastSelectedFiles) {\n const imageFeature = lastSelectedCaptureFeatures[0]\n const file = lastSelectedFiles.find(file => file.id === imageFeature.id)\n .file\n if (file) {\n return getImage(imageFeature, () => file, {\n bands: guessBands(imageFeature),\n })\n }\n }\n return Promise.resolve()\n }\n\n useEffect(() => {\n getPreviewImage().then(img => {\n if (img) {\n setImgsrc([img.src])\n }\n })\n }, [lastSelectedFiles])\n\n return (\n (lastSelectedCaptureFeatures && lastSelectedFiles && (\n \n {imgsrc.map(src => (\n
\n ))}\n
\n {lastSelectedCaptureFeatures.length > 1 && (\n
Images in capture
\n )}\n {lastSelectedCaptureFeatures.map(feature => (\n
\n {feature.properties.filename}\n {!lastSelectedFiles.find(f => f.id === feature.id).file ? (\n \n ) : !feature.geometry ? (\n \n ) : null}\n \n ))}\n \n
\n x)\n .join(' ') || 'Unknown'\n }\n />\n \n \n {(lastSelectedCaptureFeatures[0].properties.relative_altitude && (\n \n )) || (\n \n )}\n \n
\n
\n {!metaDataInitialized && (\n
\n
\n
\n Please wait, examining images...\n
\n
\n
\n
\n )}\n
\n {status === 'success' && }\n \n \n dispatch({ type: 'UPDATE_FARM_ID', payload: farmId })\n }\n onFieldNameChange={fieldName =>\n dispatch({ type: 'UPDATE_FIELD_NAME', payload: fieldName })\n }\n onCropChange={crop =>\n dispatch({ type: 'UPDATE_CROP', payload: crop })\n }\n onUpload={() => dispatch({ type: 'BEGIN_UPLOAD' })}\n options={options}\n onOptionChange={(key, active) =>\n dispatch({ type: 'SET_OPTION', payload: { key, active } })\n }\n validationMessage={validationMessage}\n gcpEnabled={gcpEnabled}\n onAddFiles={files =>\n dispatch({ type: 'ADD_EXTRA_FILES', payload: files })\n }\n onUpdateMetadata={metadata =>\n dispatch({ type: 'UPDATE_METADATA', payload: metadata })\n }\n onPermissionsUpdated={async () => {\n dispatch({\n type: 'UPDATE_PERMISSIONS',\n payload: await apiClient.getCurrentPermissions(),\n })\n }}\n setProcessingOption={(option, value) =>\n dispatch({\n type: 'SET_PROCESSING_OPTION',\n payload: { key: option, value },\n })\n }\n />\n
\n
\n \n Please choose band configuration for the Orthomosaic\n \n
\n \n {Array.from({ length: numberBands }).map((_, i) => (\n
\n \n Band {i + 1}\n
\n {\n const newValue = e.target.value\n const nextBands = Array.from(bands)\n const currentIndex = bands.indexOf(newValue)\n if (currentIndex >= 0) {\n nextBands[currentIndex] = nextBands[i]\n }\n nextBands[i] = newValue\n setBands(nextBands.join(''))\n }}>\n {bandOptions.map(([id, name, className]) => (\n \n ))}\n \n \n {valid ? (\n <>\n
\n Current configuration\n
\n
{configurationName || 'Custom configuration'}
\n \n ) : (\n
Please map all bands\n )}\n
\n onSave(bands)}>\n Save\n \n \n
\n \n \n )\n}\n\nexport function useBandsConfiguration(\n bands: string | undefined,\n numberBands: number | undefined,\n short: boolean\n) {\n return useMemo(() => {\n if (\n !bands ||\n numberBands == null ||\n bands?.length !== numberBands ||\n bands?.includes(' ')\n )\n return [false, 'Incomplete band configuration']\n\n const joinedBands = [...bands]\n .map(\n b =>\n bandOptions.find(\n ([bandAbbreviation]) => bandAbbreviation === b\n )?.[1] || b\n )\n .join(', ')\n\n if (!short || joinedBands.length < 40) {\n return [true, joinedBands]\n } else {\n return [true, bands]\n }\n }, [bands, numberBands, short])\n}\n","import { useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { Properties, Property } from '../ui/shared/properties'\nimport { getImage } from '../../exif-utils'\nimport { areaToString } from '../../units'\nimport area from '@turf/area'\nimport Button from '../ui/elements/button'\nimport BandsModal, { useBandsConfiguration } from './bands-modal'\nimport { getDefaultDisplayBands } from '../../ortho-utils'\n\nexport default function GeoTIFFMetadata({\n file,\n imageFeature,\n units,\n setImageProperties,\n}) {\n const [imgsrc, setImgsrc] = useState(null)\n\n useEffect(() => {\n setImgsrc(null)\n getPreviewImage()\n .then(img => {\n if (img) {\n setImgsrc(img.src)\n }\n })\n .catch(err => console.debug('Failed to get preview image', err))\n\n function getPreviewImage() {\n try {\n if (imageFeature) {\n const bands = imageFeature.properties.bands\n return getImage(imageFeature, () => file, {\n maxDimensions: { width: 1024, height: 1024 },\n bands: getDefaultDisplayBands(bands),\n })\n }\n } catch (err) {\n console.warn('Failed to get preview image', err)\n }\n return Promise.resolve()\n }\n }, [file, imageFeature])\n\n const properties = imageFeature && imageFeature.properties // check length\n const bbox = imageFeature && imageFeature.bbox // check length\n const [bandsValid, bandConfigurationName] = useBandsConfiguration(\n properties?.bands,\n properties?.samplesPerPixel,\n true\n )\n const [showBandModal, setShowBandModal] = useState(false)\n\n return (\n (properties && (\n <>\n \n
\n
\n
\n {properties.filename}\n
\n
\n \n \n \n \n \n \n setShowBandModal(true)}>\n {bandsValid ? bandConfigurationName : 'Not Selected'}\n \n }\n />\n \n
\n
\n
No preview available
\n
\n
\n
\n
\n {status === 'success' &&
}\n {!invalidFile ? (\n
\n {\n dispatch({\n type: 'UPDATE_METADATA',\n payload: {\n geojson: featureCollection([\n { ...metaData.features[0], properties },\n ]),\n exif: [],\n },\n })\n dispatch({\n type: 'SET_PROCESSING_OPTION',\n payload: {\n key: 'bands',\n value: properties.bands,\n },\n })\n }}\n />\n
\n ) : (\n
\n Could not read selected file, please make sure it is a valid\n GeoTIFF.\n
\n )}\n {canAddFile ? (\n
{\n dispatch({ type: 'RESET_FILES' })\n }}>\n {!isMissingFiles ? 'Select File' : 'Add Missing File'}\n \n ) : null}\n {!invalidFile && !file && (\n \n dispatch({ type: 'UPDATE_FILES', payload: files })\n }\n value={files}\n />\n )}\n \n
\n dispatch({ type: 'UPDATE_FARM_ID', payload: farmId })\n }\n onFieldNameChange={fieldName =>\n dispatch({ type: 'UPDATE_FIELD_NAME', payload: fieldName })\n }\n onCropChange={crop =>\n dispatch({ type: 'UPDATE_CROP', payload: crop })\n }\n onPermissionsUpdated={async () => {\n dispatch({\n type: 'UPDATE_PERMISSIONS',\n payload: await apiClient.getCurrentPermissions(),\n })\n }}\n onUpload={() => dispatch({ type: 'BEGIN_UPLOAD' })}\n options={options}\n onOptionChange={(key, active) =>\n dispatch({ type: 'SET_OPTION', payload: { key, active } })\n }\n validationMessage={validationMessage}\n gcpEnabled={gcpEnabled}\n purchasesEnabled={purchasesEnabled}\n onAddFiles={files =>\n dispatch({ type: 'ADD_EXTRA_FILES', payload: files })\n }\n uploadProgress={\n totalBytes > 0 ? (uploadedBytes / totalBytes) * 100 : undefined\n }\n />\n \n
\n
\n
\n The Express Upload option scales down the images to reduce the size of\n the images and the time it takes to upload them.\n
\n
\n As a result, the orthomosaic resolution will be noticeably lower\n compared to uploading images without Express Upload.\n
\n
\n It is recommended to not use this option for use cases like plant\n counts where high resolution is important for the analysis.\n
\n
\n
\n
\n
\n Sorry... An unexpected error occured\n
\n
\n Something bad happend, it’s not you it’s us. You\n could try again or contact our support if the problem persists.\n
\n
this.setState({ error: null })}\n className=\"tw-max-w-xs tw-mb-0\">\n Try Again\n \n \n
\n
\n
\n
We are sorry!
\n
\n An unexpected error has occured and the project can not be\n displayed. Please try again later, or contact support.\n
\n
\n
\n \n {extent && }\n {showGeolocationControl && }\n \n \n {children && {children}}\n
,\n container\n )\n}\n\nfunction ZoomToExtent({ map, extent }: ZoomToExtentProps) {\n return (\n \n map\n .getView()\n .fit(\n Math.abs(getCenter(extent)[0]) > 180\n ? extent\n : transformExtent(extent, 'EPSG:4326', 'EPSG:3857'),\n {\n duration: 500,\n }\n )\n }\n />\n )\n}\n\nclass Geolocation extends Component {\n constructor(props: GeolocationProps) {\n super(props)\n\n this.state = {\n active: false,\n loading: false,\n }\n }\n\n geolocation: OlGeolocation | undefined = undefined\n position: Feature | undefined = undefined\n geolocationLayer:\n | VectorLayer>>\n | undefined = undefined\n\n setup() {\n this.geolocation = new OlGeolocation({\n trackingOptions: { enableHighAccuracy: true },\n projection: this.props.map.getView().getProjection(),\n })\n\n this.position = new Feature()\n this.position.setStyle(\n new Style({\n image: new Circle({\n radius: 12,\n fill: new Fill({ color: '#3399CC' }),\n stroke: new Stroke({ color: '#fff', width: 3 }),\n }),\n })\n )\n\n this.geolocation.on('change:position', () => {\n const coordinates = this.geolocation?.getPosition()\n if (coordinates && this.position) {\n this.position.setGeometry(new Point(coordinates))\n this.props.map.getView().animate({ center: coordinates, duration: 500 })\n this.setState({ loading: false })\n }\n })\n\n this.geolocationLayer = new VectorLayer({\n map: this.props.map,\n source: new VectorSource({ features: [this.position] }),\n })\n }\n\n componentWillUnmount() {\n if (this.geolocationLayer) {\n this.props.map.removeLayer(this.geolocationLayer)\n }\n }\n\n toggle(visible: boolean) {\n if (!this.geolocation) {\n this.setup()\n }\n\n this.geolocation?.setTracking(visible)\n const coordinates = this.geolocation?.getPosition()\n if (coordinates && visible && this.position) {\n this.position.setGeometry(new Point(coordinates))\n }\n\n const loading = visible && !coordinates\n this.setState({ active: visible, loading: loading })\n\n if (this.geolocationLayer) {\n this.geolocationLayer.setVisible(visible)\n this.geolocationLayer.changed()\n }\n }\n\n render() {\n return (\n this.toggle(!this.state.active)}\n />\n )\n }\n}\n\nconst rotationStep = (360 / 40 / 180) * Math.PI\n\nfunction RotateControls({ map }: RotateControlsProps) {\n const [rotation, setRotation] = useState(() =>\n map.getView().getRotation()\n )\n // This is used to tell the difference between updates\n // to the rotation value that is made by this control,\n // compared to updates that happen externally when\n // the map is rotated outside this control.\n // When this control modifies rotation, it will also\n // increment the \"current\" count of the sync object,\n // so last !== current until the effect below\n // synchronizes the map rotation and also updates\n // the \"last\" value.\n const sync = useRef({ last: 0, current: 0 })\n\n const view = map.getView()\n useEffect(() => {\n view.on('change:rotation', onRotate)\n return () => {\n view.un('change:rotation', onRotate)\n }\n\n function onRotate() {\n setRotation(view.getRotation())\n }\n }, [view])\n\n useEffect(() => {\n if (sync.current.current !== sync.current.last) {\n map.getView().animate({ rotation, duration: 100 })\n sync.current.last = sync.current.current\n }\n }, [map, rotation])\n\n return (\n \n {\n setRotation(rotation => rotation - rotationStep)\n sync.current.current++\n }}\n />\n {\n setRotation(0)\n sync.current.current++\n }}>\n \n \n \n \n {\n setRotation(rotation => rotation + rotationStep)\n sync.current.current++\n }}\n />\n \n )\n}\n\nexport function MapControlToolbar({ children }: { children: ReactNode }) {\n return {children}
\n}\n\ninterface MapControlButtonProps\n extends ButtonHTMLAttributes {\n icon: string\n active?: boolean\n}\n\nexport function MapControlButton({\n icon,\n active,\n disabled,\n ...props\n}: MapControlButtonProps) {\n return (\n \n \n \n )\n}\n","import { useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport OlImageLayer from 'ol/layer/Image'\nimport ImageStaticSource from 'ol/source/ImageStatic'\n\nexport default function ImageLayer({ map, imageUrl, projection, extent }) {\n const layer = useMemo(\n () =>\n new OlImageLayer({\n source: new ImageStaticSource({\n url: imageUrl,\n projection: projection,\n imageExtent: extent,\n crossOrigin: 'anonymous',\n }),\n }),\n [imageUrl, projection, extent]\n )\n\n useEffect(() => {\n map.addLayer(layer)\n return () => {\n map.removeLayer(layer)\n }\n }, [map, layer])\n\n return null\n}\n\nImageLayer.propTypes = {\n map: PropTypes.shape({\n addLayer: PropTypes.func,\n removeLayer: PropTypes.func,\n }).isRequired,\n imageUrl: PropTypes.string.isRequired,\n projection: PropTypes.object.isRequired,\n extent: PropTypes.array.isRequired,\n}\n","import { Currency, currencySymbol, Product } from '../../utils/payment-utils'\nimport RadioCard from '../ui/shared/radio-card'\n\ninterface ProductOption extends Product {\n disabled: boolean\n}\n\ninterface ProductOptionsProps {\n products: ProductOption[]\n onChange: (value: string) => void\n currency: Currency\n selectedId?: string\n}\n\nexport default function ProductOptions({\n products,\n currency,\n onChange,\n selectedId,\n}: ProductOptionsProps): JSX.Element {\n return (\n \n {products.map(({ id, name, prices, disabled }) => {\n return (\n
\n \n {currencySymbol[currency]}\n {prices[currency]} - {name}\n
\n \n )\n })}\n \n
\n Payment Method\n
\n
\n \n \n
\n \n xxxx xxxx xxxx {card.last4}\n \n Expires {card.exp_month}/{card.exp_year}\n \n
\n \n
\n {payingState !== 'success' ? (\n \n {payingState === 'buying' ? : payLabel}\n \n ) : (\n \n )}\n
\n )\n}\n","import { useState, useEffect, useCallback, ReactNode, useMemo } from 'react'\nimport { Currency, currencySymbol, Product } from '../../utils/payment-utils'\nimport ProductOptions from './product-options'\nimport ModalOverlay, {\n ModalOverlayContent,\n} from '../ui/shared/overlays/modal-overlay'\nimport { logException, logMessage } from '../../logger'\nimport LoadingDots from '../ui/shared/loading-dots'\nimport ValidationMessage from '../ui/shared/validation-message'\nimport { PaymentMethod, PaymentIntent, Stripe } from '@stripe/stripe-js'\nimport useIsMounted from '../../hooks/use-is-mounted'\nimport CardComponent from './card'\nimport PayButtons, { PayingState } from './pay-buttons'\nimport { LoadingState } from '../../types/common'\nimport Select from '../ui/elements/select'\n\ntype SubscriptionOptions = {\n subscription: {\n name: string\n // eslint-disable-next-line camelcase\n payg_options?: { credit: number }\n }\n currency: Currency\n}\ntype PurchaseResult = {\n status: PaymentIntent.Status\n paymentIntentClientSecret: string\n lastPaymentError: PaymentIntent.LastPaymentError\n hostedInvoiceUrl: string\n}\n\ninterface PaymentModalProps {\n show: boolean\n title: string\n instructions: ReactNode\n onDismiss: () => void\n onPaymentSuccess?: () => void\n products: Product[]\n defaultProductId?: string\n currency?: Currency\n createSubscription: (\n subscriptionOptions: SubscriptionOptions\n ) => Promise\n getPurchaseUrl: (\n productId: string,\n currency: string,\n successUrl: string,\n cancelUrl: string\n ) => string\n getUserPaymentMethod: () => Promise\n getStripe: () => Promise\n}\n\nexport default function PaymentsModal({\n show,\n title,\n instructions,\n currency,\n onDismiss,\n onPaymentSuccess,\n products,\n defaultProductId,\n createSubscription,\n getPurchaseUrl,\n getUserPaymentMethod,\n getStripe,\n}: PaymentModalProps): JSX.Element {\n const [selectedProduct, setSelectedProduct] = useState(\n defaultProductId\n )\n const [selectedCurrency, setSelectedCurrency] = useState(\n currency || Currency.eur\n )\n const [payingState, setPayingState] = useState('idle')\n const [paymentMethod, setPaymentMethod] = useState()\n const [loading, setLoading] = useState('idle')\n const [allOptionsDisabled, setAllOptionsDisabled] = useState(false)\n const [errorMessage, setErrorMessage] = useState()\n const defaultErrorMessage = 'Something went wrong'\n\n const validationMessageType =\n payingState === 'error'\n ? 'danger'\n : payingState === 'success'\n ? 'success'\n : 'default'\n\n const isMounted = useIsMounted()\n\n useEffect(() => {\n if (show) {\n setLoading('loading')\n getUserPaymentMethod()\n .then(paymentMethod => {\n if (isMounted.current) {\n setPaymentMethod(paymentMethod)\n setLoading('done')\n }\n })\n .catch(error => {\n // 404 is a normal response when payment method is missing\n if (error.response?.status !== 404) {\n logMessage(error)\n }\n setLoading('done')\n })\n }\n }, [show, getUserPaymentMethod, isMounted])\n\n useEffect(() => {\n if (payingState === 'success' && onPaymentSuccess) {\n onPaymentSuccess()\n }\n }, [payingState, onPaymentSuccess])\n\n const internalOnDismiss = useCallback(() => {\n if (payingState !== 'buying') {\n onDismiss()\n }\n }, [payingState, onDismiss])\n\n const checkoutUrl = useMemo(() => {\n if (selectedProduct && currency) {\n const returnUrl = new URL(window.location.href)\n const cancelUrl = returnUrl.toString()\n returnUrl.searchParams.append('wait_for', selectedProduct)\n const successUrl = returnUrl.toString()\n return getPurchaseUrl(selectedProduct, currency, successUrl, cancelUrl)\n } else {\n return null\n }\n }, [currency, getPurchaseUrl, selectedProduct])\n\n return (\n \n \n {loading === 'loading' ? (\n \n ) : loading === 'done' ? (\n <>\n {instructions}\n {!currency ? (\n \n
Currency
\n \n setSelectedCurrency(e.target.value as Currency)\n }>\n {Object.keys(Currency).map(currency => (\n \n ))}\n \n \n ) : null}\n ({\n ...product,\n disabled: allOptionsDisabled,\n }))}\n currency={selectedCurrency}\n onChange={setSelectedProduct}\n selectedId={selectedProduct}\n />\n {paymentMethod && paymentMethod.card && (\n <>\n \n {checkoutUrl ? (\n \n
\n Pay with a different card\n \n \n \n \n {presentColumns.map((col, i) => (\n \n this.props.onSortChange({\n col,\n dir:\n this.props.sort &&\n this.props.sort.id === col.id\n ? this.props.sort.dir === 'asc'\n ? 'desc'\n : 'asc'\n : 'asc',\n })\n : undefined\n }>\n {col.name}\n \n ))}\n
\n \n \n {!loading &&\n data.map((d, dataIndex) => (\n {\n if (\n this.props.onEntityClicked &&\n // Prevent firing the click action if the user\n // really selected a text\n window.getSelection().toString().length === 0\n ) {\n e.preventDefault()\n this.props.onEntityClicked(d)\n }\n }}>\n {presentColumns.map((col, i) => (\n \n {col.fn(d, dataIndex)}\n \n ))}\n \n ))}\n \n
\n ) : (\n empty\n ))) ||\n (loading && (\n \n \n
\n ))}\n \n )\n }\n}\n\nTable.propTypes = {\n columns: PropTypes.array,\n data: PropTypes.array,\n empty: PropTypes.node,\n loading: PropTypes.bool,\n sort: PropTypes.object,\n onSortChange: PropTypes.func,\n rowKeyFn: PropTypes.func,\n rowClassName: PropTypes.string,\n onEntityClicked: PropTypes.func,\n}\n","import {\n Fragment,\n MutableRefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport ModalOverlay, {\n ModalOverlayContent,\n ModalOverlayFooter,\n} from '../shared/overlays/modal-overlay'\nimport Label from './label'\nimport Input from './input'\nimport Button from './button'\nimport { Combobox as UiCombobox } from '@headlessui/react'\nimport { useHotkeys } from 'react-hotkeys-hook'\nimport ValidationMessage from '../shared/validation-message'\n\ntype OptionTypeBase = { label: string }\n\ntype CreateOptions = {\n modalTitle: string\n inputLabel: string\n inputPlaceholder?: string\n onCreate: (label: string) => OptionType\n}\n\ntype ComboboxProps = {\n createNew?: CreateOptions\n value: OptionType | null\n className?: string\n options: OptionType[]\n placeholder?: string\n disabled?: boolean\n onChange: (value: OptionType) => void\n}\n\nexport default function Combobox({\n value,\n options,\n onChange,\n className,\n disabled,\n placeholder,\n}: ComboboxProps) {\n const [query, setQuery] = useState('')\n const filteredOptions = useMemo(() => {\n const lowercaseQuery = query.toLowerCase()\n return query === '' || query === value?.label\n ? options\n : options.filter(o => o.label.toLowerCase().includes(lowercaseQuery))\n }, [options, query, value?.label])\n const [forceOpen, setForceOpen] = useState(false)\n useEffect(() => {\n if (value?.label) {\n setQuery(value.label)\n }\n }, [value?.label])\n\n return (\n \n
{\n if (value != null) {\n setForceOpen(false)\n onChange(value)\n }\n }}>\n {({ open }) => (\n <>\n {\n setForceOpen(true)\n }}\n onBlur={() => {\n // Without timeout / too short timeout, it appears the blur\n // will close the options dropdown before a click event is registered when\n // the user selects an option from the dropdown.\n // (I have not fully understood if there's something more going\n // on here, 200ms seems like a *really* long time to work around this,\n // but with 100ms, it's sometimes(!) impossible to select a new value ?!)\n setTimeout(() => setForceOpen(false), 200)\n }}\n displayValue={(value: OptionType | undefined) =>\n value?.label || ''\n }\n onChange={e => setQuery(e.target.value)}\n />\n \n \n \n\n {(open || forceOpen) && options.length > 0 ? (\n \n {filteredOptions.map(option => (\n \n {({ active, selected }) => (\n \n \n {selected && }\n
\n {option.label}\n \n )}\n \n ))}\n \n ) : null}\n \n )}\n \n \n
\n \n
\n {createNew ? (\n
setShowModal(true)}>\n New\n \n ) : null}\n \n onDismiss()}>\n Cancel\n \n onDismiss(onCreate(label))}>\n Create\n \n
\n \n \n )\n}\n","import PropTypes from 'prop-types'\n\nexport default function GreenToggle({\n id,\n type,\n children,\n onChange,\n active,\n disabled,\n helpText,\n hidden,\n inputProps,\n}) {\n return (\n \n \n \n {children}\n \n \n )\n}\n\nGreenToggle.propTypes = {\n id: PropTypes.string,\n onChange: PropTypes.func,\n active: PropTypes.bool,\n children: PropTypes.node,\n disabled: PropTypes.bool,\n type: PropTypes.oneOf(['default', 'toggle', 'green']),\n helpText: PropTypes.string,\n hidden: PropTypes.bool,\n inputProps: PropTypes.object,\n}\n\nexport function CustomToggle({ active, disabled, children }) {\n return (\n <>\n \n \n \n \n \n \n \n {children && (\n \n {children}\n \n )}\n \n )\n}\n\nCustomToggle.propTypes = {\n active: PropTypes.bool,\n children: PropTypes.node,\n disabled: PropTypes.bool,\n}\n","import PropTypes from 'prop-types'\n\n/**\n *\n * @param {{\n * href: string,\n * action?: 'default'|'primary'|'success',\n * size?: 'normal'|'large',\n * disabled?: boolean,\n * className?:string}\n * } props\n * @returns\n */\nexport default function LinkButton({\n href,\n children,\n action,\n size,\n disabled,\n className,\n ...props\n}) {\n return (\n \n {children}\n \n )\n}\n\nLinkButton.defaultProps = {\n action: 'default',\n size: 'normal',\n}\n\nLinkButton.propTypes = {\n onClick: PropTypes.any,\n children: PropTypes.node,\n action: PropTypes.string,\n size: PropTypes.string,\n disabled: PropTypes.bool,\n href: PropTypes.string,\n className: PropTypes.string,\n}\n\nexport function Link({ href, children, className, ...props }) {\n return (\n \n {children}\n \n )\n}\n\nLink.propTypes = {\n children: PropTypes.node,\n href: PropTypes.string,\n className: PropTypes.string,\n}\n","import PropTypes from 'prop-types'\n\nexport default function Message({ children, message }) {\n return (\n \n
{message}
\n {children}\n
\n {selectedImage ? (\n \n ) : (\n \n )}\n {map && loadedImage && extent && (\n \n )}\n
\n \n \n )\n\n function getSelectedImageIndex() {\n return images?.features && selectedImage?.properties\n ? images.features.findIndex(\n feature =>\n feature.properties.filename === selectedImage.properties.filename\n )\n : -1\n }\n}\n\nImageView.propTypes = {\n apiClient: PropTypes.shape({\n getProjectPhotoUrl: PropTypes.func,\n }),\n images: PropTypes.shape({\n features: PropTypes.array,\n }),\n map: PropTypes.shape({\n setView: PropTypes.func,\n }),\n navigationDisabled: PropTypes.bool,\n onMapInitialized: PropTypes.func,\n projectId: PropTypes.number,\n selectedImage: PropTypes.shape({\n properties: PropTypes.shape({\n filename: PropTypes.string,\n }),\n }),\n setSelectedImage: PropTypes.func,\n info: PropTypes.node,\n units: PropTypes.string,\n setImageStatus: PropTypes.func,\n}\n\nexport function ImageMapContainer({ children }) {\n return (\n \n {children}\n
\n )\n}\n\nImageMapContainer.propTypes = { children: PropTypes.element }\n","import PropTypes from 'prop-types'\nimport { useRef, useEffect, useState } from 'react'\nimport Map from 'ol/Map'\nimport Zoom from 'ol/control/Zoom'\nimport Message from '../../elements/message'\nimport LoadingDots from '../loading-dots'\nimport { Property } from '../properties'\nimport useMapResize from '../../../../hooks/use-map-resize'\nimport MapControls from '../../../map-controls'\n\nexport default function ImagesMap({\n onMapInitialized,\n filename,\n indexInfo,\n status,\n info,\n metadata,\n error,\n}) {\n const containerRef = useRef()\n const controlRef = useRef()\n const [map, setMap] = useState()\n\n useEffect(() => {\n const map = new Map({\n target: containerRef.current,\n controls: [new Zoom()],\n layers: [],\n })\n setMap(map)\n onMapInitialized && onMapInitialized(map)\n }, [onMapInitialized])\n\n useMapResize(map, containerRef.current)\n\n return (\n \n
\n {status === 'loading' && (\n
\n \n \n )}\n {error && status !== 'loading' && (\n
\n )}\n
\n
\n {controlRef.current && map && (\n
\n )}\n
\n
\n
\n \n {filename}\n \n {indexInfo}\n
\n {metadata && (\n
\n {metadata.map(data => (\n
\n ))}\n
\n )}\n
\n {info && (\n
\n {info}\n
\n )}\n
\n
\n