Merge pull request #2264 from Civolilah/feature/1765-delete-payment-m…

…ethod [Feature] Implementing Delete Functionality For Gateway Tokens
invoiceninja · Dec 20, 2024 · 9807811 · 9807811
2 parents d04666d + 7c80dd0
commit 9807811
Show file tree

Hide file tree

Showing 6 changed files with 256 additions and 122 deletions.
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
@@ -30,6 +30,9 @@ interface Props extends CommonProps {
   label?: string | null;
   cardActions?: boolean;
   cypressRef?: string;
+  customLabel?: ReactNode;
+  minWidth?: string;
+  maxWidth?: string;
 }
 
 const LabelButton = styled.button`
@@ -89,8 +92,8 @@ export function Dropdown(props: Props) {
             style={{
               backgroundColor: colors.$1,
               borderColor: colors.$4,
-              minWidth: '12rem',
-              maxWidth: '14.7rem',
+              minWidth: props.minWidth ?? '12rem',
+              maxWidth: props.maxWidth ?? '14.7rem',
             }}
             data-cy={props.cypressRef}
           >
@@ -109,31 +112,43 @@ export function Dropdown(props: Props) {
         )}
         visible={visible}
       >
-        <LabelButton
-          theme={{
-            backgroundColor: accentColor,
-            color: colors.$9,
-            borderColor: colors.$5,
-          }}
-          type="button"
-          disabled={props.disabled}
-          onClick={() => setVisible(!visible)}
-          className={classNames(
-            `border inline-flex items-center space-x-2 px-4 justify-center rounded text-sm disabled:cursor-not-allowed disabled:opacity-75 py-2 ${props.className}`,
-            {
-              'hover:bg-white hover:border-gray-300': !props.cardActions,
-              'hover:opacity-90': props.cardActions,
-            }
-          )}
-          style={{
-            backgroundColor: props.cardActions && accentColor,
-            color: props.cardActions ? 'white' : '',
-          }}
-          data-cy="chevronDownButton"
-        >
-          {!props.cardActions && <span>{props.label}</span>}
-          <ChevronDown size={props.cardActions ? 18 : 14} />
-        </LabelButton>
+        {props.customLabel ? (
+          <div
+            onClick={(event) => {
+              event.stopPropagation();
+              event.preventDefault();
+              setVisible(!visible);
+            }}
+          >
+            {props.customLabel}
+          </div>
+        ) : (
+          <LabelButton
+            theme={{
+              backgroundColor: accentColor,
+              color: colors.$9,
+              borderColor: colors.$5,
+            }}
+            type="button"
+            disabled={props.disabled}
+            onClick={() => setVisible(!visible)}
+            className={classNames(
+              `border inline-flex items-center space-x-2 px-4 justify-center rounded text-sm disabled:cursor-not-allowed disabled:opacity-75 py-2 ${props.className}`,
+              {
+                'hover:bg-white hover:border-gray-300': !props.cardActions,
+                'hover:opacity-90': props.cardActions,
+              }
+            )}
+            style={{
+              backgroundColor: props.cardActions && accentColor,
+              color: props.cardActions ? 'white' : '',
+            }}
+            data-cy="chevronDownButton"
+          >
+            {!props.cardActions && <span>{props.label}</span>}
+            <ChevronDown size={props.cardActions ? 18 : 14} />
+          </LabelButton>
+        )}
       </Tippy>
     </div>
   );

diff --git a/src/pages/clients/show/components/ClientPrivateNotes.tsx b/src/pages/clients/show/components/ClientPrivateNotes.tsx
@@ -29,7 +29,7 @@ export function ClientPrivateNotes(props: Props) {
   return (
     <>
       {Boolean(client && client.private_notes) && (
-        <div className="col-span-12 md:col-span-6 lg:col-span-3">
+        <div className="col-span-12 md:col-span-6 lg:col-span-6 xl:col-span-3">
           <InfoCard
             title={t('private_notes')}
             value={

diff --git a/src/pages/clients/show/components/ClientPublicNotes.tsx b/src/pages/clients/show/components/ClientPublicNotes.tsx
@@ -29,7 +29,7 @@ export function ClientPublicNotes(props: Props) {
   return (
     <>
       {Boolean(client && client.public_notes) && (
-        <div className="col-span-12 md:col-span-6 lg:col-span-3">
+        <div className="col-span-12 md:col-span-6 lg:col-span-6 xl:col-span-3">
           <InfoCard
             title={t('public_notes')}
             value={

diff --git a/src/pages/clients/show/components/EmailHistory.tsx b/src/pages/clients/show/components/EmailHistory.tsx
@@ -47,7 +47,7 @@ export function EmailHistory() {
   return (
     <>
       {Boolean(emailRecords.length) && (
-        <div className="col-span-12 md:col-span-6 lg:col-span-3">
+        <div className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-4">
           <InfoCard
             title={t('email_history')}
             className="max-h-96 overflow-y-auto h-full"