Initialize vue project + Reports Overview component

adyen-platform-experience-web-vue/.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+node_modules
+.DS_Store
+dist
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Schema generation secrets
+scripts/generate-ts-schemas/variables
+
+# Vitest
+__screenshots__/

adyen-platform-experience-web-vue/.i18nrc

@@ -0,0 +1,18 @@
+{
+  "translationSourcePaths": [
+    "src/assets/translations/en-US.json"
+  ],
+  "locales": [
+    "da-DK",
+    "de-DE",
+    "es-ES",
+    "fi-FI",
+    "fr-FR",
+    "it-IT",
+    "nl-NL",
+    "no-NO",
+    "pt-BR",
+    "sv-SE"
+  ],
+  "placeholderFormat": "YAML"
+}

adyen-platform-experience-web-vue/.storybook/dev.js

@@ -0,0 +1,33 @@
+import { spawnSync } from 'child_process';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { existsSync, readFileSync } from 'fs';
+import dotenv from 'dotenv';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const rootDir = resolve(__dirname, '..');
+const monorepoRoot = resolve(rootDir, '..');
+
+// Load .env from this project's envs/ or fall back to monorepo envs/env.default
+const envPath = existsSync(resolve(rootDir, 'envs/.env'))
+    ? resolve(rootDir, 'envs/.env')
+    : existsSync(resolve(monorepoRoot, 'envs/.env'))
+      ? resolve(monorepoRoot, 'envs/.env')
+      : resolve(monorepoRoot, 'envs/env.default');
+
+const envContent = readFileSync(envPath, 'utf8');
+const parsed = dotenv.parse(envContent);
+const port = process.env.PLAYGROUND_PORT || parsed.PLAYGROUND_PORT || '6007';
+
+const result = spawnSync('npx', ['storybook', 'dev', '-p', port, '--no-open'], {
+    cwd: rootDir,
+    stdio: 'inherit',
+    shell: true,
+    env: {
+        ...process.env,
+        STORYBOOK: 'true',
+        STORYBOOK_PORT: port,
+    },
+});
+
+process.exit(result.status);

adyen-platform-experience-web-vue/.storybook/main.ts

@@ -0,0 +1,67 @@
+import { StorybookConfig } from '@storybook/vue3-vite';
+import { fileURLToPath, URL } from 'node:url';
+import { getEnvironment } from '../envs/getEnvs.ts';
+import { realApiProxies } from '../../endpoints/realApiProxies';
+
+const config: StorybookConfig = {
+    stories: ['../stories/**/*.stories.*'],
+    staticDirs: ['../../static'],
+    framework: {
+        name: '@storybook/vue3-vite',
+        options: {},
+    },
+    async viteFinal(config) {
+        const mode = process.env.VITE_MODE ?? 'development';
+        const { api, app } = getEnvironment(mode);
+
+        const removeInspect = (plugins: any[]): any[] =>
+            plugins.flat(Infinity).filter((p: any) => !(p && typeof p === 'object' && p.name === 'vite-plugin-inspect'));
+        config.plugins = removeInspect(config.plugins ?? []);
+
+        config.resolve = {
+            ...config.resolve,
+            alias: {
+                ...(config.resolve?.alias as Record<string, string>),
+                '@': fileURLToPath(new URL('../src', import.meta.url)),
+            },
+        };
+
+        config.server = {
+            ...config.server,
+            proxy: { ...config.server?.proxy, ...realApiProxies(api, mode) },
+        };
+
+        config.define = {
+            ...config.define,
+            'process.env.VITE_APP_PORT': JSON.stringify(app.port || null),
+            'process.env.VITE_APP_URL': JSON.stringify(app.url || null),
+            'process.env.VITE_APP_LOADING_CONTEXT': JSON.stringify(app.loadingContext || null),
+            'process.env.VITE_LOCAL_ASSETS': JSON.stringify(process.env.USE_CDN === 'true' ? null : true),
+            'process.env.VITE_VERSION': JSON.stringify('1.0.0'),
+            'process.env.SESSION_ACCOUNT_HOLDER': JSON.stringify(api.session.accountHolder || null),
+            'process.env.SESSION_AUTO_REFRESH': JSON.stringify(api.session.autoRefresh === 'true' || null),
+            'process.env.SESSION_MAX_AGE_MS': JSON.stringify(api.session.maxAgeMs || null),
+            'process.env.SESSION_PERMISSIONS': JSON.stringify(api.session.permissions || null),
+            'process.env.USE_CDN': JSON.stringify(app.useCdn ?? null),
+            'process.env.VITE_TEST_CDN_ASSETS': JSON.stringify(app.useTestCdn ? true : null),
+            'process.env.NODE_ENV': JSON.stringify(mode),
+        };
+
+        config.build = {
+            ...config.build,
+            target: 'esnext',
+            chunkSizeWarningLimit: 800,
+            rollupOptions: {
+                ...config.build?.rollupOptions,
+                output: {
+                    ...(config.build?.rollupOptions?.output as object),
+                    experimentalMinChunkSize: 10_000,
+                },
+            },
+        };
+
+        return config;
+    },
+};
+
+export default config;

