|
@@ -203,8 +204,8 @@ export default function ModalFundOffers({
)}
diff --git a/react/src/dashboard/components/modals/ModalFundsProviderProductsRequired.tsx b/react/src/dashboard/components/modals/ModalFundsProviderProductsRequired.tsx
index c4c4bcef8..2042b7123 100644
--- a/react/src/dashboard/components/modals/ModalFundsProviderProductsRequired.tsx
+++ b/react/src/dashboard/components/modals/ModalFundsProviderProductsRequired.tsx
@@ -7,6 +7,7 @@ import { useNavigateState } from '../../modules/state_router/Router';
import useActiveOrganization from '../../hooks/useActiveOrganization';
import Fund from '../../props/models/Fund';
import classNames from 'classnames';
+import { DashboardRoutes } from '../../modules/state_router/RouterBuilder';
export default function ModalFundsProviderProductsRequired({ modal, funds }: { modal: ModalState; funds: Fund[] }) {
const storage = useStorageService();
@@ -21,7 +22,7 @@ export default function ModalFundsProviderProductsRequired({ modal, funds }: { m
const goToProductCreate = useCallback(() => {
closeModal();
- navigateState('products-create', { organizationId: activeOrganization.id });
+ navigateState(DashboardRoutes.PRODUCT_CREATE, { organizationId: activeOrganization.id });
}, [activeOrganization.id, closeModal, navigateState]);
return (
diff --git a/react/src/dashboard/components/modals/ModalMakePhysicalCardTypeEdit.tsx b/react/src/dashboard/components/modals/ModalMakePhysicalCardTypeEdit.tsx
new file mode 100644
index 000000000..0ccdcbc22
--- /dev/null
+++ b/react/src/dashboard/components/modals/ModalMakePhysicalCardTypeEdit.tsx
@@ -0,0 +1,213 @@
+import React, { Fragment, useCallback, useState } from 'react';
+import { ModalState } from '../../modules/modals/context/ModalContext';
+import useFormBuilder from '../../hooks/useFormBuilder';
+import { ResponseError } from '../../props/ApiResponses';
+import useSetProgress from '../../hooks/useSetProgress';
+import usePushApiError from '../../hooks/usePushApiError';
+import Modal from './elements/Modal';
+import FormGroup from '../elements/forms/elements/FormGroup';
+import FormPane from '../elements/forms/elements/FormPane';
+import { usePhysicalCardTypeService } from '../../services/PhysicalCardTypeService';
+import PhysicalCardType from '../../props/models/PhysicalCardType';
+import PhotoSelector from '../elements/photo-selector/PhotoSelector';
+import Media from '../../props/models/Media';
+import { useMediaService } from '../../services/MediaService';
+import Organization from '../../props/models/Organization';
+
+export default function ModalMakePhysicalCardTypeEdit({
+ modal,
+ title,
+ className,
+ organization,
+ physicalCardType,
+ onPhysicalCardType,
+}: {
+ modal: ModalState;
+ title?: string;
+ className?: string;
+ organization: Organization;
+ physicalCardType?: PhysicalCardType;
+ onPhysicalCardType: (physicalCardType?: PhysicalCardType) => void;
+}) {
+ const pushApiError = usePushApiError();
+ const setProgress = useSetProgress();
+
+ const [media, setMedia] = useState(null);
+ const [mediaFile, setMediaFile] = useState(null);
+
+ const mediaService = useMediaService();
+ const physicalCardTypeService = usePhysicalCardTypeService();
+
+ const form = useFormBuilder<{
+ name: string;
+ description: string;
+ code_blocks: string;
+ code_block_size: string;
+ }>(
+ {
+ name: physicalCardType?.name || '',
+ description: physicalCardType?.description || '',
+ code_blocks: physicalCardType?.code_blocks?.toString() || '4',
+ code_block_size: physicalCardType?.code_block_size?.toString() || '4',
+ },
+ (values) => {
+ uploadMedia().then((media_uid: string) => {
+ setProgress(0);
+ setProgress(0);
+
+ const data = {
+ ...values,
+ media_uid,
+ code_blocks: parseInt(values.code_blocks),
+ code_block_size: parseInt(values.code_block_size),
+ };
+
+ const promise = physicalCardType
+ ? physicalCardTypeService.update(physicalCardType.organization_id, physicalCardType.id, data)
+ : physicalCardTypeService.store(organization.id, data);
+
+ promise
+ .then((res) => {
+ onPhysicalCardType(res?.data?.data);
+ modal.close();
+ })
+ .catch((err: ResponseError) => {
+ form.setErrors(err?.data?.errors);
+ form.setIsLocked(false);
+ pushApiError(err);
+ })
+ .finally(() => setProgress(100));
+ });
+ },
+ );
+
+ const uploadMedia = useCallback(() => {
+ return new Promise((resolve, reject) => {
+ if (!mediaFile) {
+ return resolve(media?.uid);
+ }
+
+ setProgress(0);
+
+ return mediaService
+ .store('physical_card_type_photo', mediaFile)
+ .then((res) => {
+ setMedia(res.data.data);
+ setMediaFile(null);
+ resolve(res.data.data.uid);
+ }, reject)
+ .finally(() => setProgress(100));
+ });
+ }, [media, mediaFile, mediaService, setProgress]);
+
+ return (
+
+
+
+
+ }>
+ |