diff --git a/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.test.tsx b/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.test.tsx index cfe9b620..7bab670b 100644 --- a/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.test.tsx +++ b/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.test.tsx @@ -77,7 +77,18 @@ mock.module("@repo/rdx-ui/components", { RdxPanel: ({ children, title }: { children: ReactNode; title: string }) => (
{children}
), - RdxEditorStickyFooter: () => null, + RdxEditorActionBar: ({ + primary, + secondary, + }: { + primary?: ReactNode; + secondary?: ReactNode; + }) => ( +
+ {secondary} + {primary} +
+ ), RdxFormGrid: ({ children }: { children: ReactNode }) =>
{children}
, RhfSubmitActionButton: (props: Record) => { capturedSubmitProps = props; @@ -94,6 +105,14 @@ mock.module("@repo/rdx-ui/components", { }, }); +mock.module("@repo/shadcn-ui/components", { + namedExports: { + Card: ({ children }: { children: ReactNode }) =>
{children}
, + CardContent: ({ children }: { children: ReactNode }) =>
{children}
, + CardHeader: ({ children }: { children: ReactNode }) =>
{children}
, + }, +}); + mock.module("react-hook-form", { namedExports: { FormProvider: ({ children }: { children: ReactNode }) => children, diff --git a/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.tsx b/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.tsx index 317b79d2..1ca333a9 100644 --- a/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.tsx +++ b/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.tsx @@ -10,7 +10,8 @@ import { SelectField, TextField, } from "@repo/rdx-ui/components"; -import { ContactIcon, LandmarkIcon, ScrollTextIcon } from "lucide-react"; +import { Card, CardContent, CardHeader } from "@repo/shadcn-ui/components"; +import { Building2Icon, ContactIcon, LandmarkIcon, ScrollTextIcon } from "lucide-react"; import { FormProvider } from "react-hook-form"; import { useTranslation } from "../../../../i18n"; @@ -64,178 +65,194 @@ export const CompanyDetailsSettingsPage = () => { return ( -
-
-

- {t("settings.companyDetails.title")} -

-

- {t("settings.companyDetails.description")} + + +

+
+ +
+
+

+ {t("settings.companyDetails.title")} +

+

+ {t("settings.companyDetails.description")} +

+
+
+ + + {ctrl.inlineLoadError ? ( + + ) : null} + +
+ } + title={t("settings.companyDetails.sections.general.title")} + variant="plain" + > + + + className="col-span-full" + description={t( + "settings.companyDetails.sections.general.fields.legalName.description" + )} + disabled={ctrl.isSaving} + inputClassName="bg-background" + label={t("settings.companyDetails.sections.general.fields.legalName.label")} + name="legalName" + placeholder={t( + "settings.companyDetails.sections.general.fields.legalName.placeholder" + )} + required + /> + + + description={t( + "settings.companyDetails.sections.general.fields.tradeName.description" + )} + disabled={ctrl.isSaving} + inputClassName="bg-background" + label={t("settings.companyDetails.sections.general.fields.tradeName.label")} + name="tradeName" + placeholder={t( + "settings.companyDetails.sections.general.fields.tradeName.placeholder" + )} + /> + + + description={t( + "settings.companyDetails.sections.general.fields.tin.description" + )} + disabled={ctrl.isSaving} + inputClassName="bg-background" + label={t("settings.companyDetails.sections.general.fields.tin.label")} + name="tin" + placeholder={t( + "settings.companyDetails.sections.general.fields.tin.placeholder" + )} + /> + + + + } + title={t("settings.companyDetails.sections.contact.title")} + variant="plain" + > + + + description={t( + "settings.companyDetails.sections.contact.fields.email.description" + )} + disabled={ctrl.isSaving} + inputClassName="bg-background" + label={t("settings.companyDetails.sections.contact.fields.email.label")} + name="email" + placeholder={t( + "settings.companyDetails.sections.contact.fields.email.placeholder" + )} + typePreset="email" + /> + + + description={t( + "settings.companyDetails.sections.contact.fields.phone.description" + )} + disabled={ctrl.isSaving} + inputClassName="bg-background" + label={t("settings.companyDetails.sections.contact.fields.phone.label")} + name="phone" + placeholder={t( + "settings.companyDetails.sections.contact.fields.phone.placeholder" + )} + typePreset="phone" + /> + + + className="col-span-full" + description={t( + "settings.companyDetails.sections.contact.fields.website.description" + )} + disabled={ctrl.isSaving} + inputClassName="bg-background" + label={t("settings.companyDetails.sections.contact.fields.website.label")} + name="website" + placeholder={t( + "settings.companyDetails.sections.contact.fields.website.placeholder" + )} + typePreset="url" + /> + + + + } + title={t("settings.companyDetails.sections.paymentTerm.title")} + variant="plain" + > + + + className="col-span-full" + clearable + clearLabel={t("settings.companyDetails.sections.paymentTerm.field.none")} + description={t( + "settings.companyDetails.sections.paymentTerm.field.description" + )} + disabled={ctrl.isSaving} + emptyValue="" + inputClassName="bg-background" + items={ctrl.paymentTermOptions} + label={t("settings.companyDetails.sections.paymentTerm.field.label")} + name="defaultPaymentTermId" + placeholder={t( + "settings.companyDetails.sections.paymentTerm.field.placeholder" + )} + /> + + +
+ +

+ {ctrl.isSaving + ? t("settings.companyDetails.feedback.saving") + : t("settings.companyDetails.feedback.idle")}

-
- {ctrl.inlineLoadError ? ( - + } + secondary={ + + } /> - ) : null} - -
- } - title={t("settings.companyDetails.sections.general.title")} - variant="card" - > - - - className="col-span-full" - description={t( - "settings.companyDetails.sections.general.fields.legalName.description" - )} - disabled={ctrl.isSaving} - inputClassName="bg-background" - label={t("settings.companyDetails.sections.general.fields.legalName.label")} - name="legalName" - placeholder={t( - "settings.companyDetails.sections.general.fields.legalName.placeholder" - )} - required - /> - - - description={t( - "settings.companyDetails.sections.general.fields.tradeName.description" - )} - disabled={ctrl.isSaving} - inputClassName="bg-background" - label={t("settings.companyDetails.sections.general.fields.tradeName.label")} - name="tradeName" - placeholder={t( - "settings.companyDetails.sections.general.fields.tradeName.placeholder" - )} - /> - - - description={t("settings.companyDetails.sections.general.fields.tin.description")} - disabled={ctrl.isSaving} - inputClassName="bg-background" - label={t("settings.companyDetails.sections.general.fields.tin.label")} - name="tin" - placeholder={t("settings.companyDetails.sections.general.fields.tin.placeholder")} - /> - - - - } - title={t("settings.companyDetails.sections.contact.title")} - variant="card" - > - - - description={t( - "settings.companyDetails.sections.contact.fields.email.description" - )} - disabled={ctrl.isSaving} - inputClassName="bg-background" - label={t("settings.companyDetails.sections.contact.fields.email.label")} - name="email" - placeholder={t( - "settings.companyDetails.sections.contact.fields.email.placeholder" - )} - typePreset="email" - /> - - - description={t( - "settings.companyDetails.sections.contact.fields.phone.description" - )} - disabled={ctrl.isSaving} - inputClassName="bg-background" - label={t("settings.companyDetails.sections.contact.fields.phone.label")} - name="phone" - placeholder={t( - "settings.companyDetails.sections.contact.fields.phone.placeholder" - )} - typePreset="phone" - /> - - - className="col-span-full" - description={t( - "settings.companyDetails.sections.contact.fields.website.description" - )} - disabled={ctrl.isSaving} - inputClassName="bg-background" - label={t("settings.companyDetails.sections.contact.fields.website.label")} - name="website" - placeholder={t( - "settings.companyDetails.sections.contact.fields.website.placeholder" - )} - typePreset="url" - /> - - - - } - title={t("settings.companyDetails.sections.paymentTerm.title")} - variant="card" - > - - - className="col-span-full" - clearable - clearLabel={t("settings.companyDetails.sections.paymentTerm.field.none")} - description={t("settings.companyDetails.sections.paymentTerm.field.description")} - disabled={ctrl.isSaving} - emptyValue="" - inputClassName="bg-background" - items={ctrl.paymentTermOptions} - label={t("settings.companyDetails.sections.paymentTerm.field.label")} - name="defaultPaymentTermId" - placeholder={t("settings.companyDetails.sections.paymentTerm.field.placeholder")} - /> - - -
- -