adyen-platform-experience-web-vue/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from 'storybook/manager-api';
+
+addons.setConfig({
+    isFullscreen: false,
+    showPanel: true,
+    panelPosition: 'bottom',
+});

adyen-platform-experience-web-vue/.storybook/preview.ts

@@ -0,0 +1,67 @@
+import type { Preview } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
+import { createI18n } from 'vue-i18n';
+import BentoPlugin from '@adyen/bento-vue3';
+import '@adyen/bento-vue3/fonts.css';
+import '@adyen/bento-vue3/styles/bento-light';
+import '../stories/utils/styles.scss';
+import { initialize, mswLoader, getWorker } from 'msw-storybook-addon';
+import { getMockHandlers } from '../mocks/mock-server/utils/utils';
+import { mocks } from '../mocks/mock-server';
+
+initialize({ onUnhandledRequest: 'bypass' }, [...getMockHandlers(mocks)]);
+
+const i18n = createI18n({
+    locale: 'en-US',
+    fallbackLocale: 'en-US',
+    fallbackRoot: false,
+    allowComposition: true,
+    legacy: false,
+});
+
+setup(app => {
+    app.use(i18n);
+    app.use(BentoPlugin, { withToast: true, withDesignTokensCSSInjection: false });
+});
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            hideNoControlsWarning: true,
+        },
+    },
+    argTypes: {
+        mockedApi: {
+            table: {
+                disable: true,
+            },
+        },
+        locale: {
+            control: 'select',
+            options: ['da-DK', 'de-DE', 'en-US', 'es-ES', 'fi-FI', 'fr-FR', 'it-IT', 'nl-NL', 'no-NO', 'pt-BR', 'sv-SE'],
+        },
+    },
+    args: {
+        locale: 'pt-BR',
+    },
+    loaders: [
+        async context => {
+            // Sync vue-i18n global locale so Bento components render in the correct locale
+            if (context.args.locale && i18n.global.locale) {
+                i18n.global.locale.value = context.args.locale;
+            }
+
+            const worker = getWorker();
+            if (context.args.mockedApi) {
+                await worker.start({ quiet: true, onUnhandledRequest: 'bypass' });
+            } else {
+                worker.stop();
+            }
+
+            return { worker };
+        },
+        mswLoader,
+    ],
+};
+
+export default preview;

adyen-platform-experience-web-vue/.storybook/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true
+    },
+    "include": ["./**/*.ts", "../stories/**/*.ts", "../stories/**/*.vue", "../src/**/*.ts", "../src/**/*.vue"]
+}

adyen-platform-experience-web-vue/endpoints/endpoints.ts

@@ -0,0 +1,54 @@
+const baseUrl = 'https://platform-components-external-test.adyen.com/platform-components-external/api/v([0-9]+)';
+const datasetBaseUrl = '/datasets';
+
+export const endpoints = () =>
+    ({
+        balanceAccounts: `${baseUrl}/balanceAccounts`,
+        balances: `${baseUrl}/balanceAccounts/:id/balances`,
+        payouts: `${baseUrl}/payouts`,
+        payout: `${baseUrl}/payouts/breakdown`,
+        transactions: `${baseUrl}/transactions`,
+        transaction: `${baseUrl}/transactions/:id`,
+        initiateRefund: `${baseUrl}/transactions/:id/refund`,
+        transactionsTotals: `${baseUrl}/transactions/totals`,
+        downloadTransactions: `${baseUrl}/transactions/download`,
+        sessions: '/api/authe/api/v1/sessions',
+        setup: `${baseUrl}/setup`,
+        sendEngageEvent: `${baseUrl}/uxdsclient/engage`,
+        sendTrackEvent: `${baseUrl}/uxdsclient/track`,
+        reports: `${baseUrl}/reports`,
+        downloadReport: `${baseUrl}/reports/download`,
+        stores: `${baseUrl}/stores`,
+        capital: {
+            anaCredit: `${baseUrl}/capital/grants/missingActions/anaCredit`,
+            createOffer: `${baseUrl}/capital/grantOffers/create`,
+            dynamicOfferConfig: `${baseUrl}/capital/grantOffers/dynamic/configuration`,
+            dynamicOffer: `${baseUrl}/capital/grantOffers/dynamic`,
+            grants: `${baseUrl}/capital/grants`,
+            requestFunds: `${baseUrl}/capital/grants/:id`,
+            signToS: `${baseUrl}/capital/grants/missingActions/signToS`,
+        },
+        disputes: {
+            accept: `${baseUrl}/disputes/:id/accept`,
+            defend: `${baseUrl}/disputes/:id/defend`,
+            details: `${baseUrl}/disputes/:id`,
+            documents: `${baseUrl}/disputes/:id/documents`,
+            download: `${baseUrl}/disputes/:id/documents/download`,
+            list: `${baseUrl}/disputes`,
+        },
+        payByLink: {
+            configuration: `${baseUrl}/paybylink/paymentLinks/:storeId/configuration`,
+            countries: `${baseUrl}/paybylink/countries`,
+            currencies: `${baseUrl}/paybylink/currencies`,
+            details: `${baseUrl}/paybylink/paymentLinks/:id`,
+            expire: `${baseUrl}/paybylink/paymentLinks/:id/expire`,
+            filters: `${baseUrl}/paybylink/filters`,
+            installments: `${baseUrl}/paybylink/installments`,
+            list: `${baseUrl}/paybylink/paymentLinks`,
+            settings: `${baseUrl}/paybylink/settings/:storeId`,
+            themes: `${baseUrl}/paybylink/themes/:id`,
+        },
+        datasets: {
+            countries: `${datasetBaseUrl}/countries/:locale.json?import`,
+        },
+    }) as const;

