wip

2026-03-27 01:08:57 +02:00
parent 2e90e3cc5b
commit 5ba753e808
7 changed files with 29 additions and 42 deletions
@@ -3,7 +3,7 @@ import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { Box, DashboardCard, DashboardInsider } from '@/components';
-import { CustomerFormFormik } from './CustomerFormFormik';
+import { CustomerFormFormik, ustomerFormFormik } from './CustomerFormFormik';
 import {
  CustomerFormProvider,
  useCustomerFormContext,
@@ -14,26 +14,35 @@ import {
 * @returns {JSX}
 */
 export default function CustomerFormPage() {
-  const history = useHistory();
  const { id } = useParams();
-  const { isFormLoading } = useCustomerFormContext();
-
  const customerId = parseInt(id, 10);
  
-  // Handle the form submit success.
+  return (
+    <CustomerFormProvider customerId={customerId}>
+     <CustomerFormPageContent /> 
+    </CustomerFormProvider>
+  );
+}
+
+function CustomerFormPageContent() {
+  const history = useHistory();
+  const { isFormLoading } = useCustomerFormContext();
+
+
  const handleSubmitSuccess = (values, formArgs, submitPayload) => {
    if (!submitPayload.noRedirect) {
      history.push('/customers');
    }
-  };
-  // Handle the form cancel button click.
+  }
+
+    // Handle the form cancel button click.
  const handleFormCancel = () => {
    history.goBack();
  };

+
  return (
-    <CustomerFormProvider customerId={customerId}>
-      <DashboardInsider loading={isFormLoading}>
+    <DashboardInsider loading={isFormLoading}>
        <Box mx={'auto'} maxWidth={800}>
          <CustomerFormFormik
            onSubmitSuccess={handleSubmitSuccess}
@@ -41,6 +50,5 @@ export default function CustomerFormPage() {
          />
        </Box>
      </DashboardInsider>
-    </CustomerFormProvider>
-  );
+  )
 }
@@ -63,7 +63,7 @@ const CustomerFormContext = createContext<CustomerFormContextValue | undefined>(
  undefined,
 );

-function CustomerFormProvider({ query, customerId, children }: CustomerFormProviderProps) {
+export function CustomerFormProvider({ query, customerId, children }: CustomerFormProviderProps) {
  const { state } = useLocation<{ action?: number | string }>();
  const contactId = state?.action;

@@ -132,7 +132,7 @@ function CustomerFormProvider({ query, customerId, children }: CustomerFormProvi
  );
 }

-const useCustomerFormContext = () => {
+export const useCustomerFormContext = () => {
  const ctx = React.useContext(CustomerFormContext);
  if (!ctx) {
    throw new Error(
@@ -141,5 +141,3 @@ const useCustomerFormContext = () => {
  }
  return ctx;
 };
-
-export { CustomerFormProvider, useCustomerFormContext };
@@ -8,8 +8,8 @@ import {
  VendorFormProvider,
  useVendorFormContext,
 } from '@/containers/Vendors/VendorForm/VendorFormProvider';
-import VendorFormFormik, {
-  VendorFormHeaderPrimary,
+import {
+  VendorFormFormik,
 } from '@/containers/Vendors/VendorForm/VendorFormFormik';

 import { withDrawerActions } from '@/containers/Drawer/withDrawerActions';
@@ -62,13 +62,11 @@ function QuickVendorFormDrawer({
  return (
    <VendorFormProvider vendorId={vendorId}>
      <DrawerVendorFormLoading>
-        <VendorFormCard>
          <VendorFormFormik
            initialValues={{ first_name: displayName }}
            onSubmitSuccess={handleSubmitSuccess}
            onCancel={handleCancelForm}
          />
-        </VendorFormCard>
      </DrawerVendorFormLoading>
    </VendorFormProvider>
  );
@@ -79,20 +77,3 @@ export default R.compose(
  withDashboardActions,
 )(QuickVendorFormDrawer);

-const VendorFormCard = styled(Card)`
-  margin: 15px;
-  padding: 25px;
-  margin-bottom: calc(15px + 65px);
-
-  ${VendorFormHeaderPrimary} {
-    padding-top: 0;
-  }
-  .page-form {
-    padding: 0;
-
-    &__floating-actions {
-      margin-left: -41px;
-      margin-right: -41px;
-    }
-  }
-`;
@@ -18,7 +18,6 @@ export default function QuickWriteVendorDrawerContent({ displayName, autofillRef
      <DrawerHeaderContent
        name={DRAWERS.QUICK_CREATE_CUSTOMER}
        title={<T id={'create_a_new_vendor'} />}
-
      />
      <DrawerBody>
        <QuickVendorFormDrawer displayName={displayName} autofillRef={autofillRef} />
@@ -101,7 +101,7 @@ function VendorFormFormikBase({
  };

  return (
-    <Box mx={'auto'} maxWidth={800}>
+    
      <Formik
        validationSchema={
          isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
@@ -115,7 +115,6 @@ function VendorFormFormikBase({
          </VendorFormFields>
        </Form>
      </Formik>    
-        </Box>    
  );
 }

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useParams, useHistory } from 'react-router-dom';
-import { DashboardCard, DashboardInsider } from '@/components';
+import { Box, DashboardCard, DashboardInsider } from '@/components';
 import { VendorFormProvider, useVendorFormContext } from './VendorFormProvider';
 import { VendorFormFormik } from './VendorFormFormik';

@@ -41,10 +41,12 @@ export function VendorFormPage() {
  return (
    <VendorFormProvider vendorId={id}>
      <VendorFormPageLoading>
+        <Box mx={'auto'} maxWidth={800}>
          <VendorFormFormik
            onSubmitSuccess={handleSubmitSuccess}
            onCancel={handleFormCancel}
-          />
+            />
+        </Box>
      </VendorFormPageLoading>
    </VendorFormProvider>
  );
@@ -631,7 +631,7 @@ export const getDashboardRoutes = () => [
  {
    path: `/vendors/new`,
    component: lazy(
-      () => import('@/containers/Vendors/VendorForm/VendorFormPage'),
+      () => import('@/containers/Vendors/VendorForm/VendorFormPage').then(module => ({ default: module.VendorFormPage })),
    ),
    name: 'vendor-new',
    breadcrumb: intl.get('new_vendor'),