From a87b0b60aa15ef4bf4cb63d0578db6ab51d4417d Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Tue, 2 May 2023 23:31:37 -0400
Subject: [PATCH 01/52] Add ExecutionsUsage component

---
 .../src/components/N8nMenu/Menu.vue           |   1 +
 packages/editor-ui/src/Interface.ts           |  33 ++++
 .../src/components/ExecutionsUsage.vue        | 184 ++++++++++++++++++
 .../editor-ui/src/components/MainSidebar.vue  |   4 +
 .../editor-ui/src/n8n-theme-variables.scss    |   2 +-
 .../src/plugins/i18n/locales/en.json          |   9 +-
 packages/editor-ui/src/plugins/icons/index.ts |   2 +
 7 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor-ui/src/components/ExecutionsUsage.vue

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 66e9d61bb46bd..6dafe805fcd4b 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -28,6 +28,7 @@
 				</el-menu>
 			</div>
 			<div :class="[$style.lowerContent, 'pb-2xs']">
+				<slot name="beforeLowerMenu"></slot>
 				<el-menu :defaultActive="defaultActive" :collapse="collapsed" v-on="$listeners">
 					<n8n-menu-item
 						v-for="item in lowerMenuItems"
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index c90e18da3a59e..51a147af6c43c 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1443,3 +1443,36 @@ export type VersionControlPreferences = {
 	branchColor: string;
 	publicKey?: string;
 };
+
+export interface PlanData {
+	planSpec: PlanSpec;
+	instance: Instance;
+	usage: Usage;
+}
+
+export interface PlanSpec {
+	planId: number;
+	monthlyExecutionsLimit: number;
+	activeWorkflowsLimit: number;
+	credentialsLimit: number;
+	isActive: boolean;
+	displayName: string;
+	metadata: Metadata;
+}
+export interface Metadata {
+	version: string;
+	group: string;
+	slug: string;
+	trial: Trial;
+}
+export interface Trial {
+	length: number;
+	gracePeriod: number;
+}
+export interface Instance {
+	createdAt: string;
+}
+export interface Usage {
+	executions: number;
+	activeWorkflows: number;
+}
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
new file mode 100644
index 0000000000000..83f95a81a8417
--- /dev/null
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -0,0 +1,184 @@
+<template>
+	<div v-if="userIsTrialing" :class="$style.container">
+		<div v-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
+			<i18n path="executionUsage.currentUsage">
+				<template #text>
+					<n8n-text size="xsmall" color="text-dark">
+						{{ locale.baseText('executionUsage.currentUsage.text') }}
+					</n8n-text>
+				</template>
+				<template #count>
+					<n8n-text size="xsmall" :bold="true" color="warning">
+						{{ daysLeftOnTrial }} {{ locale.baseText('executionUsage.currentUsage.count') }}
+					</n8n-text>
+				</template>
+			</i18n>
+		</div>
+		<div v-if="isTrialExpired" :class="$style.usageText">
+			<n8n-text size="xsmall" color="danger">
+				{{ locale.baseText('executionUsage.expired.text') }}
+			</n8n-text>
+		</div>
+		<div v-if="!trialHasExecutionsLeft" :class="$style.usageText">
+			<n8n-text size="xsmall">
+				{{ locale.baseText('executionUsage.ranOutOfExecutions.text') }}
+			</n8n-text>
+		</div>
+		<div v-if="!isTrialExpired" :class="$style.usageCounter">
+			<div :class="$style.progressBarSection">
+				<progress
+					:class="[
+						trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
+						$style.progressBar,
+					]"
+					:value="currentExecutions"
+					:max="maxExecutions"
+				></progress>
+			</div>
+			<div :class="$style.executionsCountSection">
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">
+					{{ currentExecutions }}/{{ maxExecutions }}
+				</n8n-text>
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">{{
+					locale.baseText('executionUsage.label.executions')
+				}}</n8n-text>
+			</div>
+		</div>
+
+		<div :class="$style.upgradeButtonSection">
+			<n8n-button
+				:label="locale.baseText('executionUsage.button.upgrade')"
+				size="mini"
+				icon="gem"
+				type="success"
+				@click="onUpgradeClicked"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue';
+import { i18n as locale } from '@/plugins/i18n';
+import type { PlanData } from '@/Interface';
+import { DateTime } from 'luxon';
+
+const currentPlan = ref<PlanData>({
+	planSpec: {
+		planId: 43039,
+		monthlyExecutionsLimit: 200,
+		activeWorkflowsLimit: 10,
+		credentialsLimit: 100,
+		isActive: false,
+		displayName: 'Trial',
+		metadata: {
+			version: 'v1',
+			group: 'trial',
+			slug: 'trial-1',
+			trial: {
+				length: 7,
+				gracePeriod: 3,
+			},
+		},
+	},
+	instance: {
+		createdAt: '2023-05-01T01:47:47Z',
+	},
+	usage: {
+		executions: 100,
+		activeWorkflows: 10,
+	},
+});
+
+const now = DateTime.utc();
+
+onMounted(async () => {});
+
+const daysLeftOnTrial = computed(() => {
+	const { days = 0 } = now.diff(getPlanStartingDate(), ['days']).toObject();
+	return Math.trunc(days);
+});
+
+const isTrialExpired = computed(() => {
+	const trialEndsAt = getPlanStartingDate()
+		.plus({ days: currentPlan.value.planSpec.metadata.trial.length })
+		.endOf('day');
+	return now.toMillis() > trialEndsAt.toMillis();
+});
+
+const getPlanStartingDate = () =>
+	DateTime.fromISO(currentPlan.value.instance.createdAt).startOf('day');
+
+const trialHasExecutionsLeft = computed(
+	() => currentPlan.value.usage.executions < currentPlan.value.planSpec.monthlyExecutionsLimit,
+);
+
+const userIsTrialing = computed(() => currentPlan.value.planSpec.metadata.group === 'trial');
+
+const currentExecutions = computed(() => currentPlan.value.usage.executions);
+
+const maxExecutions = computed(() => currentPlan.value.planSpec.monthlyExecutionsLimit);
+
+const onUpgradeClicked = () => {};
+</script>
+
+<style module lang="scss">
+.container {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--color-background-light);
+	border-radius: 0px;
+	margin: 0;
+	border: var(--border-base);
+	border-right: 0;
+}
+
+.progressBar {
+	width: 62.4px;
+}
+
+.progressBarSuccess {
+	accent-color: var(--color-foreground-xdark);
+}
+
+.progressBarDanger {
+	accent-color: var(--color-danger);
+}
+
+.usageText {
+	margin-left: var(--spacing-s);
+	margin-right: var(--spacing-s);
+	margin-top: var(--spacing-xs);
+	line-height: 12.5px;
+}
+
+.usageCounter {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-left: var(--spacing-s);
+	margin-top: var(--spacing-2xs);
+	font-size: var(--font-size-3xs);
+}
+.progressBarSection {
+	width: 62.4px;
+	justify-content: center;
+	margin-right: 0px;
+}
+
+.danger {
+	color: var(--color-danger);
+}
+
+.executionsCountSection {
+	margin-left: var(--spacing-xs);
+}
+
+.upgradeButtonSection {
+	margin: var(--spacing-s);
+}
+
+.upgradeButtonSection > * {
+	width: 100%;
+}
+</style>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 4f2c445659e5b..bb9f667ff4203 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -25,6 +25,8 @@
 					/>
 				</div>
 			</template>
+
+			<template #beforeLowerMenu> <ExecutionsUsage v-if="!isCollapsed" /></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
 					<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
@@ -134,6 +136,7 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useVersionsStore } from '@/stores/versions';
 import { isNavigationFailure } from 'vue-router';
 import { useVersionControlStore } from '@/stores/versionControl';
