Merge pull request #598 from beabee-communityrm/fix/join-form-recursion

fix: separate payment content out

src/components/contribution/Contribution.vue

@@ -55,6 +55,7 @@ import ContributionMethod from './ContributionMethod.vue';
 import { type ContributionContent } from './contribution.interface';
 import { useI18n } from 'vue-i18n';
 import AppChoice from '../forms/AppChoice.vue';
+import type { ContentPaymentData } from '@type/content-payment-data';
 
 const props = withDefaults(
   defineProps<{
@@ -63,6 +64,7 @@ const props = withDefaults(
     payFee: boolean;
     paymentMethod: PaymentMethod;
     content: ContributionContent;
+    paymentContent: ContentPaymentData;
     showPeriod?: boolean;
     showPaymentMethod?: boolean;
     disabled?: boolean;
@@ -73,7 +75,7 @@ const props = withDefaults(
 const { t } = useI18n();
 
 const fee = computed(() =>
-  calcPaymentFee(props, props.content.payment.stripeCountry)
+  calcPaymentFee(props, props.paymentContent.stripeCountry)
 );
 
 const emit = defineEmits([

src/components/contribution/contribution.interface.ts

@@ -1,4 +1,4 @@
-import type { ContentJoinData, ContentPaymentData } from '@type';
+import type { ContentJoinData } from '@type';
 
 export type ContributionContent = Pick<
   ContentJoinData,
@@ -8,6 +8,4 @@ export type ContributionContent = Pick<
   | 'showAbsorbFee'
   | 'periods'
   | 'paymentMethods'
-> & {
-  payment: ContentPaymentData;
-};
+>;

src/components/pages/join/JoinForm.vue

@@ -17,7 +17,8 @@
         v-model:period="signUpData.period"
         v-model:payFee="signUpData.payFee"
         v-model:paymentMethod="signUpData.paymentMethod"
-        :content="{ ...joinContent, payment: paymentContent }"
+        :content="joinContent"
+        :payment-content="paymentContent"
         :disabled="signUpData.noContribution"
       >
         <AppCheckbox

src/components/pages/profile/contribution/UpdateContribution.vue

@@ -36,6 +36,7 @@
         v-model:period="newContribution.period"
         v-model:paymentMethod="newContribution.paymentMethod"
         :content="content"
+        :payment-content="paymentContent"
         :show-period="showChangePeriod"
         :show-payment-method="!isAutoActiveMember"
       />
@@ -65,10 +66,10 @@
       </AppButton>
 
       <p
-        v-if="content.payment.taxRateEnabled"
+        v-if="paymentContent.taxRateEnabled"
         class="-mt-2 mb-4 text-center text-sm"
       >
-        {{ t('join.tax.included', { taxRate: content.payment.taxRate }) }}
+        {{ t('join.tax.included', { taxRate: paymentContent.taxRate }) }}
       </p>
     </form>
 
@@ -83,7 +84,7 @@
       </AppHeading>
       <StripePayment
         :client-secret="stripeClientSecret"
-        :public-key="content.payment.stripePublicKey"
+        :public-key="paymentContent.stripePublicKey"
         :email="email"
         :return-url="startContributionCompleteUrl"
         @loaded="onStripeLoaded"
@@ -124,7 +125,7 @@ import { isRequestError } from '@utils/api';
 
 import { addNotification } from '@store/notifications';
 
-import type { ContributionInfo } from '@type';
+import type { ContentPaymentData, ContributionInfo } from '@type';
 
 const validation = useVuelidate();
 
@@ -134,6 +135,7 @@ const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
   modelValue: ContributionInfo;
   content: ContributionContent;
+  paymentContent: ContentPaymentData;
 }>();
 
 const newContribution = reactive({

src/pages/profile/contribution/index.vue

@@ -39,6 +39,7 @@ meta:
       <UpdateContribution
         v-model="contribution"
         :content="content"
+        :payment-content="paymentContent"
         class="mb-7 md:mb-9"
       />
 
@@ -47,7 +48,7 @@ meta:
         class="mb-7 md:mb-9"
         :email="email"
         :payment-source="contribution.paymentSource"
-        :stripe-public-key="content.payment.stripePublicKey"
+        :stripe-public-key="paymentContent.stripePublicKey"
       />
       <ContactCancelContribution
         id="me"
@@ -88,7 +89,7 @@ import AppNotification from '@components/AppNotification.vue';
 
 import { currentUser } from '@store';
 
-import type { ContributionInfo } from '@type';
+import { type ContentPaymentData, type ContributionInfo } from '@type';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -106,12 +107,13 @@ const content = ref<ContributionContent>({
   periods: [],
   showAbsorbFee: true,
   paymentMethods: [PaymentMethod.StripeCard],
-  payment: {
-    stripePublicKey: '',
-    stripeCountry: 'eu',
-    taxRate: 0,
-    taxRateEnabled: false,
-  },
+});
+
+const paymentContent = ref<ContentPaymentData>({
+  stripePublicKey: '',
+  stripeCountry: 'eu',
+  taxRate: 0,
+  taxRateEnabled: false,
 });
 
 const email = computed(() =>
@@ -126,13 +128,10 @@ const contribution = ref<ContributionInfo>({
 
 onBeforeMount(async () => {
   isIniting.value = true;
-  const joinContent = await fetchContent('join');
-  const paymentContent = await fetchContent('payment');
 
-  content.value = {
-    ...joinContent,
-    payment: paymentContent,
-  };
+  content.value = await fetchContent('join');
+  paymentContent.value = await fetchContent('payment');
+
   contribution.value = await fetchContribution();
   isIniting.value = false;
 });