- {ctrl.isSaving - ? t("settings.companyDetails.feedback.saving") - : t("settings.companyDetails.feedback.idle")} -

- - - } - secondary={ - - } - /> -
+ +
); diff --git a/modules/customer-invoices/src/web/settings/verifactu/ui/pages/company-verifactu-settings-page.tsx b/modules/customer-invoices/src/web/settings/verifactu/ui/pages/company-verifactu-settings-page.tsx index a1bda558..e6e8411d 100644 --- a/modules/customer-invoices/src/web/settings/verifactu/ui/pages/company-verifactu-settings-page.tsx +++ b/modules/customer-invoices/src/web/settings/verifactu/ui/pages/company-verifactu-settings-page.tsx @@ -6,6 +6,8 @@ import { RdxEditorActionBar, RhfSubmitActionButton, } from "@repo/rdx-ui/components"; +import { Card, CardContent, CardHeader } from "@repo/shadcn-ui/components"; +import { ShieldCheckIcon } from "lucide-react"; import { FormProvider } from "react-hook-form"; import { useTranslation } from "../../../../i18n"; @@ -51,80 +53,88 @@ export const CompanyVerifactuSettingsPage = () => { return ( -
-
-

- {t("settings.verifactu.title")} -

-

- {t("settings.verifactu.description")} + + +

+
+ +
+
+

+ {t("settings.verifactu.title")} +

+

+ {t("settings.verifactu.description")} +

+ {ctrl.mode === "initial" ? ( +

+ {t("settings.verifactu.initial_mode_hint")} +

+ ) : null} +
+
+ + + {profileCtrl.isUpdateError ? ( + + ) : null} + +
+ + + {profileCtrl.showExemptionFields || profileCtrl.showVerifactuFields ? ( + + ) : null} + + + + +

+ {profileCtrl.isUpdating + ? t("settings.verifactu.feedback.saving") + : t("settings.verifactu.feedback.idle")}

- {ctrl.mode === "initial" ? ( -

- {t("settings.verifactu.initial_mode_hint")} -

- ) : null} -
- {profileCtrl.isUpdateError ? ( - + } + secondary={ + } - title={t("settings.verifactu.feedback.error.title")} /> - ) : null} - -
- - - {profileCtrl.showExemptionFields || profileCtrl.showVerifactuFields ? ( - - ) : null} - - - - -

- {profileCtrl.isUpdating - ? t("settings.verifactu.feedback.saving") - : t("settings.verifactu.feedback.idle")} -

- - - } - secondary={ - - } - /> -
+ +
); diff --git a/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-configuration-section.tsx b/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-configuration-section.tsx index f0f9a8b0..c1e7684b 100644 --- a/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-configuration-section.tsx +++ b/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-configuration-section.tsx @@ -32,7 +32,7 @@ export const CompanyVerifactuConfigurationSection = ({ description={t("settings.verifactu.configuration.description")} icon={} title={t("settings.verifactu.configuration.title")} - variant="card" + variant="plain" > {showExemptionFields ? ( diff --git a/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-defaults-section.tsx b/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-defaults-section.tsx index 97cded83..8d7dbb37 100644 --- a/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-defaults-section.tsx +++ b/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-defaults-section.tsx @@ -21,7 +21,7 @@ export const CompanyVerifactuDefaultsSection = ({ description={t("settings.verifactu.defaults.description")} icon={} title={t("settings.verifactu.defaults.title")} - variant="card" + variant="plain" > { description={t("settings.verifactu.status.description")} icon={} title={t("settings.verifactu.status.title")} - variant="card" + variant="plain" >