Update mollie icon to SVG (support dark-mode through fill="currentColor").

Show direct debit details instead of the credit card data when direct debit is used as GatewayToken.

Author: TheNewSound

public/gateway-card-images/mollie.png

@@ -14,15 +14,27 @@ import { GroupSettings } from './group-settings';
 import { Location } from './location';
 import { TaxInfo } from './tax-info';
 import { Timestamps } from './timestamps';
+import { GatewayType } from '$app/common/enums/gateway-type';
 
-interface Meta {
+interface BaseMeta {
   brand: string;
+  type: GatewayType;
+}
+
+interface CreditCardMeta extends BaseMeta {
   exp_month: string;
   exp_year: string;
   last4: string;
-  type: number;
 }
 
+interface DirectDebitMeta extends BaseMeta {
+  bank_account_name: string;
+  bank_account_number: string;
+  bank_account_bic?: string;
+}
+
+type Meta = CreditCardMeta | DirectDebitMeta;
+
 interface GatewayToken {
   id: string;
   archived_at: number;

src/common/interfaces/client.ts

@@ -0,0 +1,42 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+interface Props {
+  size?: string;
+  color?: string;
+}
+
+export function MollieIcon(props: Props) {
+  const { size = '2rem', color = 'currentColor' } = props;
+
+  return (
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 320 94"
+      style={{
+        width: size,
+        height: 'auto',
+        aspectRatio: '320/94',
+      }}
+      xmlSpace="preserve"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill={color}
+        d="M289.3,44.3c6.9,0,13.2,4.5,15.4,11h-30.7C276.1,48.9,282.3,44.3,289.3,44.3z M320,60.9c0-8-3.1-15.6-8.8-21.4c-5.7-5.8-13.3-9-21.3-9h-0.4c-8.3,0.1-16.2,3.4-22.1,9.3c-5.9,5.9-9.2,13.7-9.3,22c-0.1,8.5,3.2,16.5,9.2,22.6c6.1,6.1,14.1,9.5,22.6,9.5h0c11.2,0,21.7-6,27.4-15.6l0.7-1.2l-12.6-6.2l-0.6,1c-3.1,5.2-8.6,8.2-14.7,8.2c-7.7,0-14.4-5.1-16.5-12.5H320V60.9z M241.2,19.8c-5.5,0-9.9-4.4-9.9-9.9c0-5.5,4.4-9.9,9.9-9.9s9.9,4.4,9.9,9.9C251.2,15.3,246.7,19.8,241.2,19.8z M233.6,92.7h15.2V31.8h-15.2V92.7z M204.5,1.3h15.2v91.5h-15.2V1.3z M175.4,92.7h15.2V1.3h-15.2V92.7z M135.3,79c-9.2,0-16.8-7.5-16.8-16.7c0-9.2,7.5-16.7,16.8-16.7s16.8,7.5,16.8,16.7C152.1,71.5,144.6,79,135.3,79z M135.3,30.5c-17.6,0-31.8,14.2-31.8,31.7S117.8,94,135.3,94c17.5,0,31.8-14.2,31.8-31.7S152.9,30.5,135.3,30.5z M70.4,30.6c-0.8-0.1-1.6-0.1-2.4-0.1c-7.7,0-15,3.1-20.2,8.7c-5.2-5.5-12.5-8.7-20.1-8.7C12.4,30.5,0,42.9,0,58v34.7h14.9V58.5c0-6.3,5.2-12.1,11.3-12.7c0.4,0,0.9-0.1,1.3-0.1c6.9,0,12.5,5.6,12.5,12.5v34.6h15.2V58.4c0-6.3,5.2-12.1,11.3-12.7c0.4,0,0.9-0.1,1.3-0.1c6.9,0,12.5,5.6,12.6,12.4v34.7h15.2V58.5c0-7-2.6-13.6-7.2-18.8C83.7,34.4,77.3,31.2,70.4,30.6z"
+      />
+    </svg>
+  );
+}

src/components/icons/MollieIcon.tsx

@@ -17,7 +17,7 @@ import paypalLogo from '/gateway-card-images/paypal.png';
 import braintreeLogo from '/gateway-card-images/braintree.svg.png';
 import checkoutcomLogo from '/gateway-card-images/checkout.jpg';
 import goCardlessLogo from '/gateway-card-images/gocardless.png';
-import mollieLogo from '/gateway-card-images/mollie.png';
+import { MollieIcon } from '$app/components/icons/MollieIcon';
 import payfastLogo from '/gateway-card-images/payfast.png';
 import paytraceLogo from '/gateway-card-images/paytrace.svg';
 import razorpayLogo from '/gateway-card-images/razorpay.png';
@@ -175,11 +175,9 @@ export function GatewayTypeIcon(props: Props) {
 
     case 'mollie':
       return (
-        <img
-          src={mollieLogo}
-          alt="Mollie"
-          style={props.style || { width: 40, height: 40 }}
-        />
+        <div style={props.style || { width: 40, height: 40, display: 'flex' }}>
+          <MollieIcon />
+        </div>
       );
 
     case 'payfast':

src/pages/clients/show/components/GatewayTypeIcon.tsx

@@ -173,23 +173,34 @@ export function Gateways(props: Props) {
                       </Link>
                     </div>
                   </div>
-
                   <div className="flex items-center space-x-2">
                     <GatewayTypeIcon
                       name={token.meta.brand as GatewayLogoName}
                     />
 
-                    <div
-                      className="flex items-center"
-                      style={{ color: colors.$17 }}
-                    >
-                      <span className="mt-1">****</span>
-                      <span className="ml-1">{token.meta.last4}</span>
-                    </div>
-
-                    <span style={{ color: colors.$17 }}>
-                      {token.meta.exp_month}/{token.meta.exp_year}
-                    </span>
+                    {('bank_account_number' in token.meta) ? (
+                      // Direct Debit display
+                      <div style={{ color: colors.$17 }}>
+                        <span>{token.meta.bank_account_name}<br/>{token.meta.bank_account_number}</span>
+                      </div>
+                    ) : ('last4' in token.meta) ? (
+                      // Credit Card display
+                      <>
+                        <div
+                          className="flex items-center"
+                          style={{ color: colors.$17 }}
+                        >
+                          <span className="mt-1">****</span>
+                          <span className="ml-1">{token.meta.last4}</span>
+                        </div>
+                        <span style={{ color: colors.$17 }}>
+                          {token.meta.exp_month}/{token.meta.exp_year}
+                        </span>
+                      </>
+                    ) : (
+                      <>
+                      </>
+                    )}
                   </div>
                 </div>