@kronor/dtv 0.2.9

package/src/framework/view.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { ColumnDefinition } from "./column-definition";
+import { FilterSchemasAndGroups } from "./filters";
+import { FilterState } from "./state";
+import { FilterFormState } from "./filter-form-state";
+import { HasuraCondition } from "./graphql";
+
+export type NoRowsComponentProps = {
+    setFilterState: (updater: (currentState: FilterState) => FilterState) => void;
+    filterState: FilterState;
+    applyFilters: () => void;
+    updateFilterById: (filterId: string, updater: (currentValue: FilterFormState) => FilterFormState) => void;
+};
+
+export type NoRowsComponent = (props: NoRowsComponentProps) => React.ReactNode;
+
+export type ViewId = string;
+
+export type View = {
+    title: string;
+    id: ViewId;
+    collectionName: string;
+    columnDefinitions: ColumnDefinition[];
+    filterSchema: FilterSchemasAndGroups;
+    boolExpType: string; // GraphQL boolean expression type for this view
+    orderByType: string; // GraphQL order by type for this view
+    paginationKey: string; // Field to use for cursor-based pagination
+    noRowsComponent?: NoRowsComponent;
+    // Optional static GraphQL conditions (Hasura boolean expressions) always applied in addition to user filters
+    staticConditions?: HasuraCondition[];
+};
+
+
+// JSON Schema types for view definitions
+// These types represent the serializable structure for views that can be stored in JSON
+
+export type { ColumnDefinitionJson, ViewJson } from './view-parser';
+export { parseColumnDefinitionJson, parseViewJson } from './view-parser';

package/src/index.css

@@ -0,0 +1,6 @@
+@import "tailwindcss" prefix(tw);
+
+@import 'primereact/resources/themes/lara-light-indigo/theme.css';
+@import 'primereact/resources/primereact.min.css';
+@import 'primeicons/primeicons.css';
+@import 'primeflex/primeflex.css';

package/src/main.tsx

@@ -0,0 +1,99 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { PrimeReactProvider } from 'primereact/api';
+import { Runtime } from './framework/runtime';
+
+export interface RenderTableViewOptions {
+    graphqlHost: string;
+    graphqlToken: string;
+    geminiApiKey: string;
+    viewsJson: string; // JSON string containing array of view definitions
+    showViewsMenu?: boolean; // Controls whether the views menu is shown
+    showViewTitle?: boolean; // Option to show/hide view title
+    externalRuntime?: Runtime; // Optional external runtime that takes precedence over built-in runtimes
+    syncFilterStateToUrl?: boolean; // When true, keeps current filter state encoded in URL param `dtv-filter-state`
+}
+
+
+function renderTableView(target: HTMLElement | string, options: RenderTableViewOptions) {
+    const reactContainer = typeof target === 'string' ? document.getElementById(target) : target;
+    if (!reactContainer) throw new Error('Target element not found');
+
+    createRoot(reactContainer).render(
+        <StrictMode>
+            <PrimeReactProvider value={{}}>
+                <App
+                    graphqlHost={options.graphqlHost}
+                    graphqlToken={options.graphqlToken}
+                    geminiApiKey={options.geminiApiKey}
+                    showViewsMenu={options.showViewsMenu ?? false}
+                    showViewTitle={options.showViewTitle ?? false}
+                    viewsJson={options.viewsJson}
+                    externalRuntime={options.externalRuntime}
+                    syncFilterStateToUrl={options.syncFilterStateToUrl ?? false}
+                />
+            </PrimeReactProvider>
+        </StrictMode>
+    );
+}
+
+// Make renderTableView available globally
+// @ts-expect-error Adding renderTableView to window object for global access
+window.renderTableView = renderTableView;
+
+// In development, preload views based on URL parameter or load payment requests by default
+if (import.meta.env.DEV) {
+    const rootEl = document.getElementById('root');
+    if (rootEl) {
+        // Async wrapper function to load view and runtime
+        const loadView = async (viewModule: any, runtimeModule: any) => {
+            const viewJson = JSON.parse(viewModule.default);
+            const runtime = Object.values(runtimeModule)[0] as Runtime;
+
+            const urlParams = new URLSearchParams(window.location.search);
+            renderTableView(rootEl, {
+                graphqlHost: import.meta.env.VITE_GRAPHQL_HOST,
+                graphqlToken: import.meta.env.VITE_GRAPHQL_TOKEN,
+                geminiApiKey: import.meta.env.VITE_GEMINI_API_KEY,
+                viewsJson: JSON.stringify([viewJson]),
+                showViewsMenu: false,
+                externalRuntime: runtime,
+                syncFilterStateToUrl: urlParams.get('sync-filter-state-to-url') === 'true'
+            });
+        };
+
+        (async () => {
+            const urlParams = new URLSearchParams(window.location.search);
+            const testView = urlParams.get('test-view');
+
+            switch (testView) {
+                case 'payment-requests':
+                    await loadView(
+                        await import('./views/payment-requests/view.json?raw'),
+                        await import('./views/payment-requests/runtime')
+                    );
+                    break;
+                case 'request-log':
+                    await loadView(
+                        await import('./views/request-log/view.json?raw'),
+                        await import('./views/request-log/runtime')
+                    );
+                    break;
+                case 'simple-test-view':
+                    await loadView(
+                        await import('./views/simple-test-view/view.json?raw'),
+                        await import('./views/simple-test-view/runtime')
+                    );
+                    break;
+                default:
+                    await loadView(
+                        await import('./views/payment-requests/view.json?raw'),
+                        await import('./views/payment-requests/runtime')
+                    );
+                    break;
+            }
+        })();
+    }
+}

