Return billing to workspace settings

.env.sample

@@ -13,3 +13,6 @@ VUE_APP_CLOUDPAYMENTS_PUBLIC_ID=test_api_00000000000000000000001
 
 # Analytics token by Amplitude
 VUE_APP_AMPLITUDE_TOKEN=
+
+# Id of free plan
+VUE_APP_FREE_PLAN_ID=5f47f031ff71510040f433c1

.github/workflows/build-and-push-docker-image.yml

@@ -16,10 +16,14 @@ jobs:
         if: endsWith(github.ref, '/stage')
         uses: SpicyPizza/create-envfile@v1
         with:
-          envkey_VUE_APP_HAWK_TOKEN: ${{ secrets.HAWK_TOKEN_STAGE }}
-          envkey_VUE_APP_AMPLITUDE_TOKEN: ${{ secrets.AMPLITUDE_TOKEN_STAGE }}
+          envkey_VUE_APP_HAWK_TOKEN: ${{ secrets.HAWK_TOKEN_PROD }}
+          envkey_VUE_APP_AMPLITUDE_TOKEN: ${{ secrets.AMPLITUDE_TOKEN_PROD }}
           envkey_VUE_APP_CLOUDPAYMENTS_PUBLIC_ID: ${{ secrets.CP_PUBLIC_ID_STAGE }}
-          envkey_VUE_APP_API_ENDPOINT: "https://api.stage.hawk.so"
+          envkey_VUE_APP_API_ENDPOINT: "https://api.hawk.so"
+          # envkey_VUE_APP_HAWK_TOKEN: ${{ secrets.HAWK_TOKEN_STAGE }}
+          # envkey_VUE_APP_AMPLITUDE_TOKEN: ${{ secrets.AMPLITUDE_TOKEN_STAGE }}
+          # envkey_VUE_APP_CLOUDPAYMENTS_PUBLIC_ID: ${{ secrets.CP_PUBLIC_ID_STAGE }}
+          # envkey_VUE_APP_API_ENDPOINT: "https://api.stage.hawk.so"
 
       - name: Make prod envfile
         if: endsWith(github.ref, '/prod')

schema.graphql

@@ -762,8 +762,11 @@ type PayloadOfWorkspacePlanPurchase {
   """Workspace to which the payment is debited"""
   workspace: Workspace!
 
-  """Amount of payment in US cents"""
+  """Amount of payment * 100 """
   amount: Long!
+
+  """Currency of payment"""
+  currency: String!
 }
 
 """Input for single payment"""
@@ -821,6 +824,9 @@ type Plan {
   """Monthly charge for plan"""
   monthlyCharge: Int!
 
+  """Monthly charge currency for plan"""
+  monthlyChargeCurrency: String!
+
   """Events limit for plan"""
   eventsLimit: Int!
 

src/api/billing/queries.ts

@@ -28,6 +28,7 @@ export const FRAGMENT_BUSINESS_OPERATION = `
           name
         }
         amount
+        currency
       }
     }
   }

src/api/fragments.ts

@@ -121,6 +121,7 @@ export const WORKSPACE_PLAN = `
       id
       name
       monthlyCharge
+      monthlyChargeCurrency
       eventsLimit
     }
   }

src/api/plans/queries.ts

