From 34793f3d219efeb362bfee84625a92b1592312bd Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 12 Mar 2025 16:11:53 +0400 Subject: [PATCH] fix: small progress on stripe input --- package.json | 4 ++-- pnpm-lock.yaml | 28 ++++++++++++++-------------- src/lib/stores/stripe.ts | 26 ++++++++++++++++++-------- 3 files changed, 34 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index d755d2991..6da29150d 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,9 @@ "dependencies": { "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@640f09c", "@appwrite.io/pink-icons": "0.25.0", - "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba5", + "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b", "@appwrite.io/pink-legacy": "^1.0.2", - "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b4c09ba5", + "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bcb8ad2b", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c700db0b3..df3f9d160 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,14 +15,14 @@ importers: specifier: 0.25.0 version: 0.25.0 '@appwrite.io/pink-icons-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba5 - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba5(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b(svelte@4.2.19) '@appwrite.io/pink-legacy': specifier: ^1.0.2 version: 1.0.2 '@appwrite.io/pink-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b4c09ba5 - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b4c09ba5(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bcb8ad2b + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bcb8ad2b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -215,14 +215,14 @@ packages: resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@640f09c} version: 1.2.1 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba5': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba5} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba59191359b26ade77bf840c18994bbb991': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba59191359b26ade77bf840c18994bbb991} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2beed43f68ecbc9ac239b570d5d1d1b40d': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2beed43f68ecbc9ac239b570d5d1d1b40d} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -236,8 +236,8 @@ packages: '@appwrite.io/pink-legacy@1.0.2': resolution: {integrity: sha512-1AYNcfbV+x0Tyj56CoieSq5g7+u+7F5/LDVN/z+Hx1kp9gj7xc1eT39Dy832xxfihImF6ksjp0FXEMVSBR8cew==} - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b4c09ba5': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b4c09ba5} + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bcb8ad2b': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bcb8ad2b} version: 1.0.0-next.85 peerDependencies: react-dom: ^18.0.0 @@ -4099,11 +4099,11 @@ snapshots: '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@640f09c': {} - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba5(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b(svelte@4.2.19)': dependencies: svelte: 4.2.19 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba59191359b26ade77bf840c18994bbb991(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2beed43f68ecbc9ac239b570d5d1d1b40d(svelte@4.2.19)': dependencies: svelte: 4.2.19 @@ -4116,9 +4116,9 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@b4c09ba5(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bcb8ad2b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: - '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@b4c09ba59191359b26ade77bf840c18994bbb991(svelte@4.2.19) + '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2beed43f68ecbc9ac239b570d5d1d1b40d(svelte@4.2.19) '@floating-ui/dom': 1.6.13 '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19) '@melt-ui/svelte': 0.86.3(svelte@4.2.19) diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts index 424cda3f0..b461af01e 100644 --- a/src/lib/stores/stripe.ts +++ b/src/lib/stores/stripe.ts @@ -1,4 +1,4 @@ -import type { Stripe, StripeElement, StripeElements } from '@stripe/stripe-js'; +import type { Appearance, Stripe, StripeElement, StripeElements } from '@stripe/stripe-js'; import { sdk } from './sdk'; import { app } from './app'; import { get, writable } from 'svelte/store'; @@ -61,7 +61,7 @@ export async function submitStripeCard(name: string, organizationId?: string) { clientSecret = paymentMethod.clientSecret; } - // // Element needs to be submitted before confirming the setup intent + // Element needs to be submitted before confirming the setup intent elements.submit(); const baseUrl = 'https://cloud.appwrite.io/console'; @@ -185,17 +185,27 @@ export async function confirmSetup( } } -const appearanceLight = { +const appearanceLight: Appearance = { variables: { - colorPrimary: ThemeLightCloud['fgcolor-neutral-primary'], - colorText: ThemeLightCloud['fgcolor-neutral-primary'], - colorBackground: ThemeLightCloud['bgcolor-neutral-primary'], - color: ThemeLightCloud['fgcolor-neutral-primary'], + fontSizeBase: ThemeLightCloud['font-size-s'], + fontSizeSm: ThemeLightCloud['font-size-s'], + colorPrimary: ThemeLightCloud['neutral-700'], + colorText: ThemeLightCloud['neutral-700'], + colorBackground: 'rgb(250, 250, 251)', colorDanger: ThemeLightCloud['fgcolor-error'], fontFamily: ThemeLightCloud['font-family-sansserif'], - borderRadius: ThemeLightCloud['border-radius-s'] + borderRadius: ThemeLightCloud['base-8'] }, rules: { + '.Label': { + color: ThemeLightCloud['neutral-700'], + marginBottom: ThemeLightCloud['base-8'], + fontWeight: '500' + }, + '.Input': { + padding: ThemeLightCloud['base-6'], + paddingLeft: ThemeLightCloud['base-12'] + }, '.Input:hover': { border: 'solid 1px rgb(195, 195, 198)', boxShadow: 'none'