+import ExecutionsUsage from '@/components/ExecutionsUsage.vue';
 
 export default mixins(
 	genericHelpers,
@@ -147,6 +150,7 @@ export default mixins(
 	components: {
 		GiftNotificationIcon,
 		WorkflowSettings,
+		ExecutionsUsage,
 	},
 	data() {
 		return {
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index 5e751f208ce40..b6e1f50978c62 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -38,7 +38,7 @@ $header-height: 65px;
 
 // sidebar
 $sidebar-width: 65px;
-$sidebar-expanded-width: 200px;
+$sidebar-expanded-width: 202px;
 $sidebar-inactive-color: var(--color-foreground-xdark);
 $sidebar-active-color: $color-primary;
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index fa89ec4ca1955..0981b0d5c93ee 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1811,5 +1811,12 @@
 	"userActivationSurveyModal.sharedFeedback.success": "Thanks for your feedback",
 	"userActivationSurveyModal.sharedFeedback.error": "Problem sharing feedback, try again",
 	"sso.login.divider": "or",
-	"sso.login.button": "Continue with SSO"
+	"sso.login.button": "Continue with SSO",
+	"executionUsage.currentUsage": "{text} {count}",
+	"executionUsage.currentUsage.text": "You are in a free trial with limited executions. You have",
+	"executionUsage.currentUsage.count": "days left.",
+	"executionUsage.label.executions": "Executions",
+	"executionUsage.button.upgrade": "Upgrade plan",
+	"executionUsage.expired.text": "You're trial is over. Upgrade now to keep your automation data",
+	"executionUsage.ranOutOfExecutions.text": "You’re out of executions. Upgrade your plan to keep automating."
 }
diff --git a/packages/editor-ui/src/plugins/icons/index.ts b/packages/editor-ui/src/plugins/icons/index.ts
index 90257a28ce316..f4e2a70594724 100644
--- a/packages/editor-ui/src/plugins/icons/index.ts
+++ b/packages/editor-ui/src/plugins/icons/index.ts
@@ -128,6 +128,7 @@ import {
 	faTree,
 	faStickyNote as faSolidStickyNote,
 	faUserLock,
+	faGem,
 } from '@fortawesome/free-solid-svg-icons';
 import { faVariable } from './custom';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
@@ -264,5 +265,6 @@ addIcon(faVariable);
 addIcon(faVideo);
 addIcon(faTree);
 addIcon(faUserLock);
+addIcon(faGem);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);

From 1d8955cd87c16b62052190ab29ee91a8ba0fe9b1 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 18:37:27 -0400
Subject: [PATCH 02/52] set $sidebar-expanded-width back to 200px

---
 packages/editor-ui/src/n8n-theme-variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index b6e1f50978c62..5e751f208ce40 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -38,7 +38,7 @@ $header-height: 65px;
 
 // sidebar
 $sidebar-width: 65px;
-$sidebar-expanded-width: 202px;
+$sidebar-expanded-width: 200px;
 $sidebar-inactive-color: var(--color-foreground-xdark);
 $sidebar-active-color: $color-primary;
 

From 399060c3fae60aaa7cb5ca23526c4ad8c9ca237f Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 18:41:49 -0400
Subject: [PATCH 03/52] add days using interpolation

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 6 +++++-
 packages/editor-ui/src/plugins/i18n/locales/en.json   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 83f95a81a8417..690a1d5513e95 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -9,7 +9,11 @@
 				</template>
 				<template #count>
 					<n8n-text size="xsmall" :bold="true" color="warning">
-						{{ daysLeftOnTrial }} {{ locale.baseText('executionUsage.currentUsage.count') }}
+						{{
+							locale.baseText('executionUsage.currentUsage.count', {
+								interpolate: { days: daysLeftOnTrial.toString() },
+							})
+						}}
 					</n8n-text>
 				</template>
 			</i18n>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 0981b0d5c93ee..c574dd85206a2 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1814,7 +1814,7 @@
 	"sso.login.button": "Continue with SSO",
 	"executionUsage.currentUsage": "{text} {count}",
 	"executionUsage.currentUsage.text": "You are in a free trial with limited executions. You have",
-	"executionUsage.currentUsage.count": "days left.",
+	"executionUsage.currentUsage.count": "{days} days left.",
 	"executionUsage.label.executions": "Executions",
 	"executionUsage.button.upgrade": "Upgrade plan",
 	"executionUsage.expired.text": "You're trial is over. Upgrade now to keep your automation data",

From f57d0851bda4a1be51966f0eda3131c7b8dea811 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 18:43:41 -0400
Subject: [PATCH 04/52] Rename PlanData type to CloudPlanData

---
 packages/editor-ui/src/Interface.ts                   | 2 +-
 packages/editor-ui/src/components/ExecutionsUsage.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 51a147af6c43c..91c3cff7f9bd4 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1444,7 +1444,7 @@ export type VersionControlPreferences = {
 	publicKey?: string;
 };
 
-export interface PlanData {
+export interface CloudPlanData {
 	planSpec: PlanSpec;
 	instance: Instance;
 	usage: Usage;
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 690a1d5513e95..3e92700516934 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -64,10 +64,10 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from 'vue';
 import { i18n as locale } from '@/plugins/i18n';
-import type { PlanData } from '@/Interface';
+import type { CloudPlanData } from '@/Interface';
 import { DateTime } from 'luxon';
 
-const currentPlan = ref<PlanData>({
+const currentPlan = ref<CloudPlanData>({
 	planSpec: {
 		planId: 43039,
 		monthlyExecutionsLimit: 200,

From 43209c90c42cfaaa2f8cb52c4f2d1ec5e1a96e3e Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 18:44:34 -0400
Subject: [PATCH 05/52] Rename Metadata type to PlanMetadata

---
 packages/editor-ui/src/Interface.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 91c3cff7f9bd4..1063a4c55ae23 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1457,9 +1457,9 @@ export interface PlanSpec {
 	credentialsLimit: number;
 	isActive: boolean;
 	displayName: string;
-	metadata: Metadata;
+	metadata: PlanMetadata;
 }
-export interface Metadata {
+export interface PlanMetadata {
 	version: string;
 	group: string;
 	slug: string;

From 0ceaf3441e40f9b431cda5e0199c134cc0ba47e6 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 18:47:42 -0400
Subject: [PATCH 06/52] Make prop block in the update button

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 3e92700516934..7b5b1dc649667 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -55,6 +55,7 @@
 				size="mini"
 				icon="gem"
 				type="success"
+				:block="true"
 				@click="onUpgradeClicked"
 			/>
 		</div>
@@ -181,8 +182,4 @@ const onUpgradeClicked = () => {};
 .upgradeButtonSection {
 	margin: var(--spacing-s);
 }
-
-.upgradeButtonSection > * {
-	width: 100%;
-}
 </style>

From a67feae0595a463fa3838dd741ff4b0ce1268e8e Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 18:49:24 -0400
Subject: [PATCH 07/52] Use variable in line-height

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 7b5b1dc649667..bb32388209ff3 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -154,7 +154,7 @@ const onUpgradeClicked = () => {};
 	margin-left: var(--spacing-s);
 	margin-right: var(--spacing-s);
 	margin-top: var(--spacing-xs);
-	line-height: 12.5px;
+	line-height: var(--spacing-xs);
 }
 
 .usageCounter {

From 835292abb228a78f37d419af2c22412e97a60526 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 18:50:45 -0400
Subject: [PATCH 08/52] Remove progressBarSection class

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index bb32388209ff3..f1306381c465e 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -29,7 +29,7 @@
 			</n8n-text>
 		</div>
 		<div v-if="!isTrialExpired" :class="$style.usageCounter">
-			<div :class="$style.progressBarSection">
+			<div>
 				<progress
 					:class="[
 						trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
@@ -165,11 +165,6 @@ const onUpgradeClicked = () => {};
 	margin-top: var(--spacing-2xs);
 	font-size: var(--font-size-3xs);
 }
-.progressBarSection {
-	width: 62.4px;
-	justify-content: center;
-	margin-right: 0px;
-}
 
 .danger {
 	color: var(--color-danger);

From 1db1f3fa949d7119e729004fede2e653541118dd Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 19:02:48 -0400
Subject: [PATCH 09/52] fix trial expiration calculation

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index f1306381c465e..689d69115d82f 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -105,9 +105,9 @@ const daysLeftOnTrial = computed(() => {
 });
 
 const isTrialExpired = computed(() => {
-	const trialEndsAt = getPlanStartingDate()
-		.plus({ days: currentPlan.value.planSpec.metadata.trial.length })
-		.endOf('day');
+	const trialEndsAt = getPlanStartingDate().plus({
+		days: currentPlan.value.planSpec.metadata.trial.length,
+	});
 	return now.toMillis() > trialEndsAt.toMillis();
 });
 

From 0d6729c6462fb1463de5e41e28f627d7d7708082 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 3 May 2023 19:16:09 -0400
Subject: [PATCH 10/52] mock expirationDate and fix issue with days left

---
 packages/editor-ui/src/Interface.ts                  |  1 +
 .../editor-ui/src/components/ExecutionsUsage.vue     | 12 +++++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 1063a4c55ae23..53c126715c133 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1457,6 +1457,7 @@ export interface PlanSpec {
 	credentialsLimit: number;
 	isActive: boolean;
 	displayName: string;
+	expirationDate: string;
 	metadata: PlanMetadata;
 }
 export interface PlanMetadata {
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 689d69115d82f..5807dcb044365 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -76,6 +76,7 @@ const currentPlan = ref<CloudPlanData>({
 		credentialsLimit: 100,
 		isActive: false,
 		displayName: 'Trial',
+		expirationDate: '2023-05-06T01:47:47Z',
 		metadata: {
 			version: 'v1',
 			group: 'trial',
@@ -100,19 +101,16 @@ const now = DateTime.utc();
 onMounted(async () => {});
 
 const daysLeftOnTrial = computed(() => {
-	const { days = 0 } = now.diff(getPlanStartingDate(), ['days']).toObject();
-	return Math.trunc(days);
+	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
+	return Math.ceil(days);
 });
 
 const isTrialExpired = computed(() => {
-	const trialEndsAt = getPlanStartingDate().plus({
-		days: currentPlan.value.planSpec.metadata.trial.length,
-	});
+	const trialEndsAt = DateTime.fromISO(currentPlan.value.planSpec.expirationDate);
 	return now.toMillis() > trialEndsAt.toMillis();
 });
 
-const getPlanStartingDate = () =>
-	DateTime.fromISO(currentPlan.value.instance.createdAt).startOf('day');
+const getPlanExpirationDate = () => DateTime.fromISO(currentPlan.value.planSpec.expirationDate);
 
 const trialHasExecutionsLeft = computed(
 	() => currentPlan.value.usage.executions < currentPlan.value.planSpec.monthlyExecutionsLimit,

From d834ec36c0927cbf4df2ba66f36e0010f139bfb5 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 08:14:08 -0400
Subject: [PATCH 11/52] Remove unnecesary property from class .container

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 5807dcb044365..3480ff03d4b0c 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -130,8 +130,6 @@ const onUpgradeClicked = () => {};
 	display: flex;
 	flex-direction: column;
 	background-color: var(--color-background-light);
-	border-radius: 0px;
-	margin: 0;
 	border: var(--border-base);
 	border-right: 0;
 }

From 0429314e78017c4e8fcc8258b15569557968cd8c Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 09:34:42 -0400
Subject: [PATCH 12/52] inject component data via props

---
 packages/editor-ui/src/Interface.ts           |  8 +-
 packages/editor-ui/src/api/cloudPlans.ts      | 34 ++++++++
 .../src/components/ExecutionsUsage.vue        | 83 ++++++++++---------
 .../editor-ui/src/components/MainSidebar.vue  | 17 +++-
 packages/editor-ui/src/stores/users.ts        | 14 ++++
 5 files changed, 111 insertions(+), 45 deletions(-)
 create mode 100644 packages/editor-ui/src/api/cloudPlans.ts

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 53c126715c133..5f74c73ddc99e 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1461,10 +1461,10 @@ export interface PlanSpec {
 	metadata: PlanMetadata;
 }
 export interface PlanMetadata {
-	version: string;
-	group: string;
-	slug: string;
-	trial: Trial;
+	version: 'v1';
+	group: 'opt-out' | 'opt-in';
+	slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
+	trial?: Trial;
 }
 export interface Trial {
 	length: number;
diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
new file mode 100644
index 0000000000000..20217989a9e7e
--- /dev/null
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -0,0 +1,34 @@
+import type { CloudPlanData, IRestApiContext } from '@/Interface';
+
+export function getCurrentPlan(
+	context: IRestApiContext,
+	cloudUserId: string,
+): Promise<CloudPlanData> {
+	return Promise.resolve({
+		planSpec: {
+			planId: 43039,
+			monthlyExecutionsLimit: 200,
+			activeWorkflowsLimit: 10,
+			credentialsLimit: 100,
+			isActive: false,
+			displayName: 'Trial',
+			expirationDate: '2023-05-06T01:47:47Z',
+			metadata: {
+				version: 'v1',
+				group: 'opt-in',
+				slug: 'trial-1',
+				trial: {
+					length: 7,
+					gracePeriod: 3,
+				},
+			},
+		},
+		instance: {
+			createdAt: '2023-05-01T01:47:47Z',
+		},
+		usage: {
+			executions: 100,
+			activeWorkflows: 10,
+		},
+	});
+}
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 3480ff03d4b0c..8a5c724b74086 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="userIsTrialing" :class="$style.container">
+	<div :class="$style.container">
 		<div v-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
 			<i18n path="executionUsage.currentUsage">
 				<template #text>
@@ -63,42 +63,51 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 import { i18n as locale } from '@/plugins/i18n';
-import type { CloudPlanData } from '@/Interface';
 import { DateTime } from 'luxon';
 
-const currentPlan = ref<CloudPlanData>({
-	planSpec: {
-		planId: 43039,
-		monthlyExecutionsLimit: 200,
-		activeWorkflowsLimit: 10,
-		credentialsLimit: 100,
-		isActive: false,
-		displayName: 'Trial',
-		expirationDate: '2023-05-06T01:47:47Z',
-		metadata: {
-			version: 'v1',
-			group: 'trial',
-			slug: 'trial-1',
-			trial: {
-				length: 7,
-				gracePeriod: 3,
-			},
-		},
-	},
-	instance: {
-		createdAt: '2023-05-01T01:47:47Z',
-	},
-	usage: {
-		executions: 100,
-		activeWorkflows: 10,
-	},
-});
+export interface CloudPlanData {
+	planSpec: PlanSpec;
+	instance: Instance;
+	usage: Usage;
+}
+
+export interface PlanSpec {
+	planId: number;
+	monthlyExecutionsLimit: number;
+	activeWorkflowsLimit: number;
+	credentialsLimit: number;
+	isActive: boolean;
+	displayName: string;
+	expirationDate: string;
+	metadata: PlanMetadata;
+}
+export interface PlanMetadata {
+	version: 'v1';
+	group: 'opt-out' | 'opt-in';
+	slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
+	trial?: Trial;
+}
+export interface Trial {
+	length: number;
+	gracePeriod: number;
+}
+export interface Instance {
+	createdAt: string;
+}
+export interface Usage {
+	executions: number;
+	activeWorkflows: number;
+}
+
+const props = defineProps<{ cloudPlanData: CloudPlanData }>();
 
 const now = DateTime.utc();
 
-onMounted(async () => {});
+onMounted(async () => {
+	console.log('monte');
+});
 
 const daysLeftOnTrial = computed(() => {
 	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
@@ -106,21 +115,19 @@ const daysLeftOnTrial = computed(() => {
 });
 
 const isTrialExpired = computed(() => {
-	const trialEndsAt = DateTime.fromISO(currentPlan.value.planSpec.expirationDate);
+	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.planSpec.expirationDate);
 	return now.toMillis() > trialEndsAt.toMillis();
 });
 
-const getPlanExpirationDate = () => DateTime.fromISO(currentPlan.value.planSpec.expirationDate);
+const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.planSpec.expirationDate);
 
 const trialHasExecutionsLeft = computed(
-	() => currentPlan.value.usage.executions < currentPlan.value.planSpec.monthlyExecutionsLimit,
+	() => props.cloudPlanData.usage.executions < props.cloudPlanData.planSpec.monthlyExecutionsLimit,
 );
 
-const userIsTrialing = computed(() => currentPlan.value.planSpec.metadata.group === 'trial');
-
-const currentExecutions = computed(() => currentPlan.value.usage.executions);
+const currentExecutions = computed(() => props.cloudPlanData.usage.executions);
 
-const maxExecutions = computed(() => currentPlan.value.planSpec.monthlyExecutionsLimit);
+const maxExecutions = computed(() => props.cloudPlanData.planSpec.monthlyExecutionsLimit);
 
 const onUpgradeClicked = () => {};
 </script>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index bb9f667ff4203..412a50e97c959 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -26,7 +26,9 @@
 				</div>
 			</template>
 
-			<template #beforeLowerMenu> <ExecutionsUsage v-if="!isCollapsed" /></template>
+			<template #beforeLowerMenu>
+				<ExecutionsUsage :cloud-plan-data="cloudPlan" v-if="!isCollapsed && userIsTrialing"
+			/></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
 					<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
@@ -112,7 +114,7 @@
 </template>
 
 <script lang="ts">
-import type { IExecutionResponse, IMenuItem, IVersion } from '../Interface';
+import type { CloudPlanData, IExecutionResponse, IMenuItem, IVersion } from '../Interface';
 
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
@@ -154,7 +156,8 @@ export default mixins(
 	},
 	data() {
 		return {
-			// @ts-ignore
+			cloudPlan: {} as CloudPlanData,
+			userIsTrialing: false,
 			basePath: '',
 			fullyExpanded: false,
 		};
@@ -343,6 +346,14 @@ export default mixins(
 		}
 		await Vue.nextTick();
 		this.fullyExpanded = !this.isCollapsed;
+
+		try {
+			const planData = await this.usersStore.getOwnerCurrentPLan();
+			if (planData.planSpec.metadata.slug === 'trial-1') {
+				this.userIsTrialing = true;
+				this.cloudPlan = planData;
+			}
+		} catch {}
 	},
 	created() {
 		window.addEventListener('resize', this.onResize);
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index 29dfa0ceb04e6..8368891a8d4d3 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -20,8 +20,10 @@ import {
 	validatePasswordToken,
 	validateSignupToken,
 } from '@/api/users';
+import { getCurrentPlan } from '@/api/cloudPlans';
 import { PERSONALIZATION_MODAL_KEY, USER_ACTIVATION_SURVEY_MODAL, STORES } from '@/constants';
 import type {
+	CloudPlanData,
 	ICredentialsResponse,
 	IInviteResponse,
 	IPersonalizationLatestVersion,
@@ -113,6 +115,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				return permissions.use;
 			};
 		},
+		getCloudPlan() {},
 	},
 	actions: {
 		addUsers(users: IUserResponse[]) {
@@ -320,5 +323,16 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				await skipOwnerSetup(rootStore.getRestApiContext);
 			} catch (error) {}
 		},
+		async getOwnerCurrentPLan(): Promise<CloudPlanData> {
+			const settingsStore = useSettingsStore();
+			// TODO: uncomment before releasing
+			// const cloudUserId = settingsStore.settings.n8nMetadata?.userId;
+			const cloudUserId = '123';
+			const hasCloudPlan =
+				this.currentUser?.isOwner && settingsStore.isCloudDeployment && cloudUserId;
+			if (!hasCloudPlan) throw new Error('User does not have a cloud plan');
+			const rootStore = useRootStore();
+			return getCurrentPlan(rootStore.getRestApiContext, cloudUserId as string);
+		},
 	},
 });

From bcfd76cca540aae5a7de330804b6f0975848c2b2 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 16:12:32 -0400
Subject: [PATCH 13/52] Check for plan data during app mounting and keep data
 in the store

---
 packages/editor-ui/src/App.vue                 | 14 ++++++++++++++
 packages/editor-ui/src/Interface.ts            |  1 +
 .../editor-ui/src/components/MainSidebar.vue   | 18 +++++++-----------
 packages/editor-ui/src/stores/users.ts         | 11 ++++++++++-
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 2498681e81d66..1260032300e24 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -181,6 +181,19 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 				window.document.body.classList.add(`theme-${theme}`);
 			}
 		},
+		checkForExecutionsCount() {
+			let acc = 0;
+			setInterval(async () => {
+				try {
+					const planData = await this.usersStore.getOwnerCurrentPLan();
+					if (planData.planSpec.metadata.slug === 'trial-1') {
+						planData.usage.executions += acc;
+						acc += 20;
+						this.usersStore.setCloudPLan(planData);
+					}
+				} catch {}
+			}, 5000);
+		},
 	},
 	async mounted() {
 		this.setTheme();
@@ -189,6 +202,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		this.authenticate();
 		this.redirectIfNecessary();
 		this.checkForNewVersions();
+		this.checkForExecutionsCount();
 
 		this.loading = false;
 
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 5f74c73ddc99e..f569f71765a91 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1171,6 +1171,7 @@ export interface IVersionsState {
 export interface IUsersState {
 	currentUserId: null | string;
 	users: { [userId: string]: IUser };
+	cloudPlan: CloudPlanData | null;
 }
 
 export interface IWorkflowsState {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 412a50e97c959..5c80134762c92 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -27,7 +27,7 @@
 			</template>
 
 			<template #beforeLowerMenu>
-				<ExecutionsUsage :cloud-plan-data="cloudPlan" v-if="!isCollapsed && userIsTrialing"
+				<ExecutionsUsage :cloud-plan-data="currentPlanData" v-if="!isCollapsed && userIsTrialing"
 			/></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
@@ -156,8 +156,6 @@ export default mixins(
 	},
 	data() {
 		return {
-			cloudPlan: {} as CloudPlanData,
-			userIsTrialing: false,
 			basePath: '',
 			fullyExpanded: false,
 		};
@@ -333,6 +331,12 @@ export default mixins(
 			];
 			return [...items, ...regularItems];
 		},
+		userIsTrialing(): boolean {
+			return this.usersStore.userIsTrialing;
+		},
+		currentPlanData(): CloudPlanData {
+			return this.usersStore.currentPlanData;
+		},
 	},
 	async mounted() {
 		this.basePath = this.rootStore.baseUrl;
@@ -346,14 +350,6 @@ export default mixins(
 		}
 		await Vue.nextTick();
 		this.fullyExpanded = !this.isCollapsed;
-
-		try {
-			const planData = await this.usersStore.getOwnerCurrentPLan();
-			if (planData.planSpec.metadata.slug === 'trial-1') {
-				this.userIsTrialing = true;
-				this.cloudPlan = planData;
-			}
-		} catch {}
 	},
 	created() {
 		window.addEventListener('resize', this.onResize);
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index 8368891a8d4d3..ee5caaaff71bf 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -53,6 +53,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 	state: (): IUsersState => ({
 		currentUserId: null,
 		users: {},
+		cloudPlan: null,
 	}),
 	getters: {
 		allUsers(): IUser[] {
@@ -115,7 +116,12 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				return permissions.use;
 			};
 		},
-		getCloudPlan() {},
+		userIsTrialing(): boolean {
+			return this.cloudPlan?.planSpec?.metadata?.slug === 'trial-1';
+		},
+		currentPlanData(): CloudPlanData | null {
+			return this.cloudPlan;
+		},
 	},
 	actions: {
 		addUsers(users: IUserResponse[]) {
@@ -140,6 +146,9 @@ export const useUsersStore = defineStore(STORES.USERS, {
 		deleteUserById(userId: string): void {
 			Vue.delete(this.users, userId);
 		},
+		setCloudPLan(plan: CloudPlanData) {
+			this.cloudPlan = plan;
+		},
 		setPersonalizationAnswers(answers: IPersonalizationLatestVersion): void {
 			if (!this.currentUser) {
 				return;

From b48adc62cbdb9376f18181c8f7690dfc13cd654a Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 16:14:23 -0400
Subject: [PATCH 14/52] Remove mounted hook

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 8a5c724b74086..14278d8fefe91 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -105,10 +105,6 @@ const props = defineProps<{ cloudPlanData: CloudPlanData }>();
 
 const now = DateTime.utc();
 
-onMounted(async () => {
-	console.log('monte');
-});
-
 const daysLeftOnTrial = computed(() => {
 	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
 	return Math.ceil(days);

From 78424c9088c12298d76208ef6d9a943566592ff0 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 16:57:48 -0400
Subject: [PATCH 15/52] redirect when upgrade plan is clicked

---
 .../editor-ui/src/components/MainSidebar.vue  | 19 +++++++++++++++++--
 packages/editor-ui/src/constants.ts           |  4 ++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 5c80134762c92..f04366f05473f 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -27,7 +27,10 @@
 			</template>
 
 			<template #beforeLowerMenu>
-				<ExecutionsUsage :cloud-plan-data="currentPlanData" v-if="!isCollapsed && userIsTrialing"
+				<ExecutionsUsage
+					:cloud-plan-data="currentPlanData"
+					v-if="!isCollapsed && userIsTrialing"
+					@onUpgradePlanClicked="onUpgradePlanClicked"
 			/></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
@@ -125,7 +128,13 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { workflowRun } from '@/mixins/workflowRun';
 
 import mixins from 'vue-typed-mixins';
-import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
+import {
+	ABOUT_MODAL_KEY,
+	CHANGE_PLAN_PAGE_PRODUCTION,
+	CHANGE_PLAN_PAGE_STAGING,
+	VERSIONS_MODAL_KEY,
+	VIEWS,
+} from '@/constants';
 import { userHelpers } from '@/mixins/userHelpers';
 import { debounceHelper } from '@/mixins/debounce';
 import Vue from 'vue';
@@ -516,6 +525,12 @@ export default mixins(
 				this.versionControlStore.sync({ commitMessage: prompt.value });
 			}
 		},
+		onUpgradePlanClicked() {
+			location.href =
+				this.settingsStore.settings.license.environment === 'production'
+					? CHANGE_PLAN_PAGE_PRODUCTION
+					: CHANGE_PLAN_PAGE_STAGING;
+		},
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 501fbbcdebb6f..0e88fe5698172 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -548,3 +548,7 @@ export const ALLOWED_HTML_TAGS = [
 	'details',
 	'summary',
 ];
+
+export const CHANGE_PLAN_PAGE_PRODUCTION = 'https://app.n8n.cloud/account/change-plan';
+
+export const CHANGE_PLAN_PAGE_STAGING = 'https://stage-app.n8n.cloud/account/change-plan';

From 014883243c918ded8da0d2017093008bebbad19f Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 16:58:21 -0400
Subject: [PATCH 16/52] Remove computed properties

---
 packages/editor-ui/src/App.vue                |  2 +-
 packages/editor-ui/src/Interface.ts           |  4 +-
 packages/editor-ui/src/api/cloudPlans.ts      |  2 +-
 .../src/components/ExecutionsUsage.vue        | 55 ++++++++++---------
 packages/editor-ui/src/stores/users.ts        |  2 +-
 5 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 1260032300e24..5edf8e2519d73 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -186,7 +186,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			setInterval(async () => {
 				try {
 					const planData = await this.usersStore.getOwnerCurrentPLan();
-					if (planData.planSpec.metadata.slug === 'trial-1') {
+					if (planData.plan.metadata.slug === 'trial-1') {
 						planData.usage.executions += acc;
 						acc += 20;
 						this.usersStore.setCloudPLan(planData);
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index f569f71765a91..8ece46bbdc78a 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1446,12 +1446,12 @@ export type VersionControlPreferences = {
 };
 
 export interface CloudPlanData {
-	planSpec: PlanSpec;
+	plan: Plan;
 	instance: Instance;
 	usage: Usage;
 }
 
-export interface PlanSpec {
+export interface Plan {
 	planId: number;
 	monthlyExecutionsLimit: number;
 	activeWorkflowsLimit: number;
diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index 20217989a9e7e..9d194ea1c23f9 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -5,7 +5,7 @@ export function getCurrentPlan(
 	cloudUserId: string,
 ): Promise<CloudPlanData> {
 	return Promise.resolve({
-		planSpec: {
+		plan: {
 			planId: 43039,
 			monthlyExecutionsLimit: 200,
 			activeWorkflowsLimit: 10,
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 14278d8fefe91..38bd0ed80ba33 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.container">
-		<div v-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
+		<div v-if="!isTrialExpired() && trialHasExecutionsLeft()" :class="$style.usageText">
 			<i18n path="executionUsage.currentUsage">
 				<template #text>
 					<n8n-text size="xsmall" color="text-dark">
@@ -11,39 +11,39 @@
 					<n8n-text size="xsmall" :bold="true" color="warning">
 						{{
 							locale.baseText('executionUsage.currentUsage.count', {
-								interpolate: { days: daysLeftOnTrial.toString() },
+								interpolate: { days: daysLeftOnTrial().toString() },
 							})
 						}}
 					</n8n-text>
 				</template>
 			</i18n>
 		</div>
-		<div v-if="isTrialExpired" :class="$style.usageText">
+		<div v-if="isTrialExpired()" :class="$style.usageText">
 			<n8n-text size="xsmall" color="danger">
 				{{ locale.baseText('executionUsage.expired.text') }}
 			</n8n-text>
 		</div>
-		<div v-if="!trialHasExecutionsLeft" :class="$style.usageText">
+		<div v-if="!trialHasExecutionsLeft()" :class="$style.usageText">
 			<n8n-text size="xsmall">
 				{{ locale.baseText('executionUsage.ranOutOfExecutions.text') }}
 			</n8n-text>
 		</div>
-		<div v-if="!isTrialExpired" :class="$style.usageCounter">
+		<div v-if="!isTrialExpired()" :class="$style.usageCounter">
 			<div>
 				<progress
 					:class="[
-						trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
+						trialHasExecutionsLeft() ? $style.progressBarSuccess : $style.progressBarDanger,
 						$style.progressBar,
 					]"
-					:value="currentExecutions"
-					:max="maxExecutions"
+					:value="currentExecutions()"
+					:max="maxExecutions()"
 				></progress>
 			</div>
 			<div :class="$style.executionsCountSection">
-				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">
-					{{ currentExecutions }}/{{ maxExecutions }}
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft() ? 'text-dark' : 'danger'">
+					{{ currentExecutions() }}/{{ maxExecutions() }}
 				</n8n-text>
-				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">{{
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft() ? 'text-dark' : 'danger'">{{
 					locale.baseText('executionUsage.label.executions')
 				}}</n8n-text>
 			</div>
@@ -63,17 +63,16 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, computed } from 'vue';
 import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
 
 export interface CloudPlanData {
-	planSpec: PlanSpec;
+	plan: Plan;
 	instance: Instance;
 	usage: Usage;
 }
 
-export interface PlanSpec {
+export interface Plan {
 	planId: number;
 	monthlyExecutionsLimit: number;
 	activeWorkflowsLimit: number;
@@ -103,29 +102,33 @@ export interface Usage {
 
 const props = defineProps<{ cloudPlanData: CloudPlanData }>();
 
+const emit = defineEmits(['onUpgradePlanClicked']);
+
 const now = DateTime.utc();
 
-const daysLeftOnTrial = computed(() => {
+const daysLeftOnTrial = () => {
 	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
 	return Math.ceil(days);
-});
+};
 
-const isTrialExpired = computed(() => {
-	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.planSpec.expirationDate);
+const isTrialExpired = () => {
+	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.plan.expirationDate);
 	return now.toMillis() > trialEndsAt.toMillis();
-});
+};
 
-const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.planSpec.expirationDate);
+const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.plan.expirationDate);
 
-const trialHasExecutionsLeft = computed(
-	() => props.cloudPlanData.usage.executions < props.cloudPlanData.planSpec.monthlyExecutionsLimit,
-);
+const trialHasExecutionsLeft = () =>
+	props.cloudPlanData.usage.executions < props.cloudPlanData.plan.monthlyExecutionsLimit;
 
-const currentExecutions = computed(() => props.cloudPlanData.usage.executions);
+const currentExecutions = () => props.cloudPlanData.usage.executions;
 
-const maxExecutions = computed(() => props.cloudPlanData.planSpec.monthlyExecutionsLimit);
+const maxExecutions = () => props.cloudPlanData.plan.monthlyExecutionsLimit;
 
-const onUpgradeClicked = () => {};
+const onUpgradeClicked = () => {
+	console.log(1);
+	emit('onUpgradePlanClicked');
+};
 </script>
 
 <style module lang="scss">
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index ee5caaaff71bf..bb146cb47312c 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -117,7 +117,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 			};
 		},
 		userIsTrialing(): boolean {
-			return this.cloudPlan?.planSpec?.metadata?.slug === 'trial-1';
+			return this.cloudPlan?.plan?.metadata?.slug === 'trial-1';
 		},
 		currentPlanData(): CloudPlanData | null {
 			return this.cloudPlan;

From efb615b7663b42d731de576a9667af1b24001b18 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 17:07:37 -0400
Subject: [PATCH 17/52] Remove instance property as it's not needed anymore

---
 packages/editor-ui/src/Interface.ts                   | 4 ----
 packages/editor-ui/src/api/cloudPlans.ts              | 3 ---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 5 +----
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 8ece46bbdc78a..8a3eca3ce3a29 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1447,7 +1447,6 @@ export type VersionControlPreferences = {
 
 export interface CloudPlanData {
 	plan: Plan;
-	instance: Instance;
 	usage: Usage;
 }
 
@@ -1471,9 +1470,6 @@ export interface Trial {
 	length: number;
 	gracePeriod: number;
 }
-export interface Instance {
-	createdAt: string;
-}
 export interface Usage {
 	executions: number;
 	activeWorkflows: number;
diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index 9d194ea1c23f9..0098ebfddfe1f 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -23,9 +23,6 @@ export function getCurrentPlan(
 				},
 			},
 		},
-		instance: {
-			createdAt: '2023-05-01T01:47:47Z',
-		},
 		usage: {
 			executions: 100,
 			activeWorkflows: 10,
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 38bd0ed80ba33..31bcfdbb89f8b 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -68,7 +68,6 @@ import { DateTime } from 'luxon';
 
 export interface CloudPlanData {
 	plan: Plan;
-	instance: Instance;
 	usage: Usage;
 }
 
@@ -92,9 +91,7 @@ export interface Trial {
 	length: number;
 	gracePeriod: number;
 }
-export interface Instance {
-	createdAt: string;
-}
+
 export interface Usage {
 	executions: number;
 	activeWorkflows: number;

From c8a2fb48c204988cdf4d72c01ba9860497e3f421 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 17:22:57 -0400
Subject: [PATCH 18/52] Flatten plan object

---
 packages/editor-ui/src/App.vue                | 14 +++++----
 packages/editor-ui/src/Interface.ts           |  7 +----
 packages/editor-ui/src/api/cloudPlans.ts      | 30 +++++++++----------
 .../src/components/ExecutionsUsage.vue        | 14 ++++-----
 packages/editor-ui/src/stores/users.ts        |  2 +-
 5 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 5edf8e2519d73..056183dd9fce3 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -183,14 +183,16 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		},
 		checkForExecutionsCount() {
 			let acc = 0;
-			setInterval(async () => {
+			const interval = setInterval(async () => {
 				try {
-					const planData = await this.usersStore.getOwnerCurrentPLan();
-					if (planData.plan.metadata.slug === 'trial-1') {
-						planData.usage.executions += acc;
-						acc += 20;
-						this.usersStore.setCloudPLan(planData);
+					const plan = await this.usersStore.getOwnerCurrentPLan();
+					if (plan.metadata.slug !== 'trial-1') {
+						clearTimeout(interval);
 					}
+					// TODO: remove before releasing
+					plan.usage.executions += acc;
+					acc += 20;
+					this.usersStore.setCloudPLan(plan);
 				} catch {}
 			}, 5000);
 		},
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 8a3eca3ce3a29..0619f0a8f2477 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1444,13 +1444,7 @@ export type VersionControlPreferences = {
 	branchColor: string;
 	publicKey?: string;
 };
-
 export interface CloudPlanData {
-	plan: Plan;
-	usage: Usage;
-}
-
-export interface Plan {
 	planId: number;
 	monthlyExecutionsLimit: number;
 	activeWorkflowsLimit: number;
@@ -1459,6 +1453,7 @@ export interface Plan {
 	displayName: string;
 	expirationDate: string;
 	metadata: PlanMetadata;
+	usage: Usage;
 }
 export interface PlanMetadata {
 	version: 'v1';
diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index 0098ebfddfe1f..c3948292fd5e0 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -5,22 +5,20 @@ export function getCurrentPlan(
 	cloudUserId: string,
 ): Promise<CloudPlanData> {
 	return Promise.resolve({
-		plan: {
-			planId: 43039,
-			monthlyExecutionsLimit: 200,
-			activeWorkflowsLimit: 10,
-			credentialsLimit: 100,
-			isActive: false,
-			displayName: 'Trial',
-			expirationDate: '2023-05-06T01:47:47Z',
-			metadata: {
-				version: 'v1',
-				group: 'opt-in',
-				slug: 'trial-1',
-				trial: {
-					length: 7,
-					gracePeriod: 3,
-				},
+		planId: 43039,
+		monthlyExecutionsLimit: 200,
+		activeWorkflowsLimit: 10,
+		credentialsLimit: 100,
+		isActive: false,
+		displayName: 'Trial',
+		expirationDate: '2023-04-06T01:47:47Z',
+		metadata: {
+			version: 'v1',
+			group: 'opt-in',
+			slug: 'trial-1',
+			trial: {
+				length: 7,
+				gracePeriod: 3,
 			},
 		},
 		usage: {
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 31bcfdbb89f8b..eec497ed7d640 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -67,11 +67,6 @@ import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
 
 export interface CloudPlanData {
-	plan: Plan;
-	usage: Usage;
-}
-
-export interface Plan {
 	planId: number;
 	monthlyExecutionsLimit: number;
 	activeWorkflowsLimit: number;
@@ -80,6 +75,7 @@ export interface Plan {
 	displayName: string;
 	expirationDate: string;
 	metadata: PlanMetadata;
+	usage: Usage;
 }
 export interface PlanMetadata {
 	version: 'v1';
@@ -109,18 +105,18 @@ const daysLeftOnTrial = () => {
 };
 
 const isTrialExpired = () => {
-	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.plan.expirationDate);
+	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.expirationDate);
 	return now.toMillis() > trialEndsAt.toMillis();
 };
 
-const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.plan.expirationDate);
+const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.expirationDate);
 
 const trialHasExecutionsLeft = () =>
-	props.cloudPlanData.usage.executions < props.cloudPlanData.plan.monthlyExecutionsLimit;
+	props.cloudPlanData.usage.executions < props.cloudPlanData.monthlyExecutionsLimit;
 
 const currentExecutions = () => props.cloudPlanData.usage.executions;
 
-const maxExecutions = () => props.cloudPlanData.plan.monthlyExecutionsLimit;
+const maxExecutions = () => props.cloudPlanData.monthlyExecutionsLimit;
 
 const onUpgradeClicked = () => {
 	console.log(1);
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index bb146cb47312c..03b9cf1a4ba35 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -117,7 +117,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 			};
 		},
 		userIsTrialing(): boolean {
-			return this.cloudPlan?.plan?.metadata?.slug === 'trial-1';
+			return this.cloudPlan?.metadata?.slug === 'trial-1';
 		},
 		currentPlanData(): CloudPlanData | null {
 			return this.cloudPlan;

From d624c71b2479fb0d75bcffd9244761210afcffc8 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 4 May 2023 17:23:54 -0400
Subject: [PATCH 19/52] remove console.log

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index eec497ed7d640..daa68109ed431 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -119,7 +119,6 @@ const currentExecutions = () => props.cloudPlanData.usage.executions;
 const maxExecutions = () => props.cloudPlanData.monthlyExecutionsLimit;
 
 const onUpgradeClicked = () => {
-	console.log(1);
 	emit('onUpgradePlanClicked');
 };
 </script>

From 17294c81f85bfa1d38267713041e183bfb5969bc Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 14:34:36 -0400
Subject: [PATCH 20/52] Add all cloud types within its own namespace

---
 packages/editor-ui/src/Interface.ts           | 82 +++++++++++++------
 packages/editor-ui/src/api/cloudPlans.ts      |  4 +-
 .../src/components/ExecutionsUsage.vue        | 28 +------
 .../editor-ui/src/components/MainSidebar.vue  |  4 +-
 packages/editor-ui/src/stores/users.ts        |  8 +-
 5 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 0619f0a8f2477..a9ea4a8b182b6 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1171,7 +1171,7 @@ export interface IVersionsState {
 export interface IUsersState {
 	currentUserId: null | string;
 	users: { [userId: string]: IUser };
-	cloudPlan: CloudPlanData | null;
+	cloudPlan: Cloud.PlanData | null;
 }
 
 export interface IWorkflowsState {
@@ -1444,28 +1444,60 @@ export type VersionControlPreferences = {
 	branchColor: string;
 	publicKey?: string;
 };
-export interface CloudPlanData {
-	planId: number;
-	monthlyExecutionsLimit: number;
-	activeWorkflowsLimit: number;
-	credentialsLimit: number;
-	isActive: boolean;
-	displayName: string;
-	expirationDate: string;
-	metadata: PlanMetadata;
-	usage: Usage;
-}
-export interface PlanMetadata {
-	version: 'v1';
-	group: 'opt-out' | 'opt-in';
-	slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
-	trial?: Trial;
-}
-export interface Trial {
-	length: number;
-	gracePeriod: number;
-}
-export interface Usage {
-	executions: number;
-	activeWorkflows: number;
+
+export declare namespace Cloud {
+	export interface PlanData {
+		planId: number;
+		monthlyExecutionsLimit: number;
+		activeWorkflowsLimit: number;
+		credentialsLimit: number;
+		isActive: boolean;
+		displayName: string;
+		expirationDate: string;
+		metadata: PlanMetadata;
+		usage: PlanUsage;
+	}
+
+	export interface PlanMetadata {
+		version: 'v1';
+		group: 'opt-out' | 'opt-in';
+		slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
+		trial?: Trial;
+	}
+
+	export interface PlanUsage {
+		executions: number;
+		activeWorkflows: number;
+	}
+
+	interface Trial {
+		length: number;
+		gracePeriod: number;
+	}
 }
+
+// export interface CloudPlanData {
+// 	planId: number;
+// 	monthlyExecutionsLimit: number;
+// 	activeWorkflowsLimit: number;
+// 	credentialsLimit: number;
+// 	isActive: boolean;
+// 	displayName: string;
+// 	expirationDate: string;
+// 	metadata: PlanMetadata;
+// 	usage: Usage;
+// }
+// export interface PlanMetadata {
+// 	version: 'v1';
+// 	group: 'opt-out' | 'opt-in';
+// 	slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
+// 	trial?: Trial;
+// }
+// export interface Trial {
+// 	length: number;
+// 	gracePeriod: number;
+// }
+// export interface Usage {
+// 	executions: number;
+// 	activeWorkflows: number;
+// }
diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index c3948292fd5e0..baab29ef18f1e 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -1,9 +1,9 @@
-import type { CloudPlanData, IRestApiContext } from '@/Interface';
+import type { Cloud, IRestApiContext } from '@/Interface';
 
 export function getCurrentPlan(
 	context: IRestApiContext,
 	cloudUserId: string,
-): Promise<CloudPlanData> {
+): Promise<Cloud.PlanData> {
 	return Promise.resolve({
 		planId: 43039,
 		monthlyExecutionsLimit: 200,
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index daa68109ed431..3ccc102581ed1 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -65,33 +65,9 @@
 <script setup lang="ts">
 import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
+import type { Cloud } from '@/Interface';
 
-export interface CloudPlanData {
-	planId: number;
-	monthlyExecutionsLimit: number;
-	activeWorkflowsLimit: number;
-	credentialsLimit: number;
-	isActive: boolean;
-	displayName: string;
-	expirationDate: string;
-	metadata: PlanMetadata;
-	usage: Usage;
-}
-export interface PlanMetadata {
-	version: 'v1';
-	group: 'opt-out' | 'opt-in';
-	slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
-	trial?: Trial;
-}
-export interface Trial {
-	length: number;
-	gracePeriod: number;
-}
-
-export interface Usage {
-	executions: number;
-	activeWorkflows: number;
-}
+type CloudPlanData = Cloud.PlanData & { metadata: Cloud.PlanMetadata; usage: Cloud.PlanUsage };
 
 const props = defineProps<{ cloudPlanData: CloudPlanData }>();
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index f04366f05473f..1c018e8bfa15c 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -117,7 +117,7 @@
 </template>
 
 <script lang="ts">
-import type { CloudPlanData, IExecutionResponse, IMenuItem, IVersion } from '../Interface';
+import type { Cloud, IExecutionResponse, IMenuItem, IVersion } from '../Interface';
 
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
@@ -343,7 +343,7 @@ export default mixins(
 		userIsTrialing(): boolean {
 			return this.usersStore.userIsTrialing;
 		},
-		currentPlanData(): CloudPlanData {
+		currentPlanData(): Cloud.PlanData {
 			return this.usersStore.currentPlanData;
 		},
 	},
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index 03b9cf1a4ba35..135802068e181 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -23,7 +23,7 @@ import {
 import { getCurrentPlan } from '@/api/cloudPlans';
 import { PERSONALIZATION_MODAL_KEY, USER_ACTIVATION_SURVEY_MODAL, STORES } from '@/constants';
 import type {
-	CloudPlanData,
+	Cloud,
 	ICredentialsResponse,
 	IInviteResponse,
 	IPersonalizationLatestVersion,
@@ -119,7 +119,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 		userIsTrialing(): boolean {
 			return this.cloudPlan?.metadata?.slug === 'trial-1';
 		},
-		currentPlanData(): CloudPlanData | null {
+		currentPlanData(): Cloud.PlanData | null {
 			return this.cloudPlan;
 		},
 	},
@@ -146,7 +146,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 		deleteUserById(userId: string): void {
 			Vue.delete(this.users, userId);
 		},
-		setCloudPLan(plan: CloudPlanData) {
+		setCloudPLan(plan: Cloud.PlanData) {
 			this.cloudPlan = plan;
 		},
 		setPersonalizationAnswers(answers: IPersonalizationLatestVersion): void {
@@ -332,7 +332,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				await skipOwnerSetup(rootStore.getRestApiContext);
 			} catch (error) {}
 		},
-		async getOwnerCurrentPLan(): Promise<CloudPlanData> {
+		async getOwnerCurrentPLan(): Promise<Cloud.PlanData> {
 			const settingsStore = useSettingsStore();
 			// TODO: uncomment before releasing
 			// const cloudUserId = settingsStore.settings.n8nMetadata?.userId;

From 6eef98597b07b8e966f2ae918297fd1a08d5863c Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 14:44:27 -0400
Subject: [PATCH 21/52] keep redirection inside component

---
 .../src/components/ExecutionsUsage.vue        | 11 ++++++++---
 .../editor-ui/src/components/MainSidebar.vue  | 19 ++-----------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 3ccc102581ed1..85ec45be1184f 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -66,15 +66,17 @@
 import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
 import type { Cloud } from '@/Interface';
+import { useSettingsStore } from '@/stores';
+import { CHANGE_PLAN_PAGE_PRODUCTION, CHANGE_PLAN_PAGE_STAGING } from '@/constants';
 
 type CloudPlanData = Cloud.PlanData & { metadata: Cloud.PlanMetadata; usage: Cloud.PlanUsage };
 
 const props = defineProps<{ cloudPlanData: CloudPlanData }>();
 
-const emit = defineEmits(['onUpgradePlanClicked']);
-
 const now = DateTime.utc();
 
+const settingsStore = useSettingsStore();
+
 const daysLeftOnTrial = () => {
 	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
 	return Math.ceil(days);
@@ -95,7 +97,10 @@ const currentExecutions = () => props.cloudPlanData.usage.executions;
 const maxExecutions = () => props.cloudPlanData.monthlyExecutionsLimit;
 
 const onUpgradeClicked = () => {
-	emit('onUpgradePlanClicked');
+	location.href =
+		settingsStore.settings.license.environment === 'production'
+			? CHANGE_PLAN_PAGE_PRODUCTION
+			: CHANGE_PLAN_PAGE_STAGING;
 };
 </script>
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 1c018e8bfa15c..269c14d590913 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -27,10 +27,7 @@
 			</template>
 
 			<template #beforeLowerMenu>
-				<ExecutionsUsage
-					:cloud-plan-data="currentPlanData"
-					v-if="!isCollapsed && userIsTrialing"
-					@onUpgradePlanClicked="onUpgradePlanClicked"
+				<ExecutionsUsage :cloud-plan-data="currentPlanData" v-if="!isCollapsed && userIsTrialing"
 			/></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
@@ -128,13 +125,7 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { workflowRun } from '@/mixins/workflowRun';
 
 import mixins from 'vue-typed-mixins';
-import {
-	ABOUT_MODAL_KEY,
-	CHANGE_PLAN_PAGE_PRODUCTION,
-	CHANGE_PLAN_PAGE_STAGING,
-	VERSIONS_MODAL_KEY,
-	VIEWS,
-} from '@/constants';
+import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from '@/mixins/userHelpers';
 import { debounceHelper } from '@/mixins/debounce';
 import Vue from 'vue';
@@ -525,12 +516,6 @@ export default mixins(
 				this.versionControlStore.sync({ commitMessage: prompt.value });
 			}
 		},
-		onUpgradePlanClicked() {
-			location.href =
-				this.settingsStore.settings.license.environment === 'production'
-					? CHANGE_PLAN_PAGE_PRODUCTION
-					: CHANGE_PLAN_PAGE_STAGING;
-		},
 	},
 });
 </script>

From 3d0d2ba3ebc9c0afafa3a81cb68f549512eb7cee Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 14:52:37 -0400
Subject: [PATCH 22/52] get computed properties back

---
 packages/editor-ui/src/api/cloudPlans.ts      |  2 +-
 .../src/components/ExecutionsUsage.vue        | 40 ++++++++++---------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index baab29ef18f1e..274fd1dde231d 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -11,7 +11,7 @@ export function getCurrentPlan(
 		credentialsLimit: 100,
 		isActive: false,
 		displayName: 'Trial',
-		expirationDate: '2023-04-06T01:47:47Z',
+		expirationDate: '2023-05-10T01:47:47Z',
 		metadata: {
 			version: 'v1',
 			group: 'opt-in',
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 85ec45be1184f..875ced53d3b4f 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.container">
-		<div v-if="!isTrialExpired() && trialHasExecutionsLeft()" :class="$style.usageText">
+		<div v-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
 			<i18n path="executionUsage.currentUsage">
 				<template #text>
 					<n8n-text size="xsmall" color="text-dark">
@@ -11,39 +11,39 @@
 					<n8n-text size="xsmall" :bold="true" color="warning">
 						{{
 							locale.baseText('executionUsage.currentUsage.count', {
-								interpolate: { days: daysLeftOnTrial().toString() },
+								interpolate: { days: daysLeftOnTrial.toString() },
 							})
 						}}
 					</n8n-text>
 				</template>
 			</i18n>
 		</div>
-		<div v-if="isTrialExpired()" :class="$style.usageText">
+		<div v-if="isTrialExpired" :class="$style.usageText">
 			<n8n-text size="xsmall" color="danger">
 				{{ locale.baseText('executionUsage.expired.text') }}
 			</n8n-text>
 		</div>
-		<div v-if="!trialHasExecutionsLeft()" :class="$style.usageText">
+		<div v-if="!trialHasExecutionsLeft" :class="$style.usageText">
 			<n8n-text size="xsmall">
 				{{ locale.baseText('executionUsage.ranOutOfExecutions.text') }}
 			</n8n-text>
 		</div>
-		<div v-if="!isTrialExpired()" :class="$style.usageCounter">
+		<div v-if="!isTrialExpired" :class="$style.usageCounter">
 			<div>
 				<progress
 					:class="[
-						trialHasExecutionsLeft() ? $style.progressBarSuccess : $style.progressBarDanger,
+						trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
 						$style.progressBar,
 					]"
-					:value="currentExecutions()"
-					:max="maxExecutions()"
+					:value="currentExecutions"
+					:max="maxExecutions"
 				></progress>
 			</div>
 			<div :class="$style.executionsCountSection">
-				<n8n-text size="xsmall" :color="trialHasExecutionsLeft() ? 'text-dark' : 'danger'">
-					{{ currentExecutions() }}/{{ maxExecutions() }}
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">
+					{{ currentExecutions }}/{{ maxExecutions }}
 				</n8n-text>
-				<n8n-text size="xsmall" :color="trialHasExecutionsLeft() ? 'text-dark' : 'danger'">{{
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">{{
 					locale.baseText('executionUsage.label.executions')
 				}}</n8n-text>
 			</div>
@@ -68,6 +68,7 @@ import { DateTime } from 'luxon';
 import type { Cloud } from '@/Interface';
 import { useSettingsStore } from '@/stores';
 import { CHANGE_PLAN_PAGE_PRODUCTION, CHANGE_PLAN_PAGE_STAGING } from '@/constants';
+import { computed } from 'vue';
 
 type CloudPlanData = Cloud.PlanData & { metadata: Cloud.PlanMetadata; usage: Cloud.PlanUsage };
 
@@ -77,24 +78,25 @@ const now = DateTime.utc();
 
 const settingsStore = useSettingsStore();
 
-const daysLeftOnTrial = () => {
+const daysLeftOnTrial = computed(() => {
 	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
 	return Math.ceil(days);
-};
+});
 
-const isTrialExpired = () => {
+const isTrialExpired = computed(() => {
 	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.expirationDate);
 	return now.toMillis() > trialEndsAt.toMillis();
-};
+});
 
 const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.expirationDate);
 
-const trialHasExecutionsLeft = () =>
-	props.cloudPlanData.usage.executions < props.cloudPlanData.monthlyExecutionsLimit;
+const trialHasExecutionsLeft = computed(
+	() => props.cloudPlanData.usage.executions < props.cloudPlanData.monthlyExecutionsLimit,
+);
 
-const currentExecutions = () => props.cloudPlanData.usage.executions;
+const currentExecutions = computed(() => props.cloudPlanData.usage.executions);
 
-const maxExecutions = () => props.cloudPlanData.monthlyExecutionsLimit;
+const maxExecutions = computed(() => props.cloudPlanData.monthlyExecutionsLimit);
 
 const onUpgradeClicked = () => {
 	location.href =

From 90c855665aea65f1ba0c6f81474fba57f644b51d Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 15:20:28 -0400
Subject: [PATCH 23/52] Improve polling logic

---
 packages/editor-ui/src/App.vue      | 25 ++++++++++++++++++++-----
 packages/editor-ui/src/constants.ts |  2 ++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 056183dd9fce3..79575f0512f4f 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -30,7 +30,7 @@
 import Modals from './components/Modals.vue';
 import LoadingView from './views/LoadingView.vue';
 import Telemetry from './components/Telemetry.vue';
-import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
+import { CLOUD_TRIAL_CHECK_INTERVAL, HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
 
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
@@ -48,6 +48,7 @@ import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl';
+import { DateTime } from 'luxon';
 
 export default mixins(newVersions, showMessage, userHelpers).extend({
 	name: 'App',
@@ -181,20 +182,34 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 				window.document.body.classList.add(`theme-${theme}`);
 			}
 		},
-		checkForExecutionsCount() {
+		async monitorExecutionUsageOnCloudPlan() {
+			try {
+				const plan = await this.usersStore.getOwnerCurrentPLan();
+				if (!plan.metadata.slug.includes('trial')) return;
+				this.usersStore.setCloudPLan(plan);
+				this.startPollingPlanData();
+			} catch {}
+		},
+		startPollingPlanData() {
+			// TODO: remove before releasing
 			let acc = 0;
 			const interval = setInterval(async () => {
 				try {
 					const plan = await this.usersStore.getOwnerCurrentPLan();
-					if (plan.metadata.slug !== 'trial-1') {
+					const trialExpired =
+						DateTime.now().toMillis() >= DateTime.fromISO(plan.expirationDate).toMillis();
+					const allExecutionsUsed = plan.usage.executions === plan.monthlyExecutionsLimit;
+
+					if (trialExpired || allExecutionsUsed) {
 						clearTimeout(interval);
+						return;
 					}
 					// TODO: remove before releasing
 					plan.usage.executions += acc;
 					acc += 20;
 					this.usersStore.setCloudPLan(plan);
 				} catch {}
-			}, 5000);
+			}, CLOUD_TRIAL_CHECK_INTERVAL);
 		},
 	},
 	async mounted() {
@@ -204,7 +219,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		this.authenticate();
 		this.redirectIfNecessary();
 		this.checkForNewVersions();
-		this.checkForExecutionsCount();
+		this.monitorExecutionUsageOnCloudPlan();
 
 		this.loading = false;
 
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 0e88fe5698172..12840182111c5 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -552,3 +552,5 @@ export const ALLOWED_HTML_TAGS = [
 export const CHANGE_PLAN_PAGE_PRODUCTION = 'https://app.n8n.cloud/account/change-plan';
 
 export const CHANGE_PLAN_PAGE_STAGING = 'https://stage-app.n8n.cloud/account/change-plan';
+
+export const CLOUD_TRIAL_CHECK_INTERVAL = 5000;

From 2fbb1e72f8211b04606df936e1a9f1253a0d2320 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 16:52:06 -0400
Subject: [PATCH 24/52] Move cloudData to its own store

---
 packages/editor-ui/src/App.vue                | 10 +--
 packages/editor-ui/src/Interface.ts           |  4 ++
 .../editor-ui/src/components/MainSidebar.vue  |  6 +-
 packages/editor-ui/src/stores/cloudPlan.ts    | 61 +++++++++++++++++++
 packages/editor-ui/src/stores/index.ts        |  1 +
 packages/editor-ui/src/stores/users.ts        | 20 ------
 6 files changed, 76 insertions(+), 26 deletions(-)
 create mode 100644 packages/editor-ui/src/stores/cloudPlan.ts

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 79575f0512f4f..59d3421c8316e 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -41,6 +41,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from './stores/ui';
 import { useSettingsStore } from './stores/settings';
 import { useUsersStore } from './stores/users';
+import { useCloudPlanStore } from './stores/cloudPlan';
 import { useRootStore } from './stores/n8nRootStore';
 import { useTemplatesStore } from './stores/templates';
 import { useNodeTypesStore } from './stores/nodeTypes';
@@ -72,6 +73,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			useUIStore,
 			useUsersStore,
 			useVersionControlStore,
+			useCloudPlanStore,
 		),
 		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
@@ -184,9 +186,9 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		},
 		async monitorExecutionUsageOnCloudPlan() {
 			try {
-				const plan = await this.usersStore.getOwnerCurrentPLan();
+				const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
 				if (!plan.metadata.slug.includes('trial')) return;
-				this.usersStore.setCloudPLan(plan);
+				this.cloudPlanStore.setData(plan);
 				this.startPollingPlanData();
 			} catch {}
 		},
@@ -195,7 +197,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			let acc = 0;
 			const interval = setInterval(async () => {
 				try {
-					const plan = await this.usersStore.getOwnerCurrentPLan();
+					const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
 					const trialExpired =
 						DateTime.now().toMillis() >= DateTime.fromISO(plan.expirationDate).toMillis();
 					const allExecutionsUsed = plan.usage.executions === plan.monthlyExecutionsLimit;
@@ -207,7 +209,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 					// TODO: remove before releasing
 					plan.usage.executions += acc;
 					acc += 20;
-					this.usersStore.setCloudPLan(plan);
+					this.cloudPlanStore.setData(plan);
 				} catch {}
 			}, CLOUD_TRIAL_CHECK_INTERVAL);
 		},
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index a9ea4a8b182b6..b538da9341e79 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1476,6 +1476,10 @@ export declare namespace Cloud {
 	}
 }
 
+export interface CloudPlanState {
+	data: Cloud.PlanData;
+}
+
 // export interface CloudPlanData {
 // 	planId: number;
 // 	monthlyExecutionsLimit: number;
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 269c14d590913..bb4630878bc92 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -139,6 +139,7 @@ import { useVersionsStore } from '@/stores/versions';
 import { isNavigationFailure } from 'vue-router';
 import { useVersionControlStore } from '@/stores/versionControl';
 import ExecutionsUsage from '@/components/ExecutionsUsage.vue';
+import { useCloudPlanStore } from '@/stores/cloudPlan';
 
 export default mixins(
 	genericHelpers,
@@ -169,6 +170,7 @@ export default mixins(
 			useVersionsStore,
 			useWorkflowsStore,
 			useVersionControlStore,
+			useCloudPlanStore,
 		),
 		currentBranch(): string {
 			return this.versionControlStore.state.currentBranch;
@@ -332,10 +334,10 @@ export default mixins(
 			return [...items, ...regularItems];
 		},
 		userIsTrialing(): boolean {
-			return this.usersStore.userIsTrialing;
+			return this.cloudPlanStore.userIsTrialing;
 		},
 		currentPlanData(): Cloud.PlanData {
-			return this.usersStore.currentPlanData;
+			return this.cloudPlanStore.currentPlanData;
 		},
 	},
 	async mounted() {
diff --git a/packages/editor-ui/src/stores/cloudPlan.ts b/packages/editor-ui/src/stores/cloudPlan.ts
new file mode 100644
index 0000000000000..5d9db7cd7e974
--- /dev/null
+++ b/packages/editor-ui/src/stores/cloudPlan.ts
@@ -0,0 +1,61 @@
+import { computed, reactive } from 'vue';
+import { defineStore } from 'pinia';
+import type { CloudPlanState } from '@/Interface';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { getCurrentPlan } from '@/api/cloudPlans';
+
+const DEFAULT_STATE: CloudPlanState = {
+	data: {
+		planId: 0,
+		monthlyExecutionsLimit: 0,
+		activeWorkflowsLimit: 0,
+		credentialsLimit: 0,
+		isActive: false,
+		displayName: '',
+		expirationDate: '',
+		metadata: {
+			version: 'v1',
+			group: 'opt-in',
+			slug: 'trial-1',
+		},
+		usage: {
+			executions: 0,
+			activeWorkflows: 0,
+		},
+	},
+};
+
+export const useCloudPlanStore = defineStore('cloudPlan', () => {
+	const rootStore = useRootStore();
+	const settingsStore = useSettingsStore();
+	const usersStore = useUsersStore();
+
+	const state = reactive<CloudPlanState>(DEFAULT_STATE);
+
+	const setData = (data: CloudPlanState['data']) => {
+		state.data = data;
+	};
+
+	const userIsTrialing = computed(() => state.data?.metadata.slug.includes('trial'));
+
+	const currentPlanData = computed(() => state.data);
+
+	const getOwnerCurrentPLan = async () => {
+		// TODO: uncomment before releasing
+		// const cloudUserId = settingsStore.settings.n8nMetadata?.userId;
+		const cloudUserId = '123';
+		const hasCloudPlan =
+			usersStore.currentUser?.isOwner && settingsStore.isCloudDeployment && cloudUserId;
+		if (!hasCloudPlan) throw new Error('User does not have a cloud plan');
+		return getCurrentPlan(rootStore.getRestApiContext, cloudUserId as string);
+	};
+
+	return {
+		setData,
+		getOwnerCurrentPLan,
+		userIsTrialing,
+		currentPlanData,
+	};
+});
diff --git a/packages/editor-ui/src/stores/index.ts b/packages/editor-ui/src/stores/index.ts
index 927ff1ae2961f..9338bb2af6b79 100644
--- a/packages/editor-ui/src/stores/index.ts
+++ b/packages/editor-ui/src/stores/index.ts
@@ -21,3 +21,4 @@ export * from './versions';
 export * from './webhooks';
 export * from './workflows.ee';
 export * from './workflows';
+export * from './cloudPlan';
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index 135802068e181..63d9238ab1054 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -116,12 +116,6 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				return permissions.use;
 			};
 		},
-		userIsTrialing(): boolean {
-			return this.cloudPlan?.metadata?.slug === 'trial-1';
-		},
-		currentPlanData(): Cloud.PlanData | null {
-			return this.cloudPlan;
-		},
 	},
 	actions: {
 		addUsers(users: IUserResponse[]) {
@@ -146,9 +140,6 @@ export const useUsersStore = defineStore(STORES.USERS, {
 		deleteUserById(userId: string): void {
 			Vue.delete(this.users, userId);
 		},
-		setCloudPLan(plan: Cloud.PlanData) {
-			this.cloudPlan = plan;
-		},
 		setPersonalizationAnswers(answers: IPersonalizationLatestVersion): void {
 			if (!this.currentUser) {
 				return;
@@ -332,16 +323,5 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				await skipOwnerSetup(rootStore.getRestApiContext);
 			} catch (error) {}
 		},
-		async getOwnerCurrentPLan(): Promise<Cloud.PlanData> {
-			const settingsStore = useSettingsStore();
-			// TODO: uncomment before releasing
-			// const cloudUserId = settingsStore.settings.n8nMetadata?.userId;
-			const cloudUserId = '123';
-			const hasCloudPlan =
-				this.currentUser?.isOwner && settingsStore.isCloudDeployment && cloudUserId;
-			if (!hasCloudPlan) throw new Error('User does not have a cloud plan');
-			const rootStore = useRootStore();
-			return getCurrentPlan(rootStore.getRestApiContext, cloudUserId as string);
-		},
 	},
 });

From b76586774a5ab9a8549a976be74bae567e1e88a8 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 16:52:35 -0400
Subject: [PATCH 25/52] Remove commented interfaces

---
 packages/editor-ui/src/Interface.ts | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index b538da9341e79..9d875d62b9c13 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1479,29 +1479,3 @@ export declare namespace Cloud {
 export interface CloudPlanState {
 	data: Cloud.PlanData;
 }
-
-// export interface CloudPlanData {
-// 	planId: number;
-// 	monthlyExecutionsLimit: number;
-// 	activeWorkflowsLimit: number;
-// 	credentialsLimit: number;
-// 	isActive: boolean;
-// 	displayName: string;
-// 	expirationDate: string;
-// 	metadata: PlanMetadata;
-// 	usage: Usage;
-// }
-// export interface PlanMetadata {
-// 	version: 'v1';
-// 	group: 'opt-out' | 'opt-in';
-// 	slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
-// 	trial?: Trial;
-// }
-// export interface Trial {
-// 	length: number;
-// 	gracePeriod: number;
-// }
-// export interface Usage {
-// 	executions: number;
-// 	activeWorkflows: number;
-// }

From 807a797e148afa456ee265cc8f624949cb8c4cab Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 16:56:10 -0400
Subject: [PATCH 26/52] remove cloudPlan from user store

---
 packages/editor-ui/src/Interface.ts    | 1 -
 packages/editor-ui/src/stores/users.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 9d875d62b9c13..bb6302e3524f6 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1171,7 +1171,6 @@ export interface IVersionsState {
 export interface IUsersState {
 	currentUserId: null | string;
 	users: { [userId: string]: IUser };
-	cloudPlan: Cloud.PlanData | null;
 }
 
 export interface IWorkflowsState {
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index 63d9238ab1054..ac2a44c3db5bb 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -53,7 +53,6 @@ export const useUsersStore = defineStore(STORES.USERS, {
 	state: (): IUsersState => ({
 		currentUserId: null,
 		users: {},
-		cloudPlan: null,
 	}),
 	getters: {
 		allUsers(): IUser[] {

From b782e0e5450e68f1644197fd57f166cb59a72b3b Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 6 May 2023 17:05:08 -0400
Subject: [PATCH 27/52] fix imports

---
 packages/editor-ui/src/stores/cloudPlan.store.ts | 6 +++---
 packages/editor-ui/src/stores/users.store.ts     | 2 --
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index 5d9db7cd7e974..e281dfb5125b5 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -1,9 +1,9 @@
 import { computed, reactive } from 'vue';
 import { defineStore } from 'pinia';
 import type { CloudPlanState } from '@/Interface';
-import { useRootStore } from '@/stores/n8nRootStore';
-import { useSettingsStore } from '@/stores/settings';
-import { useUsersStore } from '@/stores/users';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
 import { getCurrentPlan } from '@/api/cloudPlans';
 
 const DEFAULT_STATE: CloudPlanState = {
diff --git a/packages/editor-ui/src/stores/users.store.ts b/packages/editor-ui/src/stores/users.store.ts
index c95dd36303291..8f2c568cf47ff 100644
--- a/packages/editor-ui/src/stores/users.store.ts
+++ b/packages/editor-ui/src/stores/users.store.ts
@@ -20,10 +20,8 @@ import {
 	validatePasswordToken,
 	validateSignupToken,
 } from '@/api/users';
-import { getCurrentPlan } from '@/api/cloudPlans';
 import { PERSONALIZATION_MODAL_KEY, USER_ACTIVATION_SURVEY_MODAL, STORES } from '@/constants';
 import type {
-	Cloud,
 	ICredentialsResponse,
 	IInviteResponse,
 	IPersonalizationLatestVersion,

From cfb921d62eb8659b5bfeadbd4e405896efe6db8f Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Mon, 8 May 2023 22:18:03 -0400
Subject: [PATCH 28/52] update logic for userIsTrialing method

---
 packages/editor-ui/src/stores/cloudPlan.store.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index e281dfb5125b5..dda437f0e7b82 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -38,7 +38,9 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		state.data = data;
 	};
 
-	const userIsTrialing = computed(() => state.data?.metadata.slug.includes('trial'));
+	const userIsTrialing = computed(
+		() => state.data?.metadata.group === 'opt-out' && state.data?.expirationDate,
+	);
 
 	const currentPlanData = computed(() => state.data);
 

From ae0949cac956ff13a0ed5b7a4ca3f4ff39d6d961 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Mon, 8 May 2023 22:59:33 -0400
Subject: [PATCH 29/52] centralize userIsTrialing method

---
 packages/editor-ui/src/App.vue                           | 4 +++-
 packages/editor-ui/src/composables/useCloudPlanHelper.ts | 8 ++++++++
 packages/editor-ui/src/stores/cloudPlan.store.ts         | 6 +++---
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 packages/editor-ui/src/composables/useCloudPlanHelper.ts

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 78ca3ca7a6678..e57d97f0a02fd 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -50,6 +50,7 @@ import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl.store';
 import { DateTime } from 'luxon';
+import { useCloudPlanHelper } from './composables/useCloudPlanHelper';
 
 export default mixins(newVersions, showMessage, userHelpers).extend({
 	name: 'App',
@@ -185,9 +186,10 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			}
 		},
 		async monitorExecutionUsageOnCloudPlan() {
+			const { userIsTrialing } = useCloudPlanHelper();
 			try {
 				const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
-				if (!plan.metadata.slug.includes('trial')) return;
+				if (!userIsTrialing(plan.metadata)) return;
 				this.cloudPlanStore.setData(plan);
 				this.startPollingPlanData();
 			} catch {}
diff --git a/packages/editor-ui/src/composables/useCloudPlanHelper.ts b/packages/editor-ui/src/composables/useCloudPlanHelper.ts
new file mode 100644
index 0000000000000..55df2d6a7077b
--- /dev/null
+++ b/packages/editor-ui/src/composables/useCloudPlanHelper.ts
@@ -0,0 +1,8 @@
+import type { Cloud } from '@/Interface';
+
+export function useCloudPlanHelper() {
+	return {
+		userIsTrialing: (metadata: Cloud.PlanMetadata) =>
+			metadata?.trial && metadata?.group === 'opt-in',
+	};
+}
diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index dda437f0e7b82..c759d43e4d7e1 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -5,6 +5,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { getCurrentPlan } from '@/api/cloudPlans';
+import { useCloudPlanHelper } from '@/composables/useCloudPlanHelper';
 
 const DEFAULT_STATE: CloudPlanState = {
 	data: {
@@ -31,6 +32,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
 	const usersStore = useUsersStore();
+	const { userIsTrialing: _userIsTrialing } = useCloudPlanHelper();
 
 	const state = reactive<CloudPlanState>(DEFAULT_STATE);
 
@@ -38,9 +40,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		state.data = data;
 	};
 
-	const userIsTrialing = computed(
-		() => state.data?.metadata.group === 'opt-out' && state.data?.expirationDate,
-	);
+	const userIsTrialing = computed(() => _userIsTrialing(state.data?.metadata));
 
 	const currentPlanData = computed(() => state.data);
 

From e1353b42c8ef8cd9496c6757a9f2f2cd9c1ddcac Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Mon, 8 May 2023 23:02:01 -0400
Subject: [PATCH 30/52] redirect to production change plan page always

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 7 ++-----
 packages/editor-ui/src/constants.ts                   | 4 +---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 875ced53d3b4f..6507b2b8cd26c 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -67,7 +67,7 @@ import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
 import type { Cloud } from '@/Interface';
 import { useSettingsStore } from '@/stores';
-import { CHANGE_PLAN_PAGE_PRODUCTION, CHANGE_PLAN_PAGE_STAGING } from '@/constants';
+import { CHANGE_PLAN_PAGE } from '@/constants';
 import { computed } from 'vue';
 
 type CloudPlanData = Cloud.PlanData & { metadata: Cloud.PlanMetadata; usage: Cloud.PlanUsage };
@@ -99,10 +99,7 @@ const currentExecutions = computed(() => props.cloudPlanData.usage.executions);
 const maxExecutions = computed(() => props.cloudPlanData.monthlyExecutionsLimit);
 
 const onUpgradeClicked = () => {
-	location.href =
-		settingsStore.settings.license.environment === 'production'
-			? CHANGE_PLAN_PAGE_PRODUCTION
-			: CHANGE_PLAN_PAGE_STAGING;
+	location.href = CHANGE_PLAN_PAGE;
 };
 </script>
 
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 12840182111c5..fd1030fcc11bd 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -549,8 +549,6 @@ export const ALLOWED_HTML_TAGS = [
 	'summary',
 ];
 
-export const CHANGE_PLAN_PAGE_PRODUCTION = 'https://app.n8n.cloud/account/change-plan';
-
-export const CHANGE_PLAN_PAGE_STAGING = 'https://stage-app.n8n.cloud/account/change-plan';
+export const CHANGE_PLAN_PAGE = 'https://app.n8n.cloud/account/change-plan';
 
 export const CLOUD_TRIAL_CHECK_INTERVAL = 5000;

From be626dc9ae5b14b5ae07f33ef9ceddf19670db4b Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Mon, 8 May 2023 23:15:42 -0400
Subject: [PATCH 31/52] Call staging or production cloud api depending on base
 URL

---
 packages/editor-ui/src/constants.ts              |  4 ++++
 packages/editor-ui/src/stores/cloudPlan.store.ts |  2 +-
 packages/editor-ui/src/stores/n8nRoot.store.ts   | 16 +++++++++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index fd1030fcc11bd..3249bfc9ea617 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -551,4 +551,8 @@ export const ALLOWED_HTML_TAGS = [
 
 export const CHANGE_PLAN_PAGE = 'https://app.n8n.cloud/account/change-plan';
 
+export const CLOUD_BASE_URL_STAGING = 'https://stage-app.n8n.cloud';
+
+export const CLOUD_BASE_URL_PRODUCTION = 'https://app.n8n.cloud';
+
 export const CLOUD_TRIAL_CHECK_INTERVAL = 5000;
diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index c759d43e4d7e1..59510ece6d299 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -51,7 +51,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		const hasCloudPlan =
 			usersStore.currentUser?.isOwner && settingsStore.isCloudDeployment && cloudUserId;
 		if (!hasCloudPlan) throw new Error('User does not have a cloud plan');
-		return getCurrentPlan(rootStore.getRestApiContext, cloudUserId as string);
+		return getCurrentPlan(rootStore.getRestCloudApiContext, cloudUserId as string);
 	};
 
 	return {
diff --git a/packages/editor-ui/src/stores/n8nRoot.store.ts b/packages/editor-ui/src/stores/n8nRoot.store.ts
index 1c9932a77a1ba..4f1e3acb251cc 100644
--- a/packages/editor-ui/src/stores/n8nRoot.store.ts
+++ b/packages/editor-ui/src/stores/n8nRoot.store.ts
@@ -1,4 +1,9 @@
-import { STORES } from '@/constants';
+import {
+	CLOUD_BASE_URL_PRODUCTION,
+	CLOUD_BASE_URL_STAGING,
+	CLOUD_BASE_URL_STAGING,
+	STORES,
+} from '@/constants';
 import type { IRestApiContext, RootState } from '@/Interface';
 import type { IDataObject } from 'n8n-workflow';
 import { defineStore } from 'pinia';
@@ -48,6 +53,15 @@ export const useRootStore = defineStore(STORES.ROOT, {
 			return `${this.baseUrl}${this.restEndpoint}`;
 		},
 
+		getRestCloudApiContext(): IRestApiContext {
+			return {
+				baseUrl: this.baseUrl.includes('stage-')
+					? CLOUD_BASE_URL_STAGING
+					: CLOUD_BASE_URL_PRODUCTION,
+				sessionId: '',
+			};
+		},
+
 		getRestApiContext(): IRestApiContext {
 			return {
 				baseUrl: this.getRestUrl,

From 34fee429a88f89fdd583333edda0af2cbd85a794 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Mon, 8 May 2023 23:16:07 -0400
Subject: [PATCH 32/52] remove setting store form ExecutionUsage.vue

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 6507b2b8cd26c..801988df9c891 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -66,7 +66,6 @@
 import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
 import type { Cloud } from '@/Interface';
-import { useSettingsStore } from '@/stores';
 import { CHANGE_PLAN_PAGE } from '@/constants';
 import { computed } from 'vue';
 
@@ -76,8 +75,6 @@ const props = defineProps<{ cloudPlanData: CloudPlanData }>();
 
 const now = DateTime.utc();
 
-const settingsStore = useSettingsStore();
-
 const daysLeftOnTrial = computed(() => {
 	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
 	return Math.ceil(days);

From dee86519a25e06a783474b99bd2b838608513806 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Mon, 8 May 2023 23:37:20 -0400
Subject: [PATCH 33/52] fix linting issue

---
 packages/editor-ui/src/stores/n8nRoot.store.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/stores/n8nRoot.store.ts b/packages/editor-ui/src/stores/n8nRoot.store.ts
index 4f1e3acb251cc..5f7907e47ba76 100644
--- a/packages/editor-ui/src/stores/n8nRoot.store.ts
+++ b/packages/editor-ui/src/stores/n8nRoot.store.ts
@@ -1,9 +1,4 @@
-import {
-	CLOUD_BASE_URL_PRODUCTION,
-	CLOUD_BASE_URL_STAGING,
-	CLOUD_BASE_URL_STAGING,
-	STORES,
-} from '@/constants';
+import { CLOUD_BASE_URL_PRODUCTION, CLOUD_BASE_URL_STAGING, STORES } from '@/constants';
 import type { IRestApiContext, RootState } from '@/Interface';
 import type { IDataObject } from 'n8n-workflow';
 import { defineStore } from 'pinia';

From 48191cd6146c2e5575c9398113a123636f979441 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Tue, 9 May 2023 08:54:08 -0400
Subject: [PATCH 34/52] Add trial group to PlanMetadata group

---
 packages/editor-ui/src/Interface.ts      | 2 +-
 packages/editor-ui/src/api/cloudPlans.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index bb6302e3524f6..8f0622867caf4 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1459,7 +1459,7 @@ export declare namespace Cloud {
 
 	export interface PlanMetadata {
 		version: 'v1';
-		group: 'opt-out' | 'opt-in';
+		group: 'opt-out' | 'opt-in' | 'trial';
 		slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
 		trial?: Trial;
 	}
diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index 274fd1dde231d..46e0c8a7f1012 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -14,7 +14,7 @@ export function getCurrentPlan(
 		expirationDate: '2023-05-10T01:47:47Z',
 		metadata: {
 			version: 'v1',
-			group: 'opt-in',
+			group: 'trial',
 			slug: 'trial-1',
 			trial: {
 				length: 7,

From bb22b9ced74b4208d7d3b613e32f427ac56353c6 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Tue, 9 May 2023 08:54:32 -0400
Subject: [PATCH 35/52] Move helpers into the store

---
 packages/editor-ui/src/App.vue                  | 11 +++--------
 .../src/composables/useCloudPlanHelper.ts       |  8 --------
 .../editor-ui/src/stores/cloudPlan.store.ts     | 17 +++++++++++++----
 3 files changed, 16 insertions(+), 20 deletions(-)
 delete mode 100644 packages/editor-ui/src/composables/useCloudPlanHelper.ts

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index e57d97f0a02fd..7b58edf68053d 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -186,11 +186,10 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			}
 		},
 		async monitorExecutionUsageOnCloudPlan() {
-			const { userIsTrialing } = useCloudPlanHelper();
 			try {
 				const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
-				if (!userIsTrialing(plan.metadata)) return;
 				this.cloudPlanStore.setData(plan);
+				if (!this.cloudPlanStore.userIsTrialing) return;
 				this.startPollingPlanData();
 			} catch {}
 		},
@@ -200,18 +199,14 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			const interval = setInterval(async () => {
 				try {
 					const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
-					const trialExpired =
-						DateTime.now().toMillis() >= DateTime.fromISO(plan.expirationDate).toMillis();
-					const allExecutionsUsed = plan.usage.executions === plan.monthlyExecutionsLimit;
-
-					if (trialExpired || allExecutionsUsed) {
+					this.cloudPlanStore.setData(plan);
+					if (this.cloudPlanStore.trialExpired || this.cloudPlanStore.allExecutionsUsed) {
 						clearTimeout(interval);
 						return;
 					}
 					// TODO: remove before releasing
 					plan.usage.executions += acc;
 					acc += 20;
-					this.cloudPlanStore.setData(plan);
 				} catch {}
 			}, CLOUD_TRIAL_CHECK_INTERVAL);
 		},
diff --git a/packages/editor-ui/src/composables/useCloudPlanHelper.ts b/packages/editor-ui/src/composables/useCloudPlanHelper.ts
deleted file mode 100644
index 55df2d6a7077b..0000000000000
--- a/packages/editor-ui/src/composables/useCloudPlanHelper.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Cloud } from '@/Interface';
-
-export function useCloudPlanHelper() {
-	return {
-		userIsTrialing: (metadata: Cloud.PlanMetadata) =>
-			metadata?.trial && metadata?.group === 'opt-in',
-	};
-}
diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index 59510ece6d299..0a5575bd06e6d 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -5,7 +5,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { getCurrentPlan } from '@/api/cloudPlans';
-import { useCloudPlanHelper } from '@/composables/useCloudPlanHelper';
+import { DateTime } from 'luxon';
 
 const DEFAULT_STATE: CloudPlanState = {
 	data: {
@@ -18,7 +18,7 @@ const DEFAULT_STATE: CloudPlanState = {
 		expirationDate: '',
 		metadata: {
 			version: 'v1',
-			group: 'opt-in',
+			group: 'trial',
 			slug: 'trial-1',
 		},
 		usage: {
@@ -32,7 +32,6 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
 	const usersStore = useUsersStore();
-	const { userIsTrialing: _userIsTrialing } = useCloudPlanHelper();
 
 	const state = reactive<CloudPlanState>(DEFAULT_STATE);
 
@@ -40,10 +39,18 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		state.data = data;
 	};
 
-	const userIsTrialing = computed(() => _userIsTrialing(state.data?.metadata));
+	const userIsTrialing = computed(() => state.data.metadata.group === 'trial');
 
 	const currentPlanData = computed(() => state.data);
 
+	const trialExpired = computed(
+		() => DateTime.now().toMillis() >= DateTime.fromISO(state.data.expirationDate).toMillis(),
+	);
+
+	const allExecutionsUsed = computed(
+		() => state.data.usage.executions === state.data.monthlyExecutionsLimit,
+	);
+
 	const getOwnerCurrentPLan = async () => {
 		// TODO: uncomment before releasing
 		// const cloudUserId = settingsStore.settings.n8nMetadata?.userId;
@@ -59,5 +66,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		getOwnerCurrentPLan,
 		userIsTrialing,
 		currentPlanData,
+		trialExpired,
+		allExecutionsUsed,
 	};
 });

From f8cc32ab4dd75f2c122371a8117149cf4688f32e Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Tue, 9 May 2023 09:02:47 -0400
Subject: [PATCH 36/52] make staging url check more specific

---
 packages/editor-ui/src/stores/n8nRoot.store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/stores/n8nRoot.store.ts b/packages/editor-ui/src/stores/n8nRoot.store.ts
index 5f7907e47ba76..401efa30e2cd5 100644
--- a/packages/editor-ui/src/stores/n8nRoot.store.ts
+++ b/packages/editor-ui/src/stores/n8nRoot.store.ts
@@ -50,7 +50,7 @@ export const useRootStore = defineStore(STORES.ROOT, {
 
 		getRestCloudApiContext(): IRestApiContext {
 			return {
-				baseUrl: this.baseUrl.includes('stage-')
+				baseUrl: this.baseUrl.includes('stage-app.n8n.cloud')
 					? CLOUD_BASE_URL_STAGING
 					: CLOUD_BASE_URL_PRODUCTION,
 				sessionId: '',

From 99c51b082e40ba384da4ee451c98034c37b9fe23 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Tue, 9 May 2023 09:34:57 -0400
Subject: [PATCH 37/52] make cloud state nullable

---
 packages/editor-ui/src/Interface.ts           |  2 +-
 .../editor-ui/src/components/MainSidebar.vue  |  2 +-
 .../editor-ui/src/stores/cloudPlan.store.ts   | 27 +++++--------------
 3 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 8f0622867caf4..c46b5aed85819 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1476,5 +1476,5 @@ export declare namespace Cloud {
 }
 
 export interface CloudPlanState {
-	data: Cloud.PlanData;
+	data: Cloud.PlanData | null;
 }
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index a81508e007d68..1edf69c2fda30 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -336,7 +336,7 @@ export default mixins(
 		userIsTrialing(): boolean {
 			return this.cloudPlanStore.userIsTrialing;
 		},
-		currentPlanData(): Cloud.PlanData {
+		currentPlanData(): Cloud.PlanData | null {
 			return this.cloudPlanStore.currentPlanData;
 		},
 	},
diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index 0a5575bd06e6d..0a3bae9ff4000 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -8,24 +8,7 @@ import { getCurrentPlan } from '@/api/cloudPlans';
 import { DateTime } from 'luxon';
 
 const DEFAULT_STATE: CloudPlanState = {
-	data: {
-		planId: 0,
-		monthlyExecutionsLimit: 0,
-		activeWorkflowsLimit: 0,
-		credentialsLimit: 0,
-		isActive: false,
-		displayName: '',
-		expirationDate: '',
-		metadata: {
-			version: 'v1',
-			group: 'trial',
-			slug: 'trial-1',
-		},
-		usage: {
-			executions: 0,
-			activeWorkflows: 0,
-		},
-	},
+	data: null,
 };
 
 export const useCloudPlanStore = defineStore('cloudPlan', () => {
@@ -39,16 +22,18 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		state.data = data;
 	};
 
-	const userIsTrialing = computed(() => state.data.metadata.group === 'trial');
+	const userIsTrialing = computed(() => state.data?.metadata.group === 'trial');
 
 	const currentPlanData = computed(() => state.data);
 
 	const trialExpired = computed(
-		() => DateTime.now().toMillis() >= DateTime.fromISO(state.data.expirationDate).toMillis(),
+		() =>
+			state.data?.metadata?.group === 'trial' &&
+			DateTime.now().toMillis() >= DateTime.fromISO(state.data?.expirationDate).toMillis(),
 	);
 
 	const allExecutionsUsed = computed(
-		() => state.data.usage.executions === state.data.monthlyExecutionsLimit,
+		() => state.data?.usage?.executions === state.data?.monthlyExecutionsLimit,
 	);
 
 	const getOwnerCurrentPLan = async () => {

From 4a4aa831fad1504905642a58973189c878395467 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Tue, 9 May 2023 10:22:25 -0400
Subject: [PATCH 38/52] fix linting issue

---
 packages/editor-ui/src/App.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 7b58edf68053d..b01b0be10e758 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -49,8 +49,6 @@ import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl.store';
-import { DateTime } from 'luxon';
-import { useCloudPlanHelper } from './composables/useCloudPlanHelper';
 
 export default mixins(newVersions, showMessage, userHelpers).extend({
 	name: 'App',

From 903557a116aec8b417437f670f1904a84be2922b Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 10 May 2023 15:39:06 -0400
Subject: [PATCH 39/52] swap mockup date for endpoint

---
 packages/editor-ui/src/api/cloudPlans.ts | 24 ++----------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index 46e0c8a7f1012..2b294eaba4e0a 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -1,29 +1,9 @@
 import type { Cloud, IRestApiContext } from '@/Interface';
+import { get } from '@/utils';
 
 export function getCurrentPlan(
 	context: IRestApiContext,
 	cloudUserId: string,
 ): Promise<Cloud.PlanData> {
-	return Promise.resolve({
-		planId: 43039,
-		monthlyExecutionsLimit: 200,
-		activeWorkflowsLimit: 10,
-		credentialsLimit: 100,
-		isActive: false,
-		displayName: 'Trial',
-		expirationDate: '2023-05-10T01:47:47Z',
-		metadata: {
-			version: 'v1',
-			group: 'trial',
-			slug: 'trial-1',
-			trial: {
-				length: 7,
-				gracePeriod: 3,
-			},
-		},
-		usage: {
-			executions: 100,
-			activeWorkflows: 10,
-		},
-	});
+	return get(context.baseUrl, `/user/${cloudUserId}/plan`);
 }

From 6b48ad5f66fded77f1514d086a2f9d67e240686c Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 10 May 2023 16:29:32 -0400
Subject: [PATCH 40/52] Make getCurrentPlan async

---
 packages/editor-ui/src/api/cloudPlans.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index 2b294eaba4e0a..d4bafe1990522 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -1,7 +1,7 @@
 import type { Cloud, IRestApiContext } from '@/Interface';
 import { get } from '@/utils';
 
-export function getCurrentPlan(
+export async function getCurrentPlan(
 	context: IRestApiContext,
 	cloudUserId: string,
 ): Promise<Cloud.PlanData> {

From fabd05cdf99e6e91fe7a03d7a2a8ff2d47dcbc38 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 11 May 2023 14:28:47 -0400
Subject: [PATCH 41/52] asas

---
 packages/editor-ui/src/App.vue                 | 18 +++++++++++-------
 packages/editor-ui/src/Interface.ts            | 15 +++++++++------
 packages/editor-ui/src/api/cloudPlans.ts       |  6 +++++-
 .../editor-ui/src/stores/cloudPlan.store.ts    | 15 +++++++++++++--
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 7c8476a10354c..d7c35f9733f79 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -49,6 +49,7 @@ import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl.store';
+import { useUsageStore } from '@/stores/usage.store';
 
 export default mixins(newVersions, showMessage, userHelpers).extend({
 	name: 'App',
@@ -73,6 +74,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			useUsersStore,
 			useVersionControlStore,
 			useCloudPlanStore,
+			useUsageStore,
 		),
 		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
@@ -183,27 +185,29 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 				window.document.body.classList.add(`theme-${theme}`);
 			}
 		},
-		async monitorExecutionUsageOnCloudPlan() {
+		async checkForCloudPlanData() {
 			try {
 				const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
 				this.cloudPlanStore.setData(plan);
 				if (!this.cloudPlanStore.userIsTrialing) return;
-				this.startPollingPlanData();
+				const usage = await this.cloudPlanStore.getInstanceCurrentUsage();
+				this.cloudPlanStore.setUsage(usage);
+				this.startPollingInstanceUsageData();
 			} catch {}
 		},
-		startPollingPlanData() {
+		startPollingInstanceUsageData() {
 			// TODO: remove before releasing
 			let acc = 0;
 			const interval = setInterval(async () => {
 				try {
-					const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
-					this.cloudPlanStore.setData(plan);
+					const usage = await this.cloudPlanStore.getInstanceCurrentUsage();
+					this.cloudPlanStore.setUsage(usage);
 					if (this.cloudPlanStore.trialExpired || this.cloudPlanStore.allExecutionsUsed) {
 						clearTimeout(interval);
 						return;
 					}
 					// TODO: remove before releasing
-					plan.usage.executions += acc;
+					usage.executions += acc;
 					acc += 20;
 				} catch {}
 			}, CLOUD_TRIAL_CHECK_INTERVAL);
@@ -216,7 +220,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		this.authenticate();
 		this.redirectIfNecessary();
 		this.checkForNewVersions();
-		this.monitorExecutionUsageOnCloudPlan();
+		this.checkForCloudPlanData();
 
 		this.loading = false;
 
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index c46b5aed85819..27e26328a5225 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1454,7 +1454,6 @@ export declare namespace Cloud {
 		displayName: string;
 		expirationDate: string;
 		metadata: PlanMetadata;
-		usage: PlanUsage;
 	}
 
 	export interface PlanMetadata {
@@ -1464,17 +1463,21 @@ export declare namespace Cloud {
 		trial?: Trial;
 	}
 
-	export interface PlanUsage {
-		executions: number;
-		activeWorkflows: number;
-	}
-
 	interface Trial {
 		length: number;
 		gracePeriod: number;
 	}
 }
 
+// type ClouPlanAndUsage = Cloud.PlanData & { usage?: InstanceUsage };
+
 export interface CloudPlanState {
 	data: Cloud.PlanData | null;
+	usage: InstanceUsage | null;
+}
+
+export interface InstanceUsage {
+	timeframe?: string;
+	executions: number;
+	activeWorkflows: number;
 }
diff --git a/packages/editor-ui/src/api/cloudPlans.ts b/packages/editor-ui/src/api/cloudPlans.ts
index d4bafe1990522..eb39bd42d9919 100644
--- a/packages/editor-ui/src/api/cloudPlans.ts
+++ b/packages/editor-ui/src/api/cloudPlans.ts
@@ -1,4 +1,4 @@
-import type { Cloud, IRestApiContext } from '@/Interface';
+import type { Cloud, IRestApiContext, InstanceUsage } from '@/Interface';
 import { get } from '@/utils';
 
 export async function getCurrentPlan(
@@ -7,3 +7,7 @@ export async function getCurrentPlan(
 ): Promise<Cloud.PlanData> {
 	return get(context.baseUrl, `/user/${cloudUserId}/plan`);
 }
+
+export async function getCurrentUsage(context: IRestApiContext): Promise<InstanceUsage> {
+	return get(context.baseUrl, '/limits');
+}
diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index 0a3bae9ff4000..3094edc3b207c 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -4,11 +4,12 @@ import type { CloudPlanState } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
-import { getCurrentPlan } from '@/api/cloudPlans';
+import { getCurrentPlan, getCurrentUsage } from '@/api/cloudPlans';
 import { DateTime } from 'luxon';
 
 const DEFAULT_STATE: CloudPlanState = {
 	data: null,
+	usage: null,
 };
 
 export const useCloudPlanStore = defineStore('cloudPlan', () => {
@@ -22,6 +23,10 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		state.data = data;
 	};
 
+	const setUsage = (data: CloudPlanState['usage']) => {
+		state.usage = data;
+	};
+
 	const userIsTrialing = computed(() => state.data?.metadata.group === 'trial');
 
 	const currentPlanData = computed(() => state.data);
@@ -33,7 +38,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 	);
 
 	const allExecutionsUsed = computed(
-		() => state.data?.usage?.executions === state.data?.monthlyExecutionsLimit,
+		() => state.usage?.executions === state.data?.monthlyExecutionsLimit,
 	);
 
 	const getOwnerCurrentPLan = async () => {
@@ -46,9 +51,15 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		return getCurrentPlan(rootStore.getRestCloudApiContext, cloudUserId as string);
 	};
 
+	const getInstanceCurrentUsage = async () => {
+		return getCurrentUsage(rootStore.getRestApiContext);
+	};
+
 	return {
 		setData,
+		setUsage,
 		getOwnerCurrentPLan,
+		getInstanceCurrentUsage,
 		userIsTrialing,
 		currentPlanData,
 		trialExpired,

From 765dd60a22bf666643c1260adb408207d17b27ee Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 11 May 2023 22:33:55 -0400
Subject: [PATCH 42/52] Improvements

---
 packages/editor-ui/src/Interface.ts           |  4 +-
 .../src/components/ExecutionsUsage.vue        | 40 ++++++++++++-------
 .../editor-ui/src/components/MainSidebar.vue  | 16 ++++++--
 .../editor-ui/src/stores/cloudPlan.store.ts   |  9 +++--
 packages/editor-ui/src/utils/apiUtils.ts      |  6 ++-
 5 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 27e26328a5225..7b8b6edb36260 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1469,8 +1469,6 @@ export declare namespace Cloud {
 	}
 }
 
-// type ClouPlanAndUsage = Cloud.PlanData & { usage?: InstanceUsage };
-
 export interface CloudPlanState {
 	data: Cloud.PlanData | null;
 	usage: InstanceUsage | null;
@@ -1481,3 +1479,5 @@ export interface InstanceUsage {
 	executions: number;
 	activeWorkflows: number;
 }
+
+export type CloudPlanAndUsageData = Cloud.PlanData & { usage: InstanceUsage };
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 801988df9c891..c6624185a718e 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -1,6 +1,11 @@
 <template>
 	<div :class="$style.container">
-		<div v-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
+		<div v-if="isTrialExpired" :class="$style.usageText">
+			<n8n-text size="xsmall" color="danger">
+				{{ locale.baseText('executionUsage.expired.text') }}
+			</n8n-text>
+		</div>
+		<div v-else-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
 			<i18n path="executionUsage.currentUsage">
 				<template #text>
 					<n8n-text size="xsmall" color="text-dark">
@@ -18,12 +23,7 @@
 				</template>
 			</i18n>
 		</div>
-		<div v-if="isTrialExpired" :class="$style.usageText">
-			<n8n-text size="xsmall" color="danger">
-				{{ locale.baseText('executionUsage.expired.text') }}
-			</n8n-text>
-		</div>
-		<div v-if="!trialHasExecutionsLeft" :class="$style.usageText">
+		<div v-else-if="!trialHasExecutionsLeft" :class="$style.usageText">
 			<n8n-text size="xsmall">
 				{{ locale.baseText('executionUsage.ranOutOfExecutions.text') }}
 			</n8n-text>
@@ -65,13 +65,17 @@
 <script setup lang="ts">
 import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
-import type { Cloud } from '@/Interface';
+import type { CloudPlanAndUsageData } from '@/Interface';
 import { CHANGE_PLAN_PAGE } from '@/constants';
+import type { PropType } from 'vue';
 import { computed } from 'vue';
 
-type CloudPlanData = Cloud.PlanData & { metadata: Cloud.PlanMetadata; usage: Cloud.PlanUsage };
-
-const props = defineProps<{ cloudPlanData: CloudPlanData }>();
+const props = defineProps({
+	cloudPlanData: {
+		type: Object as PropType<CloudPlanAndUsageData>,
+		required: true,
+	},
+});
 
 const now = DateTime.utc();
 
@@ -87,11 +91,17 @@ const isTrialExpired = computed(() => {
 
 const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.expirationDate);
 
-const trialHasExecutionsLeft = computed(
-	() => props.cloudPlanData.usage.executions < props.cloudPlanData.monthlyExecutionsLimit,
-);
+const trialHasExecutionsLeft = computed(() => {
+	if (!props.cloudPlanData?.usage) return 0;
+	return props.cloudPlanData.usage.executions < props.cloudPlanData.monthlyExecutionsLimit;
+});
 
-const currentExecutions = computed(() => props.cloudPlanData.usage.executions);
+const currentExecutions = computed(() => {
+	if (!props.cloudPlanData?.usage) return 0;
+	const usedExecutions = props.cloudPlanData.usage.executions;
+	const executionsQuota = props.cloudPlanData.monthlyExecutionsLimit;
+	return usedExecutions > executionsQuota ? executionsQuota : usedExecutions;
+});
 
 const maxExecutions = computed(() => props.cloudPlanData.monthlyExecutionsLimit);
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 887ed139cf523..607c25cd45bdf 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -27,7 +27,9 @@
 			</template>
 
 			<template #beforeLowerMenu>
-				<ExecutionsUsage :cloud-plan-data="currentPlanData" v-if="!isCollapsed && userIsTrialing"
+				<ExecutionsUsage
+					:cloud-plan-data="currentPlanAndUsageData"
+					v-if="!isCollapsed && userIsTrialing"
 			/></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
@@ -114,7 +116,7 @@
 </template>
 
 <script lang="ts">
-import type { Cloud, IExecutionResponse, IMenuItem, IVersion } from '../Interface';
+import type { CloudPlanAndUsageData, IExecutionResponse, IMenuItem, IVersion } from '../Interface';
 
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
@@ -336,8 +338,14 @@ export default mixins(
 		userIsTrialing(): boolean {
 			return this.cloudPlanStore.userIsTrialing;
 		},
-		currentPlanData(): Cloud.PlanData | null {
-			return this.cloudPlanStore.currentPlanData;
+		currentPlanAndUsageData(): CloudPlanAndUsageData | null {
+			const planData = this.cloudPlanStore.currentPlanData;
+			const usage = this.cloudPlanStore.currentUsageData;
+			if (!planData || !usage) return null;
+			return {
+				...planData,
+				usage,
+			};
 		},
 	},
 	async mounted() {
diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index 3094edc3b207c..01de28c3eac40 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -31,6 +31,8 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 
 	const currentPlanData = computed(() => state.data);
 
+	const currentUsageData = computed(() => state.usage);
+
 	const trialExpired = computed(
 		() =>
 			state.data?.metadata?.group === 'trial' &&
@@ -42,9 +44,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 	);
 
 	const getOwnerCurrentPLan = async () => {
-		// TODO: uncomment before releasing
-		// const cloudUserId = settingsStore.settings.n8nMetadata?.userId;
-		const cloudUserId = '123';
+		const cloudUserId = settingsStore.settings.n8nMetadata?.userId;
 		const hasCloudPlan =
 			usersStore.currentUser?.isOwner && settingsStore.isCloudDeployment && cloudUserId;
 		if (!hasCloudPlan) throw new Error('User does not have a cloud plan');
@@ -52,7 +52,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 	};
 
 	const getInstanceCurrentUsage = async () => {
-		return getCurrentUsage(rootStore.getRestApiContext);
+		return getCurrentUsage({ baseUrl: rootStore.getBaseUrl, sessionId: '' });
 	};
 
 	return {
@@ -62,6 +62,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		getInstanceCurrentUsage,
 		userIsTrialing,
 		currentPlanData,
+		currentUsageData,
 		trialExpired,
 		allExecutionsUsed,
 	};
diff --git a/packages/editor-ui/src/utils/apiUtils.ts b/packages/editor-ui/src/utils/apiUtils.ts
index ccc3c4e78f166..e5c77a953ebc9 100644
--- a/packages/editor-ui/src/utils/apiUtils.ts
+++ b/packages/editor-ui/src/utils/apiUtils.ts
@@ -62,7 +62,11 @@ async function request(config: {
 		baseURL,
 		headers,
 	};
-	if (import.meta.env.NODE_ENV !== 'production' && !baseURL.includes('api.n8n.io')) {
+	if (
+		import.meta.env.NODE_ENV !== 'production' &&
+		!baseURL.includes('api.n8n.io') &&
+		!baseURL.includes('n8n.cloud')
+	) {
 		options.withCredentials = true;
 	}
 	if (['POST', 'PATCH', 'PUT'].includes(method)) {

From 1f1ff744a258880cad72b0b29ee9c0a641412c0c Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Thu, 11 May 2023 22:43:31 -0400
Subject: [PATCH 43/52] small improvements

---
 packages/editor-ui/src/App.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index d7c35f9733f79..477b3529c6f82 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -185,7 +185,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 				window.document.body.classList.add(`theme-${theme}`);
 			}
 		},
-		async checkForCloudPlanData() {
+		async checkForCloudPlanData(): Promise<void> {
 			try {
 				const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
 				this.cloudPlanStore.setData(plan);
@@ -196,8 +196,6 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			} catch {}
 		},
 		startPollingInstanceUsageData() {
-			// TODO: remove before releasing
-			let acc = 0;
 			const interval = setInterval(async () => {
 				try {
 					const usage = await this.cloudPlanStore.getInstanceCurrentUsage();
@@ -206,9 +204,6 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 						clearTimeout(interval);
 						return;
 					}
-					// TODO: remove before releasing
-					usage.executions += acc;
-					acc += 20;
 				} catch {}
 			}, CLOUD_TRIAL_CHECK_INTERVAL);
 		},
@@ -220,7 +215,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		this.authenticate();
 		this.redirectIfNecessary();
 		this.checkForNewVersions();
-		this.checkForCloudPlanData();
+		void this.checkForCloudPlanData();
 
 		this.loading = false;
 

From b09bcdc31d129d699cee8cf04f00c00781911663 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 12 May 2023 12:37:46 +0200
Subject: [PATCH 44/52] chore: resolve conflicts

---
 packages/editor-ui/src/components/MainSidebar.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 0b4a620f6f3a3..6565b9ff784ca 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -161,11 +161,6 @@ export default mixins(
 			...useMessage(),
 		};
 	},
-	setup() {
-		return {
-			...useMessage(),
-		};
-	},
 	data() {
 		return {
 			basePath: '',

From 9b5fbbace6e4fc649d4c2e48af1e0a8a019be99f Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Fri, 12 May 2023 10:56:47 -0400
Subject: [PATCH 45/52] make sure there is data before calculating trial
 expiration

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index c6624185a718e..0302ffe37c642 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -85,6 +85,7 @@ const daysLeftOnTrial = computed(() => {
 });
 
 const isTrialExpired = computed(() => {
+	if (!props.cloudPlanData?.expirationDate) return false;
 	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.expirationDate);
 	return now.toMillis() > trialEndsAt.toMillis();
 });

From 454659f5a6e39b07d9ea6e312d29307159b922be Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Fri, 12 May 2023 11:11:16 -0400
Subject: [PATCH 46/52] Fix issue with component not loading on first page load

---
 .../editor-ui/src/components/ExecutionsUsage.vue  | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 0302ffe37c642..addab8005339c 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -67,15 +67,9 @@ import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
 import type { CloudPlanAndUsageData } from '@/Interface';
 import { CHANGE_PLAN_PAGE } from '@/constants';
-import type { PropType } from 'vue';
 import { computed } from 'vue';
 
-const props = defineProps({
-	cloudPlanData: {
-		type: Object as PropType<CloudPlanAndUsageData>,
-		required: true,
-	},
-});
+const props = defineProps<{ cloudPlanData: CloudPlanAndUsageData | null }>();
 
 const now = DateTime.utc();
 
@@ -90,7 +84,7 @@ const isTrialExpired = computed(() => {
 	return now.toMillis() > trialEndsAt.toMillis();
 });
 
-const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.expirationDate);
+const getPlanExpirationDate = () => DateTime.fromISO(props?.cloudPlanData?.expirationDate ?? '');
 
 const trialHasExecutionsLeft = computed(() => {
 	if (!props.cloudPlanData?.usage) return 0;
@@ -104,7 +98,10 @@ const currentExecutions = computed(() => {
 	return usedExecutions > executionsQuota ? executionsQuota : usedExecutions;
 });
 
-const maxExecutions = computed(() => props.cloudPlanData.monthlyExecutionsLimit);
+const maxExecutions = computed(() => {
+	if (!props.cloudPlanData?.monthlyExecutionsLimit) return 0;
+	return props.cloudPlanData.monthlyExecutionsLimit;
+});
 
 const onUpgradeClicked = () => {
 	location.href = CHANGE_PLAN_PAGE;

From 25b6f91ac8b3b6e95ff08aadd68d10219de2ca9e Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sat, 13 May 2023 16:28:58 -0400
Subject: [PATCH 47/52] type safety improvements

---
 packages/editor-ui/src/stores/cloudPlan.store.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index 01de28c3eac40..19207aeeb9731 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -27,7 +27,7 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		state.usage = data;
 	};
 
-	const userIsTrialing = computed(() => state.data?.metadata.group === 'trial');
+	const userIsTrialing = computed(() => state.data?.metadata?.group === 'trial');
 
 	const currentPlanData = computed(() => state.data);
 
@@ -39,9 +39,10 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 			DateTime.now().toMillis() >= DateTime.fromISO(state.data?.expirationDate).toMillis(),
 	);
 
-	const allExecutionsUsed = computed(
-		() => state.usage?.executions === state.data?.monthlyExecutionsLimit,
-	);
+	const allExecutionsUsed = computed(() => {
+		if (!state.usage?.executions || !state.data?.monthlyExecutionsLimit) return false;
+		return state.usage?.executions >= state.data?.monthlyExecutionsLimit;
+	});
 
 	const getOwnerCurrentPLan = async () => {
 		const cloudUserId = settingsStore.settings.n8nMetadata?.userId;

From 5b9c5e8b10d37a8176d20853f4ca9f18d8dc255e Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sun, 14 May 2023 11:23:08 -0400
Subject: [PATCH 48/52] apply component ui feedback

---
 .../src/components/N8nButton/Button.vue       | 13 +++-
 .../src/components/ExecutionsUsage.vue        | 64 ++++++++++++++++---
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 127a1abd5ff3e..ad899a10c6853 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -38,7 +38,7 @@ export default defineComponent({
 			type: String,
 			default: 'medium',
 			validator: (value: string): boolean =>
-				['mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
+				['xmini', 'mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
 		},
 		loading: {
 			type: Boolean,
@@ -278,6 +278,17 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
  * Sizes
  */
 
+.xmini {
+	--button-padding-vertical: var(--spacing-4xs);
+	--button-padding-horizontal: var(--spacing-3xs);
+	--button-font-size: var(--font-size-3xs);
+
+	&.square {
+		height: 22px;
+		width: 22px;
+	}
+}
+
 .mini {
 	--button-padding-vertical: var(--spacing-4xs);
 	--button-padding-horizontal: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index addab8005339c..17e1d9f1719a1 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -8,12 +8,12 @@
 		<div v-else-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
 			<i18n path="executionUsage.currentUsage">
 				<template #text>
-					<n8n-text size="xsmall" color="text-dark">
+					<n8n-text size="small" color="text-dark">
 						{{ locale.baseText('executionUsage.currentUsage.text') }}
 					</n8n-text>
 				</template>
 				<template #count>
-					<n8n-text size="xsmall" :bold="true" color="warning">
+					<n8n-text size="small" :bold="true" color="warning">
 						{{
 							locale.baseText('executionUsage.currentUsage.count', {
 								interpolate: { days: daysLeftOnTrial.toString() },
@@ -29,13 +29,13 @@
 			</n8n-text>
 		</div>
 		<div v-if="!isTrialExpired" :class="$style.usageCounter">
-			<div>
+			<div :class="$style.progressBarDiv">
 				<progress
 					:class="[
 						trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
 						$style.progressBar,
 					]"
-					:value="currentExecutions"
+					:value="currentExecutionsWithThreshold"
 					:max="maxExecutions"
 				></progress>
 			</div>
@@ -52,7 +52,7 @@
 		<div :class="$style.upgradeButtonSection">
 			<n8n-button
 				:label="locale.baseText('executionUsage.button.upgrade')"
-				size="mini"
+				size="xmini"
 				icon="gem"
 				type="success"
 				:block="true"
@@ -69,6 +69,8 @@ import type { CloudPlanAndUsageData } from '@/Interface';
 import { CHANGE_PLAN_PAGE } from '@/constants';
 import { computed } from 'vue';
 
+const PROGRESS_BAR_MINIMUM_THRESHOLD = 8;
+
 const props = defineProps<{ cloudPlanData: CloudPlanAndUsageData | null }>();
 
 const now = DateTime.utc();
@@ -98,6 +100,14 @@ const currentExecutions = computed(() => {
 	return usedExecutions > executionsQuota ? executionsQuota : usedExecutions;
 });
 
+const currentExecutionsWithThreshold = computed(() => {
+	if (!props.cloudPlanData?.usage) return 0;
+	const usedExecutions = props.cloudPlanData.usage.executions;
+	const executionsQuota = props.cloudPlanData.monthlyExecutionsLimit;
+	const threshold = (PROGRESS_BAR_MINIMUM_THRESHOLD * executionsQuota) / 100;
+	return usedExecutions < threshold ? threshold : usedExecutions;
+});
+
 const maxExecutions = computed(() => {
 	if (!props.cloudPlanData?.monthlyExecutionsLimit) return 0;
 	return props.cloudPlanData.monthlyExecutionsLimit;
@@ -117,16 +127,50 @@ const onUpgradeClicked = () => {
 	border-right: 0;
 }
 
+.progressBarDiv {
+	display: flex;
+	align-items: center;
+}
+
 .progressBar {
 	width: 62.4px;
+	border: 0;
+	height: 5px;
+	border-radius: 20px;
+	background-color: var(--color-foreground-base);
+}
+.progressBar::-webkit-progress-bar {
+	width: 62.4px;
+	border: 0;
+	height: 5px;
+	border-radius: 20px;
+	background-color: var(--color-foreground-base);
+}
+.progressBar::-moz-progress-bar {
+	width: 62.4px;
+	border: 0;
+	height: 5px;
+	border-radius: 20px;
+	background-color: var(--color-foreground-base);
 }
 
-.progressBarSuccess {
-	accent-color: var(--color-foreground-xdark);
+.progressBarSuccess::-moz-progress-bar {
+	background: var(--color-foreground-xdark);
+	border-radius: 20px;
 }
 
-.progressBarDanger {
-	accent-color: var(--color-danger);
+.progressBarSuccess::-webkit-progress-value {
+	background: var(--color-foreground-xdark);
+	border-radius: 20px;
+}
+
+.progressBarDanger::-webkit-progress-value {
+	background: var(--color-danger);
+	border-radius: 20px;
+}
+
+.progressBarDanger::-moz-progress-bar {
+	background: var(--color-danger);
 }
 
 .usageText {
@@ -140,7 +184,7 @@ const onUpgradeClicked = () => {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	margin-left: var(--spacing-s);
+	justify-content: center;
 	margin-top: var(--spacing-2xs);
 	font-size: var(--font-size-3xs);
 }

From d30632ee646509edc42109e151264e9a2b71caad Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Sun, 14 May 2023 11:24:46 -0400
Subject: [PATCH 49/52] fix linting issue

---
 packages/editor-ui/src/components/MainSidebar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index e42c08cf0ecaf..7bc0d89016d76 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -117,7 +117,6 @@
 
 <script lang="ts">
 import type { CloudPlanAndUsageData, IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
-import type { MessageBoxInputData } from 'element-ui/types/message-box';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
 

From d3a64a1ec35c67e85bc10439e52f535ccebedca4 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Mon, 15 May 2023 12:03:15 +0200
Subject: [PATCH 50/52] chore: clean up unnecessary change from merge conflict

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 89ed13009150a..aef9334be563b 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1822,8 +1822,6 @@
 	"userActivationSurveyModal.sharedFeedback.error": "Problem sharing feedback, try again",
 	"sso.login.divider": "or",
 	"sso.login.button": "Continue with SSO",
-	"pushConnection.executionError": "There was a problem executing the workflow{error}",
-	"pushConnection.executionError.details": "<br /><strong>{details}</strong>",
 	"executionUsage.currentUsage": "{text} {count}",
 	"executionUsage.currentUsage.text": "You are in a free trial with limited executions. You have",
 	"executionUsage.currentUsage.count": "{days} days left.",

From d2a77ab442b26240bf80e0f58a60597b83a51f8b Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Mon, 15 May 2023 12:05:14 +0200
Subject: [PATCH 51/52] feat: Block api feature using licenses, show notice
 page for trial cloud users (#6187)

* rename planSpec to plan

* Remove instance property as it's not needed anymore

* Flatten plan object

* remove console.log

* feat: disable api using license

* feat: add api page

* chore: resolve conflicts

* chore: resolve conflicts

* feat: update and refactor a bit

* fix: update endpoints

* fix: update endpoints

* fix: use host

* feat: update copy

* fix linting issues

---------

Co-authored-by: ricardo <ricardoespinoza105@gmail.com>
---
 packages/cli/src/License.ts                   |  4 ++++
 packages/cli/src/PublicApi/index.ts           | 10 +++++++++
 packages/cli/src/Server.ts                    |  8 +++----
 packages/cli/src/audit/risks/instance.risk.ts |  3 ++-
 packages/cli/src/constants.ts                 |  1 +
 packages/editor-ui/src/App.vue                |  9 +++-----
 packages/editor-ui/src/Interface.ts           |  1 +
 .../src/components/ExecutionsUsage.vue        |  4 ++--
 packages/editor-ui/src/constants.ts           |  8 ++++---
 .../src/plugins/i18n/locales/en.json          |  3 +++
 .../editor-ui/src/stores/cloudPlan.store.ts   | 21 ++++++++++++++----
 .../editor-ui/src/stores/n8nRoot.store.ts     |  2 +-
 .../editor-ui/src/views/SettingsApiView.vue   | 22 +++++++++++++++++--
 13 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/packages/cli/src/License.ts b/packages/cli/src/License.ts
index c00e1b1835691..9a4597f92a203 100644
--- a/packages/cli/src/License.ts
+++ b/packages/cli/src/License.ts
@@ -132,6 +132,10 @@ export class License {
 		return this.isFeatureEnabled(LICENSE_FEATURES.VERSION_CONTROL);
 	}
 
+	isAPIDisabled() {
+		return this.isFeatureEnabled(LICENSE_FEATURES.API_DISABLED);
+	}
+
 	getCurrentEntitlements() {
 		return this.manager?.getCurrentEntitlements() ?? [];
 	}
diff --git a/packages/cli/src/PublicApi/index.ts b/packages/cli/src/PublicApi/index.ts
index fa27212db42c4..4ffa4d7fe5a7e 100644
--- a/packages/cli/src/PublicApi/index.ts
+++ b/packages/cli/src/PublicApi/index.ts
@@ -16,6 +16,7 @@ import * as Db from '@/Db';
 import { getInstanceBaseUrl } from '@/UserManagement/UserManagementHelper';
 import { Container } from 'typedi';
 import { InternalHooks } from '@/InternalHooks';
+import { License } from '@/License';
 
 async function createApiRouter(
 	version: string,
@@ -151,3 +152,12 @@ export const loadPublicApiVersions = async (
 		apiLatestVersion: Number(versions.pop()?.charAt(1)) ?? 1,
 	};
 };
+
+function isApiEnabledByLicense(): boolean {
+	const license = Container.get(License);
+	return !license.isAPIDisabled();
+}
+
+export function isApiEnabled(): boolean {
+	return !config.get('publicApi.disabled') && isApiEnabledByLicense();
+}
diff --git a/packages/cli/src/Server.ts b/packages/cli/src/Server.ts
index f5406d2b2d212..8739fe9ed166d 100644
--- a/packages/cli/src/Server.ts
+++ b/packages/cli/src/Server.ts
@@ -97,7 +97,7 @@ import {
 
 import { executionsController } from '@/executions/executions.controller';
 import { workflowStatsController } from '@/api/workflowStats.api';
-import { loadPublicApiVersions } from '@/PublicApi';
+import { isApiEnabled, loadPublicApiVersions } from '@/PublicApi';
 import {
 	getInstanceBaseUrl,
 	isEmailSetUp,
@@ -277,7 +277,7 @@ export class Server extends AbstractServer {
 				},
 			},
 			publicApi: {
-				enabled: !config.getEnv('publicApi.disabled'),
+				enabled: isApiEnabled(),
 				latestVersion: 1,
 				path: config.getEnv('publicApi.path'),
 				swaggerUi: {
@@ -538,7 +538,7 @@ export class Server extends AbstractServer {
 			this.endpointWebhook,
 			this.endpointWebhookTest,
 			this.endpointPresetCredentials,
-			config.getEnv('publicApi.disabled') ? publicApiEndpoint : '',
+			isApiEnabled() ? '' : publicApiEndpoint,
 			...excludeEndpoints.split(':'),
 		].filter((u) => !!u);
 
@@ -564,7 +564,7 @@ export class Server extends AbstractServer {
 		// Public API
 		// ----------------------------------------
 
-		if (!config.getEnv('publicApi.disabled')) {
+		if (isApiEnabled()) {
 			const { apiRouters, apiLatestVersion } = await loadPublicApiVersions(publicApiEndpoint);
 			this.app.use(...apiRouters);
 			this.frontendSettings.publicApi.latestVersion = apiLatestVersion;
diff --git a/packages/cli/src/audit/risks/instance.risk.ts b/packages/cli/src/audit/risks/instance.risk.ts
index 0bd0c18fb30e8..6d75acbd988bf 100644
--- a/packages/cli/src/audit/risks/instance.risk.ts
+++ b/packages/cli/src/audit/risks/instance.risk.ts
@@ -13,6 +13,7 @@ import {
 import { getN8nPackageJson, inDevelopment } from '@/constants';
 import type { WorkflowEntity } from '@db/entities/WorkflowEntity';
 import type { Risk, n8n } from '@/audit/types';
+import { isApiEnabled } from '@/PublicApi';
 
 function getSecuritySettings() {
 	if (config.getEnv('deployment.type') === 'cloud') return null;
@@ -34,7 +35,7 @@ function getSecuritySettings() {
 		communityPackagesEnabled: config.getEnv('nodes.communityPackages.enabled'),
 		versionNotificationsEnabled: config.getEnv('versionNotifications.enabled'),
 		templatesEnabled: config.getEnv('templates.enabled'),
-		publicApiEnabled: !config.getEnv('publicApi.disabled'),
+		publicApiEnabled: isApiEnabled(),
 		userManagementEnabled,
 	};
 
diff --git a/packages/cli/src/constants.ts b/packages/cli/src/constants.ts
index 818364bc5cc91..049f103cc980d 100644
--- a/packages/cli/src/constants.ts
+++ b/packages/cli/src/constants.ts
@@ -78,6 +78,7 @@ export const enum LICENSE_FEATURES {
 	ADVANCED_EXECUTION_FILTERS = 'feat:advancedExecutionFilters',
 	VARIABLES = 'feat:variables',
 	VERSION_CONTROL = 'feat:versionControl',
+	API_DISABLED = 'feat:apiDisabled',
 }
 
 export const enum LICENSE_QUOTAS {
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 183ff13170127..36557f7950b1e 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -187,19 +187,16 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		},
 		async checkForCloudPlanData(): Promise<void> {
 			try {
-				const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
-				this.cloudPlanStore.setData(plan);
+				await this.cloudPlanStore.getOwnerCurrentPLan();
 				if (!this.cloudPlanStore.userIsTrialing) return;
-				const usage = await this.cloudPlanStore.getInstanceCurrentUsage();
-				this.cloudPlanStore.setUsage(usage);
+				await this.cloudPlanStore.getInstanceCurrentUsage();
 				this.startPollingInstanceUsageData();
 			} catch {}
 		},
 		startPollingInstanceUsageData() {
 			const interval = setInterval(async () => {
 				try {
-					const usage = await this.cloudPlanStore.getInstanceCurrentUsage();
-					this.cloudPlanStore.setUsage(usage);
+					await this.cloudPlanStore.getInstanceCurrentUsage();
 					if (this.cloudPlanStore.trialExpired || this.cloudPlanStore.allExecutionsUsed) {
 						clearTimeout(interval);
 						return;
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index de645a566ea9c..3b9546127abcd 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1479,6 +1479,7 @@ export declare namespace Cloud {
 export interface CloudPlanState {
 	data: Cloud.PlanData | null;
 	usage: InstanceUsage | null;
+	loadingPlan: boolean;
 }
 
 export interface InstanceUsage {
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 17e1d9f1719a1..7cff55c2b521e 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -66,7 +66,7 @@
 import { i18n as locale } from '@/plugins/i18n';
 import { DateTime } from 'luxon';
 import type { CloudPlanAndUsageData } from '@/Interface';
-import { CHANGE_PLAN_PAGE } from '@/constants';
+import { CLOUD_CHANGE_PLAN_PAGE } from '@/constants';
 import { computed } from 'vue';
 
 const PROGRESS_BAR_MINIMUM_THRESHOLD = 8;
@@ -114,7 +114,7 @@ const maxExecutions = computed(() => {
 });
 
 const onUpgradeClicked = () => {
-	location.href = CHANGE_PLAN_PAGE;
+	location.href = CLOUD_CHANGE_PLAN_PAGE;
 };
 </script>
 
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 6660f8662d9d6..d100157d5c27f 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -552,10 +552,12 @@ export const ALLOWED_HTML_TAGS = [
 
 export const GITHUB_STARS_BANNER_SHOW_UNTIL_DATE = new Date('2023-06-01');
 
-export const CHANGE_PLAN_PAGE = 'https://app.n8n.cloud/account/change-plan';
+export const CLOUD_CHANGE_PLAN_PAGE = window.location.host.includes('stage-app.n8n.cloud')
+	? 'https://stage-app.n8n.cloud/account/change-plan'
+	: 'https://app.n8n.cloud/account/change-plan';
 
-export const CLOUD_BASE_URL_STAGING = 'https://stage-app.n8n.cloud';
+export const CLOUD_BASE_URL_STAGING = 'https://stage-api.n8n.cloud';
 
-export const CLOUD_BASE_URL_PRODUCTION = 'https://app.n8n.cloud';
+export const CLOUD_BASE_URL_PRODUCTION = 'https://api.n8n.cloud';
 
 export const CLOUD_TRIAL_CHECK_INTERVAL = 5000;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index aef9334be563b..cfe3dc116229f 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1245,6 +1245,9 @@
 	"settings.log-streaming.destinationDelete.message": "Are you sure that you want to delete '{destinationName}'?",
 	"settings.log-streaming.addDestination": "Add new destination",
 	"settings.log-streaming.destinations": "Log destinations",
+	"settings.api.trial.upgradePlan.title": "Upgrade to use API",
+	"settings.api.trial.upgradePlan.description": "To prevent abuse, we limit API access to your workspace during your trial. If this is hindering your evaluation of n8n, please contact <a href=\"mailto:support@n8n.io\">support@n8n.io</a>",
+	"settings.api.trial.upgradePlan.cta": "Upgrade plan",
 	"settings.api.create.description": "Control n8n programmatically using the <a href=\"https://docs.n8n.io/api\" target=\"_blank\">n8n API</a>",
 	"settings.api.create.button": "Create an API Key",
 	"settings.api.create.button.loading": "Creating API Key...",
diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts
index 19207aeeb9731..b034d711b0380 100644
--- a/packages/editor-ui/src/stores/cloudPlan.store.ts
+++ b/packages/editor-ui/src/stores/cloudPlan.store.ts
@@ -10,6 +10,7 @@ import { DateTime } from 'luxon';
 const DEFAULT_STATE: CloudPlanState = {
 	data: null,
 	usage: null,
+	loadingPlan: false,
 };
 
 export const useCloudPlanStore = defineStore('cloudPlan', () => {
@@ -49,16 +50,28 @@ export const useCloudPlanStore = defineStore('cloudPlan', () => {
 		const hasCloudPlan =
 			usersStore.currentUser?.isOwner && settingsStore.isCloudDeployment && cloudUserId;
 		if (!hasCloudPlan) throw new Error('User does not have a cloud plan');
-		return getCurrentPlan(rootStore.getRestCloudApiContext, cloudUserId as string);
+		state.loadingPlan = true;
+		let plan;
+		try {
+			plan = await getCurrentPlan(rootStore.getRestCloudApiContext, `${cloudUserId}`);
+			state.data = plan;
+			state.loadingPlan = false;
+		} catch (error) {
+			state.loadingPlan = false;
+			throw new Error(error);
+		}
+
+		return plan;
 	};
 
 	const getInstanceCurrentUsage = async () => {
-		return getCurrentUsage({ baseUrl: rootStore.getBaseUrl, sessionId: '' });
+		const usage = await getCurrentUsage({ baseUrl: rootStore.getBaseUrl, sessionId: '' });
+		state.usage = usage;
+		return usage;
 	};
 
 	return {
-		setData,
-		setUsage,
+		state,
 		getOwnerCurrentPLan,
 		getInstanceCurrentUsage,
 		userIsTrialing,
diff --git a/packages/editor-ui/src/stores/n8nRoot.store.ts b/packages/editor-ui/src/stores/n8nRoot.store.ts
index 401efa30e2cd5..61f46d0883ba2 100644
--- a/packages/editor-ui/src/stores/n8nRoot.store.ts
+++ b/packages/editor-ui/src/stores/n8nRoot.store.ts
@@ -50,7 +50,7 @@ export const useRootStore = defineStore(STORES.ROOT, {
 
 		getRestCloudApiContext(): IRestApiContext {
 			return {
-				baseUrl: this.baseUrl.includes('stage-app.n8n.cloud')
+				baseUrl: window.location.host.includes('stage-app.n8n.cloud')
 					? CLOUD_BASE_URL_STAGING
 					: CLOUD_BASE_URL_PRODUCTION,
 				sessionId: '',
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index d317281bbf803..7346aaaa18eb0 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -62,7 +62,14 @@
 			</div>
 		</div>
 		<n8n-action-box
-			v-else-if="mounted"
+			v-else-if="isTrialing"
+			:heading="$locale.baseText('settings.api.trial.upgradePlan.title')"
+			:description="$locale.baseText('settings.api.trial.upgradePlan.description')"
+			:buttonText="$locale.baseText('settings.api.trial.upgradePlan.cta')"
+			@click="onUpgrade"
+		/>
+		<n8n-action-box
+			v-else-if="mounted && !isLoadingCloudPlans"
 			:buttonText="
 				$locale.baseText(
 					loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
@@ -85,6 +92,8 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useUsersStore } from '@/stores/users.store';
 import { DOCS_DOMAIN } from '@/constants';
+import { useCloudPlanStore } from '@/stores';
+import { CLOUD_CHANGE_PLAN_PAGE } from '@/constants';
 
 export default mixins(showMessage).extend({
 	name: 'SettingsApiView',
@@ -111,12 +120,21 @@ export default mixins(showMessage).extend({
 			: `https://${DOCS_DOMAIN}/api/api-reference/`;
 	},
 	computed: {
-		...mapStores(useRootStore, useSettingsStore, useUsersStore),
+		...mapStores(useRootStore, useSettingsStore, useUsersStore, useCloudPlanStore),
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
+		isTrialing(): boolean {
+			return this.cloudPlanStore.userIsTrialing;
+		},
+		isLoadingCloudPlans(): boolean {
+			return this.cloudPlanStore.state.loadingPlan;
+		},
 	},
 	methods: {
+		onUpgrade() {
+			location.href = CLOUD_CHANGE_PLAN_PAGE;
+		},
 		async showDeleteModal() {
 			const confirmed = await this.confirmMessage(
 				this.$locale.baseText('settings.api.delete.description'),

From a74542460863a1b90c4b0328dd5bb465dc162b66 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Mon, 15 May 2023 14:13:24 -0400
Subject: [PATCH 52/52] add pluralization to days left text

---
 packages/editor-ui/src/components/ExecutionsUsage.vue | 2 +-
 packages/editor-ui/src/plugins/i18n/locales/en.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index 7cff55c2b521e..791a82a6693d6 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -16,7 +16,7 @@
 					<n8n-text size="small" :bold="true" color="warning">
 						{{
 							locale.baseText('executionUsage.currentUsage.count', {
-								interpolate: { days: daysLeftOnTrial.toString() },
+								adjustToNumber: daysLeftOnTrial,
 							})
 						}}
 					</n8n-text>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index cfe3dc116229f..62266b5aab2d8 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1827,7 +1827,7 @@
 	"sso.login.button": "Continue with SSO",
 	"executionUsage.currentUsage": "{text} {count}",
 	"executionUsage.currentUsage.text": "You are in a free trial with limited executions. You have",
-	"executionUsage.currentUsage.count": "{days} days left.",
+	"executionUsage.currentUsage.count": "{n} day left. | {n} days left.",
 	"executionUsage.label.executions": "Executions",
 	"executionUsage.button.upgrade": "Upgrade plan",
 	"executionUsage.expired.text": "You're trial is over. Upgrade now to keep your automation data",