package/src/views/index.ts

@@ -0,0 +1,12 @@
+// New organized view exports
+export { simpleTestViewRuntime } from "./simple-test-view";
+export type { SimpleTestData } from "./simple-test-view";
+export { requestLogViewRuntime } from "./request-log";
+
+// View JSON imports - use specific names to avoid conflicts
+export { default as simpleTestViewJson } from "./simple-test-view/view.json";
+export { default as requestLogViewJson } from "./request-log/view.json";
+export { default as paymentRequestsViewJson } from "./payment-requests/view.json";
+
+// Payment requests exports (contains PaymentMethod and NoRowsExtendDateRange)
+export { paymentRequestsRuntime } from "./payment-requests";

package/src/views/payment-requests/components/NoRowsExtendDateRange.tsx

@@ -0,0 +1,37 @@
+import { FlexColumn } from "../../../framework/cell-renderer-components/LayoutHelpers";
+import { Button } from "primereact/button";
+import { NoRowsComponentProps } from "../../../framework/view";
+import { FilterFormState } from "../../../framework/filter-form-state";
+
+const NoRowsExtendDateRange = ({ updateFilterById, applyFilters }: Pick<NoRowsComponentProps, 'updateFilterById' | 'applyFilters'>) => {
+    const handleExtend = () => {
+        // Update the first child (the lower end of the date range)
+        updateFilterById('date-range', (currentFilter: FilterFormState) => {
+            if (currentFilter.type === 'and' && currentFilter.children.length > 0) {
+                const firstChild = currentFilter.children[0];
+                if (firstChild.type === 'leaf') {
+                    const current = new Date(firstChild.value);
+                    current.setMonth(current.getMonth() - 1);
+
+                    return {
+                        ...currentFilter,
+                        children: [
+                            { ...firstChild, value: current },
+                            ...currentFilter.children.slice(1)
+                        ]
+                    };
+                }
+            }
+            return currentFilter; // No change if not the expected structure
+        });
+        applyFilters();
+    };
+    return (
+        <FlexColumn align="center" justify="center" className="tw:py-8 tw:text-gray-400">
+            <span>No data rows match the current filter.</span>
+            <Button label="Extend the date range back by 1 month" onClick={handleExtend} size="small" />
+        </FlexColumn>
+    );
+};
+
+export default NoRowsExtendDateRange;

