Sponsor: trial and Victron-support messages (#14095)

assets/js/components/Sponsor.story.vue

@@ -7,8 +7,14 @@ import Sponsor from "./Sponsor.vue";
 		<Variant title="no sponsor">
 			<Sponsor />
 		</Variant>
+		<Variant title="trial">
+			<Sponsor sponsor="trial" />
+		</Variant>
 		<Variant title="sponsor">
 			<Sponsor sponsor="naltatis" />
 		</Variant>
+		<Variant title="victron device">
+			<Sponsor sponsor="victron-device" />
+		</Variant>
 	</Story>
 </template>

assets/js/components/Sponsor.vue

@@ -1,39 +1,53 @@
 <template>
-	<div v-if="sponsor">
+	<div v-if="isIndividual || isVictronDevice">
 		<p class="fw-bold mb-1 d-flex">
 			<shopicon-regular-heart
 				class="title-icon text-primary d-inline-block me-1"
 			></shopicon-regular-heart>
-			{{ $t("footer.sponsor.titleSponsor") }}
+			{{ $t(`footer.sponsor.${isVictronDevice ? "titleVictron" : "titleSponsor"}`) }}
+		</p>
+		<p class="mb-3">
+			{{ $t(`footer.sponsor.${isVictronDevice ? "victron" : "thanks"}`, { sponsor }) }}
 		</p>
-		<p class="mb-3">{{ $t("footer.sponsor.thanks", { sponsor }) }}</p>
 		<div
 			class="d-flex justify-content-center align-items-center flex-column flex-lg-row align-items-lg-baseline justify-content-lg-start"
 		>
 			<button
 				ref="confetti"
-				class="btn btn btn-outline-primary mb-2 confetti-button bg-evcc rounded"
+				class="btn btn btn-outline-primary mb-2 confetti-button bg-evcc rounded flex-shrink-0"
 				@click="surprise"
 			>
 				<shopicon-regular-stars class="me-1 d-inline-block"></shopicon-regular-stars>
 				{{ $t("footer.sponsor.confetti") }}
 			</button>
-			<a href="https://evcc.io/sticker" target="_blank" class="small text-muted ms-lg-3">
+			<a
+				v-if="isIndividual"
+				href="https://evcc.io/sticker"
+				target="_blank"
+				class="small text-muted ms-lg-3"
+			>
 				{{ $t("footer.sponsor.sticker") }}
 			</a>
+			<a v-else :href="sponsorLink" target="_blank" class="small text-muted ms-lg-3">
+				{{ $t("footer.sponsor.becomeSponsorExtended") }}
+			</a>
 		</div>
 	</div>
-	<div v-else>
+	<div v-if="!sponsor || isTrial">
 		<p class="fw-bold mb-1">
-			{{ $t("footer.sponsor.titleNoSponsor") }}
+			<shopicon-regular-clock
+				v-if="isTrial"
+				class="title-icon text-primary d-inline-block me-1"
+			></shopicon-regular-clock>
+			{{ $t(`footer.sponsor.${isTrial ? "titleTrial" : "titleNoSponsor"}`) }}
 		</p>
-		<p class="mb-3">{{ $t("footer.sponsor.supportUs") }}</p>
+		<p class="mb-3">{{ $t(`footer.sponsor.${isTrial ? "trial" : "supportUs"}`) }}</p>
 		<div
 			class="d-flex justify-content-center align-items-center flex-column flex-lg-row align-items-lg-baseline justify-content-lg-start"
 		>
 			<a
 				target="_blank"
-				href="https://github.com/sponsors/evcc-io"
+				:href="sponsorLink"
 				class="btn btn-outline-primary mb-3 become-sponsor"
 			>
 				<shopicon-regular-heart class="me-1 d-inline-block"></shopicon-regular-heart>
@@ -50,12 +64,28 @@
 import confetti from "canvas-confetti";
 import "@h2d2/shopicons/es/regular/heart";
 import "@h2d2/shopicons/es/regular/stars";
+import "@h2d2/shopicons/es/regular/clock";
+import { docsPrefix } from "../i18n";
 
 export default {
 	name: "Sponsor",
 	props: {
 		sponsor: String,
 	},
+	computed: {
+		isTrial() {
+			return this.sponsor === "trial";
+		},
+		isVictronDevice() {
+			return this.sponsor === "victron-device";
+		},
+		isIndividual() {
+			return this.sponsor && !this.isTrial && !this.isVictronDevice;
+		},
+		sponsorLink() {
+			return `${docsPrefix()}/docs/sponsorship`;
+		},
+	},
 	methods: {
 		surprise: function () {
 			const $el = this.$refs.confetti;

i18n/de.toml

@@ -163,13 +163,18 @@ total = "gesamt"
 
 [footer.sponsor]
 becomeSponsor = "Sponsor werden"
+becomeSponsorExtended = "Unterstütze uns direkt. Es gibt auch Sticker."
 confetti = "Lust auf Konfetti?"
 confettiPromise = "Es gibt auch Sticker und digitales Konfetti"
 sticker = "… oder evcc Sticker?"
 supportUs = "Unsere Mission: Sonne tanken zum Standard machen. Hilf uns und unterstütze evcc finanziell."
 thanks = "Vielen Dank, {sponsor}! Dein Beitrag hilft, evcc weiterzuentwickeln."
 titleNoSponsor = "Unterstütze uns"
 titleSponsor = "Du bist Unterstützer"
+titleTrial = "Testmodus"
+titleVictron = "Unterstützt von Victron Energy"
+trial = "Du befindest dich im Testmodus und kannst alle Funktionen nutzen. Wir freuen uns, wenn du Sponsor wirst."
+victron = "Du verwendest evcc auf Victron Energy Hardware und hast Zugriff auf alle Funktionen."
 
 [footer.telemetry]
 optIn = "Ich möchte meine Ladedaten teilen."

i18n/en.toml

@@ -161,14 +161,19 @@ tabTitle = "My data"
 total = "all time"
 
 [footer.sponsor]
-becomeSponsor = "Become a Sponsor"
+becomeSponsor = "Become a sponsor"
+becomeSponsorExtended = "Support us directly to get stickers."
 confetti = "Ready for confetti?"
 confettiPromise = "You get stickers and digital confetti"
 sticker = "… or evcc stickers?"
-supportUs = "Our mission is to make solar the norm. Help evcc by paying what it is worth to you."
+supportUs = "Our mission is to make solar charging the norm. Help evcc by paying what it is worth to you."
 thanks = "Thank you, {sponsor}! Your contribution helps develop evcc further."
 titleNoSponsor = "Support us"
 titleSponsor = "You are a supporter"
+titleTrial = "Trial mode"
+titleVictron = "Sponsored by Victron Energy"
+trial = "You are in trial mode and can use all features. Please consider supporting the project."
+victron = "You're using evcc on Victron Energy hardware and have access to all features."
 
 [footer.telemetry]
 optIn = "I want to contribute my data."