@hed-hog/contact 0.0.328 → 0.0.329

package/hedhog/frontend/app/_components/person-picker.tsx.ejs

@@ -44,7 +44,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { ChevronsUpDown, Loader2, Plus, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import {
+  type FieldValues,
+  type Path,
+  type UseFormReturn,
+  useForm,
+  useWatch,
+} from 'react-hook-form';
 import { z } from 'zod';
 
 type PersonOption = {
@@ -66,6 +72,7 @@ type CreatePersonValues = {
 };
 
 type PersonTypeFilter = 'individual' | 'company' | 'all';
+type FieldValueType = 'string' | 'number';
 
 type ContactTypeLookup = {
   code: string;
@@ -88,7 +95,7 @@ type PaginatedResponse<T> = {
   data?: T[];
 };
 
-function usePersonFieldWithCreateTranslations() {
+function usePersonPickerTranslations() {
   const tRoot = useTranslations();
 
   return (
@@ -138,7 +145,7 @@ function CreatePersonSheet({
 }) {
   const { request, showToastHandler, currentLocaleCode, getSettingValue } =
     useApp();
-  const t = usePersonFieldWithCreateTranslations();
+  const t = usePersonPickerTranslations();
   const allowCompanyRegistration =
     getSettingValue('contact-allow-company-registration') !== false;
 
@@ -575,7 +582,7 @@ export function PersonPicker({
   disabled?: boolean;
 }) {
   const { request } = useApp();
-  const t = usePersonFieldWithCreateTranslations();
+  const t = usePersonPickerTranslations();
   const [personOpen, setPersonOpen] = useState(false);
   const [personSearch, setPersonSearch] = useState('');
   const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
@@ -948,3 +955,70 @@ export function PersonPicker({
     </>
   );
 }
+
+function parsePersonFieldValue(
+  personId: number | null,
+  valueType: FieldValueType
+) {
+  if (personId === null) {
+    return valueType === 'number' ? null : '';
+  }
+
+  return valueType === 'number' ? personId : String(personId);
+}
+
+export function PersonPickerField<TFieldValues extends FieldValues>({
+  form,
+  name,
+  label,
+  entityLabel,
+  selectPlaceholder,
+  personTypeFilter = 'all',
+  createType = 'individual',
+  lockCreateType = false,
+  valueType = 'string',
+  initialSelectedLabel = '',
+  disabled = false,
+}: {
+  form: UseFormReturn<TFieldValues>;
+  name: Path<TFieldValues>;
+  label: string;
+  entityLabel: string;
+  selectPlaceholder: string;
+  personTypeFilter?: PersonTypeFilter;
+  createType?: Exclude<PersonTypeFilter, 'all'>;
+  lockCreateType?: boolean;
+  valueType?: FieldValueType;
+  initialSelectedLabel?: string;
+  disabled?: boolean;
+}) {
+  const fieldValue = useWatch({
+    control: form.control,
+    name,
+  }) as string | number | null | undefined;
+
+  return (
+    <PersonPicker
+      label={label}
+      entityLabel={entityLabel}
+      value={fieldValue ?? null}
+      onChange={(personId) => {
+        form.setValue(
+          name,
+          parsePersonFieldValue(personId, valueType) as never,
+          {
+            shouldValidate: false,
+            shouldDirty: true,
+            shouldTouch: true,
+          }
+        );
+      }}
+      selectPlaceholder={selectPlaceholder}
+      personTypeFilter={personTypeFilter}
+      createType={createType}
+      lockCreateType={lockCreateType}
+      initialSelectedLabel={initialSelectedLabel}
+      disabled={disabled}
+    />
+  );
+}

package/hedhog/frontend/app/person/_components/person-form-sheet.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
+import { PersonPickerField } from '@/app/(app)/(libraries)/contact/_components/person-picker';
 import {
   AlertDialog,
   AlertDialogContent,
@@ -2402,7 +2402,7 @@ export function PersonFormSheet({
 
                       {allowCompanyRegistration ? (
                         <div className="space-y-1.5">
-                          <PersonFieldWithCreate<PersonFormValues>
+                          <PersonPickerField<PersonFormValues>
                             form={form}
                             name="employer_company_id"
                             label={t('employerCompany')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/contact",
-  "version": "0.0.328",
+  "version": "0.0.329",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,13 +9,13 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
-    "@hed-hog/api": "0.0.8",
     "@hed-hog/api-locale": "0.0.14",
     "@hed-hog/api-mail": "0.0.9",
-    "@hed-hog/address": "0.0.328",
-    "@hed-hog/api-prisma": "0.0.6",
-    "@hed-hog/core": "0.0.328",
-    "@hed-hog/api-pagination": "0.0.7"
+    "@hed-hog/api-pagination": "0.0.7",
+    "@hed-hog/core": "0.0.329",
+    "@hed-hog/api": "0.0.8",
+    "@hed-hog/address": "0.0.329",
+    "@hed-hog/api-prisma": "0.0.6"
   },
   "exports": {
     ".": {

package/hedhog/frontend/app/_components/crm-coming-soon.tsx.ejs

@@ -1,110 +0,0 @@
-'use client';
-
-import { CrmNav } from './crm-nav';
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import type { LucideIcon } from 'lucide-react';
-import { ArrowRight, Sparkles } from 'lucide-react';
-import Link from 'next/link';
-import { useTranslations } from 'next-intl';
-
-type CrmComingSoonProps = {
-  currentHref: string;
-  titleKey: string;
-  descriptionKey: string;
-  icon: LucideIcon;
-};
-
-export function CrmComingSoon({
-  currentHref,
-  titleKey,
-  descriptionKey,
-  icon: Icon,
-}: CrmComingSoonProps) {
-  const t = useTranslations('contact.CrmMenu');
-  const common = useTranslations('contact.CrmFuturePage');
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: common('breadcrumbs.home'), href: '/' },
-          { label: common('breadcrumbs.crm'), href: '/contact/dashboard' },
-          { label: t(`sections.${titleKey}.title`) },
-        ]}
-        title={t(`sections.${titleKey}.title`)}
-        description={t(`sections.${descriptionKey}.description`)}
-      />
-
-      <div className="min-w-0 space-y-6 overflow-x-hidden">
-        <CrmNav currentHref={currentHref} />
-
-        <Card className="overflow-hidden border-orange-200/70 bg-gradient-to-br from-orange-50 via-background to-amber-50 py-0">
-          <CardContent className="grid gap-6 px-6 py-8 lg:grid-cols-[minmax(0,1.2fr)_minmax(260px,0.8fr)]">
-            <div className="min-w-0 space-y-4">
-              <Badge className="w-fit rounded-full bg-orange-500/10 px-3 py-1 text-orange-700 hover:bg-orange-500/10">
-                <Sparkles className="mr-2 size-3.5" />
-                {common('badge')}
-              </Badge>
-              <div className="space-y-3">
-                <div className="flex items-center gap-3">
-                  <div className="rounded-2xl bg-orange-500/10 p-3 text-orange-700">
-                    <Icon className="size-5" />
-                  </div>
-                  <h2 className="text-3xl font-semibold tracking-tight">
-                    {t(`sections.${titleKey}.title`)}
-                  </h2>
-                </div>
-                <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
-                  {common('description')}
-                </p>
-              </div>
-              <div className="flex flex-wrap gap-3">
-                <Button asChild>
-                  <Link href="/contact/dashboard">
-                    {common('backToDashboard')}
-                  </Link>
-                </Button>
-                <Button asChild variant="outline">
-                  <Link href="/contact/pipeline">{common('seePipeline')}</Link>
-                </Button>
-              </div>
-            </div>
-
-            <Card className="border-white/70 bg-white/80 shadow-sm">
-              <CardHeader>
-                <CardTitle>{common('nextStepTitle')}</CardTitle>
-                <CardDescription>
-                  {common('nextStepDescription')}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {['stepOne', 'stepTwo', 'stepThree'].map((step) => (
-                  <div
-                    key={step}
-                    className="flex items-start gap-3 rounded-2xl border border-border/70 bg-background px-4 py-3"
-                  >
-                    <div className="mt-0.5 rounded-full bg-orange-500/10 p-1.5 text-orange-700">
-                      <ArrowRight className="size-3.5" />
-                    </div>
-                    <p className="text-sm text-muted-foreground">
-                      {common(step)}
-                    </p>
-                  </div>
-                ))}
-              </CardContent>
-            </Card>
-          </CardContent>
-        </Card>
-      </div>
-    </Page>
-  );
-}