[BANK-5350] Upgrade Nuxt and Node for Sample App

.eslintrc.js

@@ -3,12 +3,13 @@ module.exports = {
   env: {
     browser: true,
     node: true,
+    jest: true,
   },
   extends: [
     'prettier',
     'plugin:vue/recommended',
     'plugin:prettier/recommended',
-    '@nuxtjs/eslint-config-typescript',
+    '@nuxt/eslint-config',
   ],
   parserOptions: {
     parser: '@typescript-eslint/parser',

.github/workflows/pipeline.yaml

@@ -11,27 +11,24 @@ jobs:
       - name: Check out repository code
         uses: actions/checkout@v3
 
-      - name: Install Node 16.x
+      - name: Install Node 22.x
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 22.18.0
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 
       - name: Run Lint
         run: yarn lint
 
-      - name: Run Test
-        run: yarn test
-
       - name: Run Build
         run: yarn build
 
   scan:
     needs: test
     if: github.event_name == 'pull_request'
-    uses: circlefin/circle-public-github-workflows/.github/workflows/pr-scan.yaml@v1
+    uses: circlefin/circle-public-github-workflows/.github/workflows/pr-scan.yaml@fix-pr-scan
 
   release-sbom:
     needs: test

.licenseignore

@@ -1 +1,18 @@
 pkg:npm/elliptic@6.6.1
+pkg:npm/@bufbuild/protobuf@2.7.0
+pkg:npm/@pkgjs/parseargs@0.11.0
+pkg:npm/abbrev@3.0.1
+pkg:npm/confbox@0.1.8
+pkg:npm/confbox@0.2.2
+pkg:npm/giget@2.0.0
+pkg:npm/postcss-reduce-initial@7.0.4
+pkg:npm/postcss-values-parser@6.0.2
+pkg:npm/rollup@4.48.1
+pkg:npm/sass@1.91.0
+pkg:npm/sax@1.4.1
+pkg:npm/type-fest@4.41.0
+pkg:npm/uglify-js@3.19.3
+pkg:npm/unenv@2.0.0-rc.19
+pkg:npm/vite@5.4.19
+pkg:npm/vite@7.1.3
+pkg:npm/vitest@1.6.1

.nvmrc

@@ -1 +1 @@
-16.13.0
+22.18.0

README.md

@@ -36,10 +36,6 @@ After you [generate an API key for the sandbox environment](https://developers.c
 
 You are now ready to use the sample app and test some payments flows. In a production environment these payments would settle in the [USDC stablecoin](https://www.circle.com/en/usdc).
 
-## Test Card Numbers
-
-To automatically trigger certain responses from the Circle Payments API, you can use some pre-defined [test card numbers](https://developers.circle.com/docs/test-card-numbers) that exercise specific behaviors.
-
 ## Change API base url
 
 By default the API base url will be set to https://api-sandbox.circle.com.

assets/css/main.css

@@ -0,0 +1,89 @@
+/* Main CSS file for Circle Sample App */
+
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+/* Layout styles */
+.v-application {
+  font-family: 'Roboto', sans-serif !important;
+}
+
+/* Navigation styles */
+.v-navigation-drawer {
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+/* Card and content styles */
+.v-card {
+  border-radius: 8px;
+}
+
+/* Form styles */
+.v-text-field {
+  margin-bottom: 16px;
+}
+
+/* Button styles */
+.v-btn {
+  text-transform: none;
+}
+
+/* Utility classes */
+.text-center {
+  text-align: center;
+}
+
+.mt-4 {
+  margin-top: 16px;
+}
+
+.mb-4 {
+  margin-bottom: 16px;
+}
+
+.pa-4 {
+  padding: 16px;
+}
+
+/* Custom application styles */
+.headline {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+}
+
+.subtitle-2 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.375rem;
+}
+
+/* Error and success states */
+.error-text {
+  color: #f44336;
+}
+
+.success-text {
+  color: #4caf50;
+}
+
+/* Loading states */
+.loading-overlay {
+  position: relative;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .v-navigation-drawer {
+    position: fixed !important;
+  }
+}

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+}

components/AmountInput.vue

@@ -2,68 +2,78 @@
   <v-text-field
     v-model="amountFormatted"
     :rules="rules"
-    :label="label"
-    :prefix="prefix"
-    :disabled="disabled"
+    :label="props.label"
+    :prefix="props.prefix"
+    :disabled="props.disabled"
   />
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Watch } from 'nuxt-property-decorator'
+<script setup lang="ts">
+interface Props {
+  prefix?: string
+  label?: string
+  modelValue?: string
+  disabled?: boolean
+}
 
-@Component({})
-export default class AmountInput extends Vue {
-  @Prop({ type: String, default: '$' }) prefix!: string
-  @Prop({ type: String, default: '' }) label!: string
-  @Prop({ type: String, default: '' }) value!: string
-  @Prop({ type: Boolean, default: false }) disabled!: boolean
+const props = withDefaults(defineProps<Props>(), {
+  prefix: '$',
+  label: '',
+  modelValue: '',
+  disabled: false,
+})
 
-  amountFormatted: string = '0.00'
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
 
-  ruleFunctions = {
-    positive: (v: string) => {
-      return parseFloat(v) > 0 || 'Please enter a positive amount'
-    },
-    isCurrency: (v: string) => {
-      const amount = v.trim()
-      return (
-        /^[0-9]+(.[0-9]{1,2})?$/.test(amount) || 'Please enter valid amount'
-      )
-    },
-    isNumber: (v: string) => {
-      return !isNaN(parseInt(v)) || 'Please enter valid amount'
-    },
-    isRequired: (v: string) => {
-      return v.trim() !== '' || 'Please enter an amount'
-    },
-  }
+const amountFormatted = ref('0.00')
 
-  get rules() {
-    return [
-      this.ruleFunctions.isRequired,
-      this.ruleFunctions.isNumber,
-      this.ruleFunctions.isCurrency,
-      this.ruleFunctions.positive,
-    ]
-  }
+const ruleFunctions = {
+  positive: (v: string) => {
+    return parseFloat(v) > 0 || 'Please enter a positive amount'
+  },
+  isCurrency: (v: string) => {
+    const amount = v.trim()
+    return /^[0-9]+(.[0-9]{1,2})?$/.test(amount) || 'Please enter valid amount'
+  },
+  isNumber: (v: string) => {
+    return !isNaN(parseInt(v)) || 'Please enter valid amount'
+  },
+  isRequired: (v: string) => {
+    return v.trim() !== '' || 'Please enter an amount'
+  },
+}
 
-  @Watch('amountFormatted', { immediate: true })
-  amountFormattedChange(value: string) {
-    this.amountFormatted = this.format(value)
-    this.$emit('input', this.amountFormatted)
-  }
+const rules = computed(() => [
+  ruleFunctions.isRequired,
+  ruleFunctions.isNumber,
+  ruleFunctions.isCurrency,
+  ruleFunctions.positive,
+])
 
-  @Watch('value', { immediate: true })
-  valueChange(value: string) {
-    this.amountFormatted = this.format(value)
+const format = (value: string) => {
+  if (!value) {
+    return ''
   }
+  return value
+}
 
-  format(value: string) {
-    if (!value) {
-      return ''
-    }
+watch(
+  amountFormatted,
+  (value: string) => {
+    const formatted = format(value)
+    amountFormatted.value = formatted
+    emit('update:modelValue', formatted)
+  },
+  { immediate: true },
+)
 
-    return value
-  }
-}
+watch(
+  () => props.modelValue,
+  (value: string) => {
+    amountFormatted.value = format(value)
+  },
+  { immediate: true },
+)
 </script>