ui fixes

src/routes/community/profile/+page.svelte

@@ -66,6 +66,8 @@
 
 
 
+
+
 const submitCancellation = () => {
   return async ({ result, update}) => {
       switch (result.type) {
@@ -928,7 +930,7 @@ onDestroy(async () => {
                                     Cancel Subscription
                                   </label>
                                   {#if subscriptionData?.product_name?.includes('Monthly')}
-                                  <label for="changeSubscriptionModal" class="sm:ml-3 cursor-pointer text-black bg-[#0DDE00] text-sm sm:text-[1rem] px-4 py-2 rounded-lg mt-5">
+                                  <label on:click={() => handleChangePlan(subscriptionData?.card_brand)} for={subscriptionData?.card_brand !== null && subscriptionData?.card_brand?.length !== 0 ? 'changeSubscriptionModal' : 'errorSubscriptionModal'} class="sm:ml-3 {subscriptionData?.card_brand !== null && subscriptionData?.card_brand?.length !== 0 ? 'cursor-pointer' : 'cursor-not-allowed'} {subscriptionData?.card_brand !== null && subscriptionData?.card_brand?.length !== 0 ? 'bg-[#0DDE00] text-black' : 'bg-gray-600 opacity-[0.8] text-white'} text-sm sm:text-[1rem] px-4 py-2 rounded-lg mt-5">
                                     Change to Annual Plan
                                   </label>
                                   {/if}
@@ -1134,3 +1136,31 @@ onDestroy(async () => {
   </form>
 </dialog>
 <!-- End Cancel Subscription Modal -->
+
+
+<!-- Start Cancel Subscription Modal -->
+<input type="checkbox" id="errorSubscriptionModal" class="modal-toggle" />
+
+<dialog id="errorSubscriptionModal" class="modal modal-bottom sm:modal-middle">
+
+
+  <label for="errorSubscriptionModal"  class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
+  
+
+  <!-- Desktop modal content -->
+  <div class="modal-box w-full bg-[#202020] flex flex-col items-center">
+    <div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full bg-[#404040]" />
+    <div class="text-white mb-5 text-center">
+      <h3 class="font-bold text-2xl mb-5">Paypal not supported</h3>
+      <span class="text-white text-[1rem] font-normal">
+        Apologies, our payment provider currently only supports credit cards for changing plans from monthly to annual. We are working to expand this to other payment methods.
+      </span>
+    </div>
+
+    <button class="cursor-pointer px-7 py-2 mb-5 rounded-full bg-[#0DDE00]  text-center text-black text-[1rem] font-normal">
+      OK
+    </button>
+    
+  </div>
+</dialog>
+<!-- End Cancel Subscription Modal -->

src/routes/pricing/+page.svelte

@@ -404,7 +404,9 @@ async function purchasePlan() {
                     <details class="collapse collapse-arrow bg-[#131313]">
                         <summary class="collapse-title text-lg font-semibold">Can I change plans?</summary>
                         <div class="collapse-content"> 
-                          <p>If you have a monthly subscription, you can upgrade to the Annual Plan in your account settings.</p>
+                            <p>If you have a monthly subscription, you can upgrade to the Annual Plan in your account settings.</p>
+                            <p>However, our payment provider currently supports only credit cards for upgrading from monthly to annual. We are working to expand this to other payment methods.</p>
+                            <p>If you paid via PayPal and want to switch to the Annual Plan, please wait until your current subscription ends and then purchase the Annual Plan.</p>
                         </div>
                     </details>