From 7deed6013fa069b495912f4bcd69480522911fc8 Mon Sep 17 00:00:00 2001
From: Arsenije Savic <arsenijesavic@me.com>
Date: Tue, 12 Sep 2023 07:29:41 -0600
Subject: [PATCH] feat(step-payout): add custom compesation

---
 src/pages/proposals/create/StepPayout.vue | 31 +++++++++++------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/pages/proposals/create/StepPayout.vue b/src/pages/proposals/create/StepPayout.vue
index 84a16474c..45ad109ee 100644
--- a/src/pages/proposals/create/StepPayout.vue
+++ b/src/pages/proposals/create/StepPayout.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapGetters } from 'vuex'
-import { validation } from '~/mixins/validation'
+import { DEFAULT_TIER, PROPOSAL_TYPE } from '~/const'
 import { format } from '~/mixins/format'
-import { PROPOSAL_TYPE } from '~/const'
+import { validation } from '~/mixins/validation'
 
 export default {
   name: 'step-payout',
-  mixins: [validation, format],
+  mixins: [format, validation],
   components: {
     InfoTooltip: () => import('~/components/common/info-tooltip.vue'),
     PayoutAmounts: () => import('~/components/common/payout-amounts.vue'),
@@ -54,6 +54,7 @@ export default {
     usdAmount: {
       immediate: true,
       handler () {
+        console.log('usdAmount')
         this.calculateTokens()
       }
     },
@@ -67,6 +68,7 @@ export default {
         }
       }
     },
+
     commitment: {
       immediate: true,
       handler () {
@@ -75,19 +77,8 @@ export default {
           this.firstPaintCommitment = false
         }
       }
-    },
-
-    '$store.state.proposals.draft.annualUsdSalary': {
-      immediate: true,
-      handler (val) {
-        if (!this.custom) {
-          if (val === 0) {
-            this.salaryOption = null
-          }
-          this.calculateTokens()
-        }
-      }
     }
+
   },
 
   mounted () {
@@ -283,7 +274,8 @@ export default {
     isContribution () {
       const proposalType = this.$store.state.proposals.draft.category.key
       return proposalType === 'contribution'
-    }
+    },
+    isDefaultTier () { return this.$store.state.proposals.draft.tier.value.name === DEFAULT_TIER }
   },
 
   methods: {
@@ -335,6 +327,13 @@ widget(:class="{ 'disable-step': currentStepName !== 'step-payout' && $q.screen.
     .text-body2.text-grey-7(v-if="fields.stepCompensationTitle && fields.stepCompensationTitle.description") {{ fields.stepCompensationTitle.description }}
   .text-body2.text-grey-7.q-mb-xl(v-if="$q.screen.lt.md || $q.screen.md") {{ $t('pages.proposals.create.steppayout.pleaseEnterTheUsd') }}
   .q-col-gutter-sm(:class="{ 'row':$q.screen.gt.md, 'q-mt-xl':$q.screen.gt.md }")
+    .col(v-if="isDefaultTier" :class="{ 'q-mb-xxl':$q.screen.lt.md || $q.screen.md }")
+      label.h-label {{ fields.annualUsdSalaryCustom.label }}
+      .text-body2.text-grey-7.q-my-md(v-if="fields.annualUsdSalaryCustom.description") {{ fields.annualUsdSalaryCustom.description }}
+      .row.full-width.items-center.q-mt-xs
+        q-avatar.q-mr-xs(size="40px")
+          img(src="~assets/icons/usd.svg")
+        q-input.rounded-border.col(:disable="custom" dense outlined rounded suffix="$" type="number" v-model="annualUsdSalary" :placeholder="$t('pages.proposals.create.steppayout.typeTheAmountOfUsd')")
     .col(v-if="fields.usdAmount" :class="{ 'q-mb-xxl':$q.screen.lt.md || $q.screen.md }")
       label.h-label {{ fields.usdAmount.label }}
       .text-body2.text-grey-7.q-my-md(v-if="fields.usdAmount.description") {{ fields.usdAmount.description }}