chore: wip

stacksjs · Nov 25, 2024 · c342462 · c342462
1 parent 48cc986
commit c342462
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 7 deletions.
diff --git a/resources/views/dashboard/components/billing/payment-method-list.vue b/resources/views/dashboard/components/billing/payment-method-list.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import CardBrands from './card-brands.vue'
+import { notification } from '@stacksjs/notification'
+import { Popover, PopoverPanel, PopoverButton } from '@stacksjs/popover'
+
+const isDefaultLoading = ref<{ [key: string]: boolean }>({})
 
 const paymentStore = usePaymentStore()
 
@@ -10,10 +14,15 @@ async function deletePayment(paymentMethodId: string) {
 }
 
 async function makeDefault(paymentMethodId: string) {
+  isDefaultLoading.value[paymentMethodId] = true
+
   await paymentStore.updateDefaultPaymentMethod(paymentMethodId)
 
   await paymentStore.fetchUserPaymentMethods()
   await paymentStore.fetchDefaultPaymentMethod()
+
+  notification.success('Default payment method updated')
+  isDefaultLoading.value[paymentMethodId] = false
 }
 </script>
 
@@ -35,13 +44,19 @@ async function makeDefault(paymentMethodId: string) {
               type="button"
               class="border rounded-md bg-white px-2 py-1 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-50 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline"
               @click="makeDefault(method.id)"
+              :disabled="isDefaultLoading[method.id]"
             >
-              <svg class="h-4 w-4 text-gray-700" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <svg v-if="!isDefaultLoading[method.id]" class="h-4 w-4 text-gray-700" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
               </svg>
+
+              <svg v-else class="h-4 w-4 text-gray-700 animate-spin" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity="0.25" stroke-width="4"></circle>
+                <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="4" stroke-linecap="round"></path>
+              </svg>
             </button>
 
-            <button
+            <!-- <button
               aria-label="delete"
               type="button"
               class="border rounded-md bg-white px-2 py-1 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-50 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline"
@@ -50,7 +65,34 @@ async function makeDefault(paymentMethodId: string) {
               <svg class="h-4 w-4 text-gray-700" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
               </svg>
-            </button>
+            </button> -->
+
+            <Popover v-slot="{ open }" class="relative">
+              <PopoverButton
+                :class="open ? 'text-white' : 'text-white/90'"
+                class="border rounded-md bg-white px-2 py-1 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-50 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline"
+              >
+                <svg class="h-4 w-4 text-gray-700" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                </svg>
+              </PopoverButton>
+
+              <PopoverPanel
+                class="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl"
+              >
+                <div class="p-4">
+                  <h3 class="text-lg font-medium leading-6 text-gray-900">Delete Payment Method</h3>
+                  <div class="mt-2">
+                    <p class="text-sm text-gray-500">Are you sure you want to delete this payment method?</p>
+                  </div>
+                  <div class="mt-4 flex justify-end">
+                    <button type="button" class="border rounded-md bg-white px-2 py-1 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-50 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline">
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </PopoverPanel>
+            </Popover>
           </div>
         </div>
       </div>

diff --git a/resources/views/dashboard/components/billing/payment-method.vue b/resources/views/dashboard/components/billing/payment-method.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import { useBillable } from '../../../../functions/billing/payments'
 import CardBrands from './card-brands.vue'
+import { Notification, notification } from '@stacksjs/notification'
 
 import PaymentMethodList from './payment-method-list.vue'
 
 const paymentStore = usePaymentStore()
 const clientSecret = ref('')
 
 const stripeLoading = ref(true)
+const isLoadingWebElement = ref(false)
 const showStripe = ref(false)
 const elements = ref('')
 
 const { loadStripeElement, isEmpty, handleAddPaymentMethod } = useBillable()
 
 async function loadWebElement() {
+  isLoadingWebElement.value = true
   clientSecret.value = await paymentStore.fetchSetupIntent()
 
   elements.value = await loadStripeElement(clientSecret.value)
 
   showStripe.value = true
   stripeLoading.value = false
+  isLoadingWebElement.value = false
 }
 
 async function submitPaymentMethod(clientSecret: string, elements: any) {
@@ -39,6 +43,7 @@ function cancelPaymentForm() {
 </script>
 
 <template>
+  <Notification position="top-right" richColors/>
   <div class="mt-16 w-2/3 bg-white px-8 py-6 shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
     <h2 class="text-lg text-gray-900 font-medium">
       Payment Info
@@ -99,7 +104,13 @@ function cancelPaymentForm() {
         class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline"
         @click="loadWebElement()"
       >
-        Add Payment Method
+        <span class="inline-flex items-center" v-if="isLoadingWebElement">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 animate-spin">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+          </svg>
+          <span class="ml-2">Loading...</span>
+        </span>
+        <span v-else>Add Payment Method</span>
       </button>
     </div>
   </div>

diff --git a/storage/framework/core/components/payment/package.json b/storage/framework/core/components/payment/package.json
@@ -36,8 +36,8 @@
   "dependencies": {
     "@julr/unocss-preset-forms": "^0.1.0",
     "@stacksjs/ui": "workspace:*",
-    "@unocss/reset": "0.64.1",
-    "unocss": "0.64.1",
+    "@unocss/reset": "0.61.0",
+    "unocss": "0.61.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {

diff --git a/storage/framework/core/components/popover/src/index.ts b/storage/framework/core/components/popover/src/index.ts
@@ -10,3 +10,5 @@ const plugin: Plugin = {
 }
 
 export default plugin
+
+export { Popover, PopoverButton, PopoverPanel }
diff --git a/storage/framework/core/components/popover/vite.config.ts b/storage/framework/core/components/popover/vite.config.ts
@@ -52,7 +52,7 @@ export default defineConfig(({ mode }) => {
         output: [
           {
             format: 'es',
-            entryFileNames: `stacks-popover.js`,
+            entryFileNames: `index.js`,
             preserveModules: false,
           },
         ],