@accounter/client 0.0.8-alpha-20251022162652-6facbcde08fdda0fb354ba7105432df320367509 → 0.0.8-alpha-20251023065832-9a9f37786b0e29dc8e6ea58ec9856bc043cc0e8a

package/src/components/businesses/all-businesses-row.tsx

@@ -1,87 +0,0 @@
-import { useState, type ReactElement } from 'react';
-import { PanelTopClose, PanelTopOpen } from 'lucide-react';
-import { Paper } from '@mantine/core';
-import {
-  AllBusinessesRowFieldsFragmentDoc,
-  type AllBusinessesForScreenQuery,
-  type AllBusinessesRowFieldsFragment,
-} from '../../gql/graphql.js';
-import { getFragmentData } from '../../gql/index.js';
-import { BusinessCard, ToggleMergeSelected } from '../common/index.js';
-import { Button } from '../ui/button.js';
-import { HebrewName } from './cells/hebrew-name.js';
-import { Name } from './cells/name.js';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
-/* GraphQL */ `
-  fragment AllBusinessesRowFields on LtdFinancialEntity {
-    id
-    ...AllBusinessesNameFields
-    ...AllBusinessesHebrewNameFields
-  }
-`;
-
-interface Props {
-  data: Extract<
-    NonNullable<AllBusinessesForScreenQuery['allBusinesses']>['nodes'][number],
-    { __typename: 'LtdFinancialEntity' }
-  >;
-  isAllOpened: boolean;
-  toggleMergeBusiness?: (onChange: () => void) => void;
-  isSelectedForMerge: boolean;
-}
-
-export const AllBusinessesRow = ({
-  data,
-  isAllOpened,
-  toggleMergeBusiness,
-  isSelectedForMerge,
-}: Props): ReactElement => {
-  const [opened, setOpened] = useState(false);
-  const [business, setBusiness] = useState<AllBusinessesRowFieldsFragment>(
-    getFragmentData(AllBusinessesRowFieldsFragmentDoc, data),
-  );
-
-  return (
-    <>
-      <tr>
-        <Name data={business} />
-        <HebrewName data={business} />
-        <td>
-          <div className="flex flex-col gap-2">
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-7.5"
-              onClick={(): void => {
-                setOpened(i => !i);
-              }}
-            >
-              {isAllOpened || opened ? (
-                <PanelTopClose className="size-5" />
-              ) : (
-                <PanelTopOpen className="size-5" />
-              )}
-            </Button>
-
-            {toggleMergeBusiness && (
-              <ToggleMergeSelected
-                toggleMergeSelected={(): void => toggleMergeBusiness(() => {})}
-                mergeSelected={isSelectedForMerge}
-              />
-            )}
-          </div>
-        </td>
-      </tr>
-      {(isAllOpened || opened) && (
-        <tr>
-          <td colSpan={12}>
-            <Paper style={{ width: '100%' }} withBorder shadow="lg">
-              <BusinessCard businessID={business.id} updateBusiness={setBusiness} />
-            </Paper>
-          </td>
-        </tr>
-      )}
-    </>
-  );
-};

package/src/components/businesses/cells/hebrew-name.tsx