adyen-platform-experience-web-vue/envs/getEnvs.ts

@@ -0,0 +1,44 @@
+import { dirname, resolve } from 'path';
+import { loadEnv } from 'vite';
+import { fileURLToPath } from 'url';
+
+const filename = fileURLToPath(import.meta.url);
+
+// Point to project root (parent of envs/ directory)
+const envDir = resolve(dirname(filename), '..');
+
+const parseEnv = (env: Record<string, string | undefined>) => {
+    // Interpolate shell-style variables like $PLAYGROUND_HOST:$PLAYGROUND_PORT
+    const interpolate = (value: string | undefined): string | undefined => {
+        if (!value) return value;
+        return value.replace(/\$PLAYGROUND_HOST/g, env.PLAYGROUND_HOST ?? 'localhost').replace(/\$PLAYGROUND_PORT/g, env.PLAYGROUND_PORT ?? '5173');
+    };
+
+    return {
+        api: {
+            session: {
+                accountHolder: env.SESSION_ACCOUNT_HOLDER,
+                apiKey: env.API_KEY,
+                autoRefresh: env.SESSION_AUTO_REFRESH,
+                maxAgeMs: env.SESSION_MAX_AGE_MS,
+                permissions: env.SESSION_PERMISSIONS,
+                url: env.SESSION_API_URL ?? '',
+            },
+        },
+        app: {
+            host: env.PLAYGROUND_HOST ?? 'localhost',
+            port: parseInt(env.PLAYGROUND_PORT ?? '5173'),
+            loadingContext: env.LOADING_CONTEXT,
+            url: interpolate(env.PLAYGROUND_URL) ?? `http://${env.PLAYGROUND_HOST ?? 'localhost'}:${env.PLAYGROUND_PORT ?? '5173'}/`,
+            useCdn: env.USE_CDN,
+            useTestCdn: env.USE_TEST_CDN,
+        },
+    };
+};
+
+export type Environment = ReturnType<typeof parseEnv>;
+
+export const getEnvironment = (mode: string): Environment => {
+    const envVars = { ...process.env, ...loadEnv(mode, envDir, '') };
+    return parseEnv(envVars);
+};

adyen-platform-experience-web-vue/jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "exclude": ["node_modules", "dist"]
+}

adyen-platform-experience-web-vue/mocks/mock-data/balanceAccounts.ts

@@ -0,0 +1,21 @@
+import type { IBalanceAccountBase } from '../../src/types';
+
+export const BALANCE_ACCOUNTS: readonly IBalanceAccountBase[] = [
+    {
+        description: 'John Doe - Main Account',
+        id: 'BA32272223222B5CTDQPM6W2H',
+        timeZone: 'America/Sao_Paulo',
+        defaultCurrencyCode: 'USD',
+    },
+    {
+        description: 'Jane Smith - Secondary Account',
+        id: 'BA32272223222B5CTDQPM6W2G',
+        timeZone: 'America/Sao_Paulo',
+        defaultCurrencyCode: 'EUR',
+    },
+    {
+        id: 'BA32272223222B5CTDQPM6W2K',
+        timeZone: 'America/Sao_Paulo',
+        defaultCurrencyCode: 'USD',
+    },
+] as const;

adyen-platform-experience-web-vue/mocks/mock-data/reports.ts

@@ -0,0 +1,18 @@
+import type { IReport } from '../../src/types';
+
+// Generate report dates dynamically so they always fall within the component's default filter range
+function generateReportDates(count: number): IReport[] {
+    const now = Date.now();
+    const dayMs = 24 * 60 * 60 * 1000;
+    return Array.from({ length: count }, (_, i) => ({
+        createdAt: new Date(now - (i + 1) * dayMs + Math.random() * dayMs * 0.8).toISOString(),
+        type: 'payout' as const,
+    }));
+}
+
+export const REPORTS: { [balanceAccountId: string]: IReport[] } = {
+    BA32272223222B5CTDQPM6W2H: generateReportDates(50),
+    BA32272223222B5CTDQPM6W2G: generateReportDates(50),
+};
+
+export const getReports = (balanceAccountId: string) => REPORTS?.[balanceAccountId] ?? [];