package/src/views/payment-requests/components/PaymentMethod.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+import { FlexRow } from "../../../framework/cell-renderer-components/LayoutHelpers";
+
+type PaymentMethodEnum =
+    | "SWISH"
+    | "MOBILEPAY"
+    | "VIPPS"
+    | "PAYPAL"
+    | "CREDIT_CARD"
+    | "P24"
+    | "DIRECT_DEBIT"
+    | "POINTSPAY"
+    | "BANK_TRANSFER"
+    | string;
+
+
+interface Props {
+    cardType: string[]
+    paymentMethod?: PaymentMethodEnum;
+    darkmode: boolean;
+}
+
+const bankTransferLogo = (darkmode: boolean) =>
+    `https://staging.kronor.io/portal/static/assets/img/logos/${darkmode ? "light-" : ""}bank-transfer-donated-by-axel.svg`;
+
+const cardImage = (scheme: string) => {
+    switch (scheme.toLowerCase()) {
+        case "visa":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/Visa_Brandmark_Blue_RGB_2021.svg" width="65px" alt="Visa" title="Visa" />
+                    Visa
+                </>
+            );
+        case "mc":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/mc_symbol.svg" width="55px" alt="Mastercard" title="Mastercard" />
+                    Mastercard
+                </>
+            );
+        case "dankort":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/DK_Logo_CMYK.png" width="55px" alt="Dankort" title="Dankort" />
+                    Dankort
+                </>
+            );
+        case "visa_dk":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/DK_Logo_CMYK.png" width="55px" alt="Visa Dankort" title="Visa Dankort" />
+                    Visa&nbsp;Dankort
+                </>
+            );
+        case "visa_elec":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/vbm_elec_pos_blu_2021.png" width="45px" alt="Visa Electron" title="Visa Electron" />
+                    Visa&nbsp;Electron
+                </>
+            );
+        case "amex":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/amex_80x80.svg" width="55px" alt="American Express" title="American Express" />
+                    American&nbsp;Express
+                </>
+            );
+        case "maestro":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/maestro.svg" width="55px" alt="Maestro" title="Maestro" />
+                    Maestro
+                </>
+            );
+        case "jcb":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/jcb_67x86.gif" width="55px" alt="JCB" title="JCB" />
+                    JCB
+                </>
+            );
+        case "discover":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/discover.png" width="55px" alt="Discover" title="Discover" />
+                    Discover
+                </>
+            );
+        case "ffk":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/ffk.svg" width="55px" alt="Forbrugsforeningen" title="Forbrugsforeningen" />
+                    Forbrugsforeningen
+                </>
+            );
+        case "diners":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/diners_logo_stacked_dark.svg" width="55px" alt="Diners Club" title="Diners Club" />
+                    Diners&nbsp;Club
+                </>
+            );
+        case "china_union_pay":
+            return (
+                <>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/china_union_pay.png" width="55px" alt="China Union Pay" title="China Union Pay" />
+                    China&nbsp;Union&nbsp;Pay
+                </>
+            );
+        default:
+            return <>CREDIT CARD</>;
+    }
+};
+
+export const PaymentMethod: React.FC<Props> = ({ cardType, paymentMethod, darkmode }) => {
+    switch (paymentMethod) {
+        case "SWISH":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/swish.png" width="32px" alt="Swish" title="Swish" />
+                    Swish
+                </FlexRow>
+            );
+        case "MOBILEPAY":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/mobilepay.png" width="32px" alt="MobilePay" title="MobilePay" />
+                    MobilePay
+                </FlexRow>
+            );
+        case "VIPPS":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/vipps.svg" width="32px" alt="Vipps" title="Vipps" />
+                    Vipps
+                </FlexRow>
+            );
+        case "PAYPAL":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/paypal.png" width="24px" alt="PayPal" title="PayPal" />
+                    PayPal
+                </FlexRow>
+            );
+        case "CREDIT_CARD":
+            if (cardType.length === 0) {
+                return <FlexRow align="center" justify="center" wrap='wrap'>CREDIT CARD</FlexRow>;
+            }
+            return <FlexRow align="center" justify="center" wrap='wrap'>{cardImage(cardType[0])}</FlexRow>;
+
+        case "P24":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/Przelewy24_logo.svg" width="32px" alt="Przelewy24" title="Przelewy24" />
+                    P24
+                </FlexRow>
+            );
+        case "DIRECT_DEBIT":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src={bankTransferLogo(darkmode)} width="32px" alt="Direct Debit" title="Direct Debit" />
+                    Direct Debit
+                </FlexRow>
+            );
+        case "BANK_TRANSFER":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src={bankTransferLogo(darkmode)} width="32px" alt="Bank Transfer" title="Bank Transfer" />
+                    Bank Transfer
+                </FlexRow>
+            );
+        case "POINTSPAY":
+            return (
+                <FlexRow align="center" justify="center" wrap='wrap'>
+                    <img src="https://staging.kronor.io/portal/static/assets/img/logos/pointspay_logo.png" width="32px" alt="Pointspay" data-toggle="tooltip" data-placement="bottom" title="Pointspay" />
+                    Pointspay
+                </FlexRow>
+            );
+        default:
+            return <>UNKNOWN</>;
+    }
+};