@@ -8,6 +8,7 @@ export const QUERY_PLANS = `
         id
         name
         monthlyCharge
+        monthlyChargeCurrency
         eventsLimit
       }
     }

src/components/account/settings/Layout.vue

@@ -26,12 +26,12 @@
         >
           {{ $t('settings.notifications.title') }}
         </router-link>
-<!--        <router-link-->
-<!--          class="settings-window__menu-item"-->
-<!--          :to="{ name: 'account-billing'}"-->
-<!--        >-->
-<!--          {{ $t('settings.billing.title') }}-->
-<!--        </router-link>-->
+        <!--        <router-link-->
+        <!--          class="settings-window__menu-item"-->
+        <!--          :to="{ name: 'account-billing'}"-->
+        <!--        >-->
+        <!--          {{ $t('settings.billing.title') }}-->
+        <!--        </router-link>-->
 
         <hr class="delimiter">
 

src/components/aside/EventsLimitIndicator.vue

@@ -3,12 +3,12 @@
     <div class="events-limit-indicator__info-section">
       <div class="events-limit-indicator__label">
         {{ $t("billing.volume") }}
-<!--        <PositiveButton-->
-<!--          v-if="isEventsLimitExceeded && isCurrentUserAdmin"-->
-<!--          class="events-limit-indicator__label-boost-button"-->
-<!--          :content="$t('billing.boost') + '!'"-->
-<!--          @click="goToBilling"-->
-<!--        />-->
+        <!--        <PositiveButton-->
+        <!--          v-if="isEventsLimitExceeded && isCurrentUserAdmin"-->
+        <!--          class="events-limit-indicator__label-boost-button"-->
+        <!--          :content="$t('billing.boost') + '!'"-->
+        <!--          @click="goToBilling"-->
+        <!--        />-->
       </div>
       <div class="events-limit-indicator__info-bar">
         <div class="events-limit-indicator__events">
@@ -33,14 +33,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
-//import PositiveButton from '../utils/PostivieButton.vue';
+// import PositiveButton from '../utils/PostivieButton.vue';
 import { Plan } from '../../types/plan';
 import Progress from '../utils/Progress.vue';
 
 export default Vue.extend({
   name: 'EventsLimitIndicator',
   components: {
-    //PositiveButton,
+    // PositiveButton,
     Progress,
   },
   props: {

src/components/aside/WorkspaceInfo.vue

@@ -29,7 +29,9 @@
       <router-link
         v-if="isAdmin"
         :to="{
-          name: 'workspace-settings-used-volume', params: {workspaceId: workspace.id} }"
+          name: 'workspace-settings-used-volume',
+          params: { workspaceId: workspace.id },
+        }"
       >
         <CircleProgress
           ref="events-count-circle"

src/components/catalog/catchers/AddCatcher.vue

@@ -53,7 +53,11 @@
           @click.native="item.page && $router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: item.page}})"
         />
 
-        <a class="project-add-catcher__catalog-more" href="https://docs.hawk.so/integrations?from=garage" target="_blank">
+        <a
+          class="project-add-catcher__catalog-more"
+          href="https://docs.hawk.so/integrations?from=garage"
+          target="_blank"
+        >
           {{ $t('components.catalog.discoverMore') }}
         </a>
 
@@ -64,14 +68,13 @@
           type="external"
           class="project-add-catcher__catalog-item"
           :name="'SENTRY'"
-          :isWide="true"
+          :is-wide="true"
           :image="require('../../../assets/catalog/sentry.svg')"
           :description="$t('components.catalog.migrationFromSentryDescription')"
           @click.native="$router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: 'sentry'}})"
         />
-        <div class="project-add-catcher__migration-description"></div>
+        <div class="project-add-catcher__migration-description" />
       </div>
-
     </div>
   </div>
 </template>

src/components/catalog/catchers/guides/sentry.vue

@@ -19,7 +19,10 @@
         </template>
         <template #content>
           {{ $t('components.catalog.hereIsDSN') }}
-          <TokenBlock v-if="computedDSN" :token="computedDSN" />
+          <TokenBlock
+            v-if="computedDSN"
+            :token="computedDSN"
+          />
           <template v-else>
             <p style="color: var(--color-indicator-critical);">
               {{ $t('projects.settings.integrations.sentryDSNTextNoToken') }}

src/components/event/Overview.vue

@@ -134,7 +134,7 @@ export default Vue.extend({
         return null;
       }
 
-      const integrationToFilter = [ 'vue', 'nuxt', 'flask', 'fastapi'];
+      const integrationToFilter = ['vue', 'nuxt', 'flask', 'fastapi'];
       const filteredAddons = {};
 
       Object.entries(this.event.payload.addons).forEach(([name, value]) => {

src/components/event/details/DetailsAddons.vue

@@ -97,7 +97,7 @@ export default Vue.extend({
     icon: {
       type: String,
       default: '',
-    }
+    },
   },
   computed: {
   },

src/components/modals/ChooseTariffPlanPopup.vue

@@ -14,17 +14,51 @@
           class="choose-plan__description"
           v-html="$t('workspaces.chooseTariffPlanDialog.description', {featuresURL: '#'})"
         />
-        <div class="choose-plan__plans">
+
+        <div
+          :class="{
+            'choose-plan__plans': true,
+            'choose-plan__plans--horizontal': plans.length > 3,
+          }"
+        >
           <TariffPlan
             v-for="plan in plans"
             :key="plan.id"
             :name="plan.name"
             :limit="plan.eventsLimit"
             :price="plan.monthlyCharge"
+            :currency="plan.monthlyChargeCurrency"
             :selected="plan.id === selectedPlan.id"
+            :is-current-plan="plan.id === workspace.plan.id"
+            :horizontal="plans.length > 3"
             @click.native="selectPlan(plan.id)"
           />
+
+          <div class="choose-plan__premium-card">
+            <div class="choose-plan__premium-card-title">
+              {{ $t('workspaces.chooseTariffPlanDialog.premiumPlan') }}
+            </div>
+
+            <div class="choose-plan__premium-card-limit">
+              {{ $t('workspaces.chooseTariffPlanDialog.premiumPlanLimit') }}
+            </div>
+
+            <div class="choose-plan__premium-card-price">
+              {{ $t('workspaces.chooseTariffPlanDialog.premiumPlanPrice') }}
+            </div>
+
+            <a href="mailto:[email protected]">
+              <UiButton
+                small
+                submit
+                rounded
+                :content="$t('workspaces.chooseTariffPlanDialog.premiumPlanButtonText')"
+                class="tariff-plan__button"
+              />
+            </a>
+          </div>
         </div>
+
         <UiButton
           class="choose-plan__continue-button"
           :content="$t('common.continue')"
@@ -216,12 +250,43 @@ export default Vue.extend({
 
     &__plans {
       display: flex;
-      align-items: center;
       justify-content: space-between;
     }
 
+    &__plans--horizontal {
+      flex-direction: column;
+    }
+
     &__continue-button {
       margin-top: 30px;
     }
+
+    &__premium-card {
+      background: var(--color-bg-main);
+      border-radius: 7px;
+      display: flex;
+      align-items: center;
+      padding: 20px 25px;
+    }
+
+    &__premium-card-title {
+      font-weight: 600;
+      width: 150px;
+    }
+
+    &__premium-card-limit {
+      color: var(--color-text-second);
+      font-weight: 600;
+      font-size: 15px;
+      letter-spacing: 0;
+    }
+
+    &__premium-card-price {
+      margin-left: auto;
+      color: var(--color-text-second);
+      font-weight: 600;
+      font-size: 13px;
+      margin-right: 20px;
+    }
   }
 </style>

src/components/modals/PaymentDetailsDialog.vue

@@ -64,7 +64,7 @@
             {{ $t('common.price') }}
           </div>
           <div class="payment-details__details-item-value">
-            {{ priceWithDollar }}
+            {{ price }}
           </div>
         </div>
 
@@ -194,6 +194,7 @@ import { PayWithCardInput } from '../../api/billing';
 import { BusinessOperation } from '../../types/business-operation';
 import { BusinessOperationStatus } from '../../types/business-operation-status';
 import UiCheckboxWithLabel from '../forms/UiCheckboxWithLabel/UiCheckboxWithLabel.vue';
+import { getCurrencySign } from '@/utils';
 
 /**
  * Id for the 'New card' option in select
@@ -348,8 +349,8 @@ export default Vue.extend({
      *
      * example: 100$
      */
-    priceWithDollar(): string {
-      return `${this.plan.monthlyCharge}$`;
+    price(): string {
+      return `${this.plan.monthlyCharge}${getCurrencySign(this.plan.monthlyChargeCurrency)}`;
     },
 
     /**
@@ -549,7 +550,7 @@ export default Vue.extend({
         this.$sendToHawk(e);
         notifier.show({
           message: this.$i18n.t('billing.widget.notifications.error') as string,
-          style: 'success',
+          style: 'error',
         });
       }
     },
@@ -726,7 +727,7 @@ export default Vue.extend({
     display: flex;
 
     &-button {
-      margin-right: 118px;
+      margin-right: auto;
     }
 
     &-cp-logo {

src/components/project/settings/Integrations.vue

@@ -38,7 +38,10 @@
       class="projects-integrations-settings-page__token"
       :token="sentryDSN"
     />
-    <p v-else style="color: var(--color-indicator-critical);">
+    <p
+      v-else
+      style="color: var(--color-indicator-critical);"
+    >
       {{ $t('projects.settings.integrations.sentryDSNTextNoToken') }}
     </p>
   </div>

src/components/utils/PostivieButton.vue

@@ -30,7 +30,6 @@ export default Vue.extend({
 
 .boostButton {
   display: flex;
-  width: 65px;
   height: 23px;
   margin-top: -19px;
   margin-left: 60px;