From 5ba753e80815ea9ffd6788660af213d1c63b5581 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Fri, 27 Mar 2026 01:08:57 +0200 Subject: [PATCH] wip --- .../CustomerForm/CustomerFormPage.tsx | 28 ++++++++++++------- .../CustomerForm/CustomerFormProvider.tsx | 6 ++-- .../QuickVendorFormDrawer.tsx | 23 ++------------- .../QuickWriteVendorDrawerContent.tsx | 1 - .../Vendors/VendorForm/VendorFormFormik.tsx | 5 ++-- .../Vendors/VendorForm/VendorFormPage.tsx | 6 ++-- packages/webapp/src/routes/dashboard.tsx | 2 +- 7 files changed, 29 insertions(+), 42 deletions(-) diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx index 8e9b8ff49..c71702cfb 100644 --- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx +++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx @@ -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 customerId = parseInt(id, 10); + + return ( + + + + ); +} + +function CustomerFormPageContent() { + const history = useHistory(); const { isFormLoading } = useCustomerFormContext(); - const customerId = parseInt(id, 10); - // Handle the form submit success. 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 ( - - + - - ); + ) } \ No newline at end of file diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx index e490aed0a..f982c83da 100644 --- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx +++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx @@ -63,7 +63,7 @@ const CustomerFormContext = createContext( 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 }; diff --git a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx index 56e09c17b..bd5957016 100644 --- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx +++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx @@ -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 ( - - ); @@ -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; - } - } -`; diff --git a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx index de4e7fe3b..2f75f99b7 100644 --- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx +++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx @@ -18,7 +18,6 @@ export default function QuickWriteVendorDrawerContent({ displayName, autofillRef } - /> diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx index 64848827f..22d710bc6 100644 --- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx +++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx @@ -101,7 +101,7 @@ function VendorFormFormikBase({ }; return ( - + - - + ); } diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx index ea0e09700..ec5fdf3c0 100644 --- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx +++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx @@ -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 ( + + /> + ); diff --git a/packages/webapp/src/routes/dashboard.tsx b/packages/webapp/src/routes/dashboard.tsx index ffd709df0..8c2f4543e 100644 --- a/packages/webapp/src/routes/dashboard.tsx +++ b/packages/webapp/src/routes/dashboard.tsx @@ -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'),