package/src/views/payment-requests/components/PaymentStatusTag.tsx

@@ -0,0 +1,61 @@
+import { Tag } from 'primereact/tag';
+import React from 'react';
+import { FlexRow } from '../../../framework/cell-renderer-components/LayoutHelpers';
+
+const paymentStatusEnumToText = (status: string): string => {
+    switch (status) {
+        case 'CANCELLED': return 'Cancelled';
+        case 'PAID': return 'Paid';
+        case 'ERROR': return 'Error';
+        case 'DECLINED': return 'Declined';
+        case 'PRE_FLIGHT_CHECK': return 'Preflight Check';
+        case 'INITIALIZING': return 'Initializing';
+        case 'WAITING_FOR_PAYMENT': return 'Waiting';
+        case 'WAITING_FOR_PROMOTION': return 'Promoting';
+        case 'CANCELLING': return 'Cancelling';
+        case 'FLOW_COMPLETED': return 'Flow Completed';
+        case 'AUTHORIZED': return 'Authorized';
+        case 'PARTIALLY_CAPTURED': return 'Partially Captured';
+        case 'CAPTURE_DECLINED': return 'Capture Declined';
+        case 'RELEASED': return 'Payment Released';
+        default: return status;
+    }
+};
+
+type PaymentStatusSeverity = 'success' | 'warning' | 'danger' | 'secondary' | 'info' | 'contrast' | undefined | null;
+
+const badgeForPaymentStatus = (status: string): PaymentStatusSeverity | 'primary' => {
+    switch (status) {
+        case 'PAID':
+        case 'FLOW_COMPLETED':
+        case 'AUTHORIZED':
+        case 'PARTIALLY_CAPTURED':
+            return 'success';
+        case 'CANCELLED':
+        case 'CANCELLING':
+        case 'RELEASED':
+            return 'warning';
+        case 'ERROR':
+        case 'DECLINED':
+        case 'CAPTURE_DECLINED':
+            return 'danger';
+        case 'PRE_FLIGHT_CHECK':
+        case 'INITIALIZING':
+        case 'WAITING_FOR_PAYMENT':
+        case 'WAITING_FOR_PROMOTION':
+            return 'primary';
+        default:
+            return 'secondary';
+    }
+};
+
+export const PaymentStatusTag: React.FC<{ status: string }> = ({ status }) => {
+    const severity = badgeForPaymentStatus(status);
+    // 'primary' is not a valid severity for Tag, fallback to 'info'
+    const validSeverity: PaymentStatusSeverity = severity === 'primary' ? 'info' : severity;
+    return (
+        <FlexRow align="center" justify="center">
+            <Tag value={paymentStatusEnumToText(status)} severity={validSeverity} style={{ fontSize: '.8rem', padding: '0.3em 1em' }} />
+        </FlexRow>
+    )
+};

package/src/views/payment-requests/index.ts

@@ -0,0 +1 @@
+export { paymentRequestsRuntime } from "./runtime";

package/src/views/payment-requests/runtime.tsx