@@ -1,31 +0,0 @@
-import type { ReactElement } from 'react';
-import { AllBusinessesHebrewNameFieldsFragmentDoc } from '../../../gql/graphql.js';
-import { getFragmentData, type FragmentType } from '../../../gql/index.js';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
-/* GraphQL */ `
-  fragment AllBusinessesHebrewNameFields on LtdFinancialEntity {
-    id
-    hebrewName
-  }
-`;
-
-type Props = {
-  data: FragmentType<typeof AllBusinessesHebrewNameFieldsFragmentDoc>;
-};
-
-export const HebrewName = ({ data }: Props): ReactElement => {
-  const business = getFragmentData(AllBusinessesHebrewNameFieldsFragmentDoc, data);
-
-  return (
-    <td>
-      <div
-        style={{
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {business.hebrewName}
-      </div>
-    </td>
-  );
-};

package/src/components/businesses/cells/index.ts

@@ -1,2 +0,0 @@
-export * from './name.js';
-export * from './hebrew-name.js';

package/src/components/businesses/cells/name.tsx

@@ -1,31 +0,0 @@
-import { type ReactElement } from 'react';
-import { AllBusinessesNameFieldsFragmentDoc } from '../../../gql/graphql.js';
-import { getFragmentData, type FragmentType } from '../../../gql/index.js';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
-/* GraphQL */ `
-  fragment AllBusinessesNameFields on LtdFinancialEntity {
-    id
-    name
-  }
-`;
-
-type Props = {
-  data: FragmentType<typeof AllBusinessesNameFieldsFragmentDoc>;
-};
-
-export const Name = ({ data }: Props): ReactElement => {
-  const business = getFragmentData(AllBusinessesNameFieldsFragmentDoc, data);
-
-  return (
-    <td>
-      <div
-        style={{
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {business.name}
-      </div>
-    </td>
-  );
-};

package/src/components/common/buttons/button-with-label.tsx

@@ -1,41 +0,0 @@
-import type { CSSProperties, MouseEventHandler, ReactElement } from 'react';
-
-export interface ButtonWithLabelProps {
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  type?: 'submit' | 'button';
-  style?: CSSProperties;
-  target?: string;
-  rel?: string;
-  title?: string;
-  url?: string;
-  textLabel?: string;
-}
-
-export const ButtonWithLabel = ({
-  title,
-  url,
-  style,
-  target,
-  textLabel,
-  rel,
-  type = 'button',
-  onClick,
-}: ButtonWithLabelProps): ReactElement => {
-  return (
-    <div>
-      <label className="text-sm font-medium text-gray-700">{textLabel}</label>
-      <div>
-        <button
-          style={style}
-          type={type}
-          onClick={onClick}
-          className="bg-gray-100 border focus:ring-2 focus:ring-indigo-200 focus:bg-transparent hover:bg-indigo-500 hover:text-white text-base outline-hidden text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out sm:text-sm rounded-md"
-        >
-          <a rel={rel} target={target} href={url} type={type}>
-            {title}
-          </a>
-        </button>
-      </div>
-    </div>
-  );
-};

package/src/components/common/buttons/button.tsx

@@ -1,44 +0,0 @@
-import type {
-  ButtonHTMLAttributes,
-  CSSProperties,
-  DetailedHTMLProps,
-  MouseEventHandler,
-  ReactElement,
-} from 'react';
-
-export interface Props
-  extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  herf?: string;
-  type?: 'submit' | 'button';
-  style?: CSSProperties;
-  target?: string;
-  rel?: string;
-  title?: string;
-  url?: string;
-}
-
-export const Button = ({
-  title,
-  herf,
-  style,
-  target,
-  rel,
-  type = 'button',
-  onClick,
-  ...props
-}: Props): ReactElement => {
-  return (
-    <button
-      style={style}
-      type={type}
-      onClick={onClick}
-      className="cursor: pointer text-align: center flex ml-auto text-white bg-indigo-500 border-0 py-1.5 px-3 focus:outline-hidden hover:bg-indigo-600 rounded-sm;"
-      {...props}
-    >
-      <a rel={rel} target={target} href={herf} type={type}>
-        {title}
-      </a>
-    </button>
-  );
-};

package/src/components/common/forms/business-card.tsx

@@ -1,234 +0,0 @@
-import { useContext, useEffect, useState, type ReactElement } from 'react';
-import { useForm, type SubmitHandler } from 'react-hook-form';
-import { useQuery, type UseQueryExecute } from 'urql';
-import { Loader } from '@mantine/core';
-import {
-  FetchBusinessDocument,
-  type AllBusinessesRowFieldsFragment,
-  type FetchBusinessQuery,
-  type UpdateBusinessInput,
-} from '../../../gql/graphql.js';
-import { relevantDataPicker, type MakeBoolean } from '../../../helpers/index.js';
-import { useUpdateBusiness } from '../../../hooks/use-update-business.js';
-import { UserContext } from '../../../providers/user-provider.js';
-import { Form } from '../../ui/form.js';
-import { CopyToClipboardButton, SimilarChargesByBusinessModal } from '../index.js';
-import { ModifyBusinessFields } from './modify-business-fields.js';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
-/* GraphQL */ `
-  query FetchBusiness($id: UUID!) {
-    business(id: $id) {
-      __typename
-      id
-      ... on LtdFinancialEntity {
-        country
-        address
-        email
-        exemptDealer
-        governmentId
-        hebrewName
-        name
-        phoneNumber
-        sortCode {
-          id
-          key
-          name
-        }
-        taxCategory {
-          id
-          name
-        }
-        website
-        suggestions {
-          phrases
-          tags {
-            id
-            name
-          }
-          description
-          emails
-          emailListener {
-            internalEmailLinks
-            emailBody
-            attachments
-          }
-        }
-        optionalVAT
-        irsCode
-        pcn874RecordType
-      }
-    }
-  }
-`;
-
-interface Props {
-  businessID: string;
-  updateBusiness: React.Dispatch<React.SetStateAction<AllBusinessesRowFieldsFragment>>;
-}
-
-export function BusinessCard({ businessID, updateBusiness }: Props): ReactElement {
-  const [business, setBusiness] = useState<
-    Extract<FetchBusinessQuery['business'], { __typename: 'LtdFinancialEntity' }> | undefined
-  >(undefined);
-
-  // Form business data handle
-  const [{ data, fetching: businessFetching }, refetchBusiness] = useQuery({
-    query: FetchBusinessDocument,
-    variables: {
-      id: businessID,
-    },
-  });
-
-  useEffect(() => {
-    if (businessFetching) {
-      setBusiness(undefined);
-    } else if (data && data.business.__typename === 'LtdFinancialEntity') {
-      setBusiness(data.business);
-    }
-  }, [data, businessFetching]);
-
-  // on every business successful fetch, update the business in the parent component
-  useEffect(() => {
-    if (business) {
-      updateBusiness(business);
-    }
-  }, [business, updateBusiness]);
-
-  return (
-    <div className="flex flex-col gap-5">
-      {business ? (
-        <BusinessCardContent business={business} refetchBusiness={refetchBusiness} />
-      ) : businessFetching ? (
-        <Loader className="flex self-center my-5" color="dark" size="xl" variant="dots" />
-      ) : (
-        <p>Error fetching extended information for this business</p>
-      )}
-    </div>
-  );
-}
-
-interface ContentProps {
-  business: Extract<FetchBusinessQuery['business'], { __typename: 'LtdFinancialEntity' }>;
-  refetchBusiness: UseQueryExecute;
-}
-
-function BusinessCardContent({ business, refetchBusiness }: ContentProps): ReactElement {
-  const [fetching, setFetching] = useState<boolean>(false);
-  const [similarChargesOpen, setSimilarChargesOpen] = useState(false);
-  const [similarChargesData, setSimilarChargesData] = useState<
-    | {
-        tagIds?: { id: string }[];
-        description?: string;
-      }
-    | undefined
-  >(undefined);
-  const { userContext } = useContext(UserContext);
-
-  const { updateBusiness: updateDbBusiness, fetching: isBusinessLoading } = useUpdateBusiness();
-
-  // form management
-  const formManager = useForm<UpdateBusinessInput>({
-    defaultValues: {
-      ...business,
-      taxCategory: business.taxCategory?.id,
-      sortCode: business?.sortCode?.key,
-      irsCode: business?.irsCode,
-    },
-  });
-
-  const {
-    handleSubmit: handleBusinessSubmit,
-    formState: { dirtyFields: dirtyBusinessFields },
-  } = formManager;
-
-  const onBusinessSubmit: SubmitHandler<UpdateBusinessInput> = async data => {
-    if (!business || !userContext?.context.adminBusinessId) {
-      return;
-    }
-
-    const dataToUpdate = relevantDataPicker(data, dirtyBusinessFields as MakeBoolean<typeof data>);
-    if (dataToUpdate && Object.keys(dataToUpdate).length > 0) {
-      dataToUpdate.sortCode &&= parseInt(dataToUpdate.sortCode.toString());
-
-      if (dataToUpdate.suggestions?.tags) {
-        dataToUpdate.suggestions.tags = dataToUpdate.suggestions.tags.map(tag => ({ id: tag.id }));
-      }
-      if (dataToUpdate.suggestions?.phrases) {
-        dataToUpdate.suggestions.phrases = data.suggestions!.phrases!.map(phrase => phrase);
-      }
-      if (dataToUpdate.suggestions?.emails) {
-        dataToUpdate.suggestions.emails = data.suggestions!.emails!.map(email => email);
-      }
-      if (dataToUpdate.suggestions?.emailListener) {
-        dataToUpdate.suggestions.emailListener.attachments &&=
-          data.suggestions!.emailListener!.attachments!.map(type => type);
-        dataToUpdate.suggestions.emailListener.internalEmailLinks &&=
-          data.suggestions!.emailListener!.internalEmailLinks!.map(link => link);
-      }
-
-      await updateDbBusiness({
-        businessId: business.id,
-        ownerId: userContext.context.adminBusinessId,
-        fields: dataToUpdate,
-      });
-
-      if (dataToUpdate.suggestions?.tags?.length || dataToUpdate.suggestions?.description) {
-        setSimilarChargesData({
-          tagIds: dataToUpdate.suggestions?.tags?.map(t => ({ id: t.id })),
-          description: dataToUpdate.suggestions?.description ?? undefined,
-        });
-        setSimilarChargesOpen(true);
-      } else {
-        refetchBusiness();
-      }
-    }
-  };
-
-  return (
-    <>
-      {fetching && (
-        <Loader className="flex self-center my-5" color="dark" size="xl" variant="dots" />
-      )}
-      <div className="flex flex-row gap-5">
-        <Form {...formManager}>
-          <form onSubmit={handleBusinessSubmit(onBusinessSubmit)}>
-            <div className="flex flex-row mx-3 pt-3 sm:text-1xl gap-10">
-              <h1 className="sm:text-2xl font-small text-gray-900">Edit Business:</h1>
-              <div className="flex flex-row gap-2">
-                ID: {business.id}
-                <CopyToClipboardButton content={business.id} />
-              </div>
-            </div>
-            <div className="flex-row px-10 h-max justify-start block">
-              <ModifyBusinessFields
-                isInsert={false}
-                formManager={formManager}
-                setFetching={setFetching}
-              />
-            </div>
-            <div className="mt-10 mb-5 flex justify-center gap-5">
-              <button
-                type="submit"
-                onClick={(): (() => Promise<void>) => handleBusinessSubmit(onBusinessSubmit)}
-                className="mt-8 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-hidden hover:bg-indigo-600 rounded-sm text-lg"
-                disabled={isBusinessLoading || Object.keys(dirtyBusinessFields).length === 0}
-              >
-                Update
-              </button>
-            </div>
-          </form>
-        </Form>
-      </div>
-
-      <SimilarChargesByBusinessModal
-        businessId={business.id}
-        tagIds={similarChargesData?.tagIds}
-        description={similarChargesData?.description}
-        open={similarChargesOpen}
-        onOpenChange={setSimilarChargesOpen}
-        onClose={refetchBusiness}
-      />
-    </>
-  );
-}