@@ -0,0 +1,145 @@
+import { CellRenderer } from "../../framework/column-definition";
+import { PaymentMethod } from "./components/PaymentMethod";
+import { PaymentStatusTag } from './components/PaymentStatusTag';
+import { Runtime } from "../../framework/runtime";
+
+// Static runtime configuration for payment requests view
+export type PaymentRequestsRuntime = Runtime & {
+    cellRenderers: {
+        transaction: CellRenderer;
+        merchant: CellRenderer;
+        placedAt: CellRenderer;
+        paymentProvider: CellRenderer;
+        initiatedBy: CellRenderer;
+        status: CellRenderer;
+        amount: CellRenderer;
+    };
+    queryTransforms: {
+        reference: {
+            toQuery: (input: any) => any;
+        };
+        amount: {
+            toQuery: (input: any) => any;
+        };
+        creditCardNumber: {
+            toQuery: (input: any) => any;
+        };
+    };
+    initialValues: {
+        dateRangeStart: Date;
+        dateRangeEnd: Date;
+    };
+};
+
+// Static object of cell renderers for payment requests
+export const paymentRequestsRuntime: PaymentRequestsRuntime = {
+    cellRenderers: {
+        // Transaction cell renderer
+        transaction: ({ data: { transactionId, waitToken } }) => {
+            const url = `/portal/payment-requests/${waitToken}`;
+            return <a className="tw:underline" href={url}>{transactionId}</a>;
+        },
+
+        // Merchant cell renderer
+        merchant: ({ data: { merchantId }, components: { Mapping } }) =>
+            <Mapping value={merchantId} map={{ 1: 'Boozt', 2: 'Boozt Dev' }} />,
+
+        // Placed At cell renderer
+        placedAt: ({ data: { createdAt }, components: { DateTime } }) =>
+            <DateTime date={createdAt} options={{ dateStyle: "long", timeStyle: "medium" }} />,
+
+        // Payment Provider cell renderer
+        paymentProvider: ({ data }) =>
+            <PaymentMethod paymentMethod={data.paymentProvider} cardType={data['attempts.cardType']} darkmode={false} />,
+
+        // Initiated By cell renderer
+        initiatedBy: ({ data, updateFilterById, applyFilters, components: { FlexColumn, FlexRow } }) => {
+            const handleEmailClick = () => {
+                // 'customer-email' is the filter id defined in view.json
+                updateFilterById('customer-email', (currentFilter: any) => {
+                    return {
+                        ...currentFilter,
+                        value: { operator: '_eq', value: data['customer.email'] }
+                    };
+                });
+                applyFilters();
+            };
+
+            return (
+                <FlexRow align="center" justify="start">
+                    <FlexColumn align="start">
+                        <span className="tw:font-bold">{data['customer.name']}</span>
+                        <button
+                            className="tw:text-blue-500 tw:underline hover:tw:text-blue-700 tw:cursor-pointer tw:text-left"
+                            onClick={handleEmailClick}
+                            title={`Filter by email: ${data['customer.email']}`}
+                        >
+                            {data['customer.email']}
+                        </button>
+                    </FlexColumn>
+                </FlexRow>
+            );
+        },
+
+        // Status cell renderer
+        status: ({ data }) => <PaymentStatusTag status={data.currentStatus} />,
+
+        // Amount cell renderer
+        amount: ({ data: { currency, amount }, components: { CurrencyAmount, FlexRow }, currency: { minorToMajor } }) =>
+            <FlexRow align="center" justify="end">
+                <CurrencyAmount amount={minorToMajor(Number(amount), currency)} currency={currency} />
+            </FlexRow>
+    },
+
+    // Transform functions for filter values
+    queryTransforms: {
+        // Transform for Reference filter (starts with functionality)
+        reference: {
+            toQuery: (input: any) => {
+                if (input.operator === '_like' && input.value) {
+                    return { value: { value: `${input.value}%` } };
+                }
+                return { value: input };
+            }
+        },
+
+        // Transform for Amount filter (convert between display and storage format)
+        amount: {
+            toQuery: (input: any) => {
+                if (input) {
+                    return { value: input * 100 };
+                }
+                return { value: input };
+            }
+        },
+
+        // Transform for Credit Card Number filter (add wildcards)
+        creditCardNumber: {
+            toQuery: (input: any) => {
+                if (input) {
+                    return { value: `%${input}%` };
+                }
+                return { value: input };
+            }
+        }
+    },
+
+    noRowsComponents: {},
+
+    customFilterComponents: {},
+
+    // Initial values for filters
+    initialValues: {
+        // Date range: one month back from current date
+        dateRangeStart: (() => {
+            const date = new Date();
+            date.setMonth(date.getMonth() - 1);
+            return date; // Return Date object for calendar component
+        })(),
+
+        dateRangeEnd: (() => {
+            const date = new Date();
+            return date; // Return Date object for calendar component
+        })()
+    }
+};