check if mutiny plus

src/components/MutinyPlusCta.tsx

@@ -0,0 +1,40 @@
+import { ParentComponent } from "solid-js";
+import { A } from "solid-start";
+
+import forward from "~/assets/icons/forward.svg";
+import { useI18n } from "~/i18n/context";
+
+export const CtaCard: ParentComponent = (props) => {
+    return (
+        <div class="w-full">
+            <div class="relative">
+                <div class="to-bg-m-grey-900/50 absolute inset-0 h-full w-full scale-[0.60] transform rounded-full bg-m-red/50 bg-gradient-to-r from-m-red/50 blur-2xl" />
+                <div class="relative flex-col gap-2 rounded-xl border border-m-red bg-m-grey-800 py-4">
+                    {props.children}{" "}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export function MutinyPlusCta() {
+    const i18n = useI18n();
+    return (
+        <CtaCard>
+            <A
+                href={"/settings/plus"}
+                class="flex w-full flex-col gap-1 px-4 py-2 no-underline hover:bg-m-grey-750 active:bg-m-grey-900"
+            >
+                <div class="flex justify-between">
+                    <span>
+                        Mutiny<span class="text-m-red">+</span>
+                    </span>
+                    <img src={forward} alt="go" />
+                </div>
+                <div class="text-sm text-m-grey-400">
+                    {i18n.t("settings.plus.cta_description")}
+                </div>
+            </A>
+        </CtaCard>
+    );
+}

src/components/index.ts

@@ -43,3 +43,4 @@ export * from "./Toaster";
 export * from "./NostrActivity";
 export * from "./SyncContactsForm";
 export * from "./GiftLink";
+export * from "./MutinyPlusCta";

src/i18n/en/translations.ts

@@ -407,7 +407,9 @@ export default {
             satisfaction: "Smug satisfaction",
             gifting: "Gifting",
             multi_device: "Multi-device access",
-            more: "... and more to come"
+            more: "... and more to come",
+            cta_description:
+                "Enjoy early access to new features and premium functionality."
         },
         restore: {
             title: "Restore",
@@ -486,7 +488,9 @@ export default {
             send_cta: "Create a gift",
             send_delete_button: "Delete Gift",
             send_delete_confirm:
-                "Are you sure you want to delete this gift? Is this your rugpull moment?"
+                "Are you sure you want to delete this gift? Is this your rugpull moment?",
+            need_plus:
+                "Upgrade to Mutiny+ to enable gifting. Gifting allows you to create a Mutiny gift URL that can be claimed by anyone with a web browser."
         }
     },
     swap: {

src/routes/settings/Connections.tsx

@@ -144,9 +144,9 @@ function NwcDetails(props: {
                 </KeyValue>
                 {/* No interval for gifts */}
                 <Show when={props.profile.budget_period}>
-                <KeyValue key={i18n.t("settings.connections.resets_every")}>
-                    {props.profile.budget_period}
-                </KeyValue>
+                    <KeyValue key={i18n.t("settings.connections.resets_every")}>
+                        {props.profile.budget_period}
+                    </KeyValue>
                 </Show>
             </Show>
 
@@ -302,7 +302,7 @@ function Nwc() {
                 <SettingsCard
                     title={i18n.t("settings.connections.manage_connections")}
                 >
-                    <For each={nwcProfiles()?.filter(p => p.tag !== "Gift")}>
+                    <For each={nwcProfiles()?.filter((p) => p.tag !== "Gift")}>
                         {(profile) => (
                             <Collapser
                                 title={profile.name}

src/routes/settings/Gift.tsx

@@ -29,6 +29,7 @@ import {
     IntegratedQr,
     LargeHeader,
     LoadingSpinner,
+    MutinyPlusCta,
     MutinyWalletGuard,
     NavBar,
     NiceP,
@@ -47,7 +48,10 @@ type CreateGiftForm = {
     amount: string;
 };
 
-export function SingleGift(props: { profile: NwcProfile; onDelete?: () => void }) {
+export function SingleGift(props: {
+    profile: NwcProfile;
+    onDelete?: () => void;
+}) {
     const i18n = useI18n();
     const [state, _actions] = useMegaStore();
 
@@ -199,6 +203,15 @@ export default function GiftPage() {
             <SafeArea>
                 <DefaultMain>
                     <BackPop />
+                    <Show when={!state.mutiny_plus}>
+                        <VStack>
+                            <LargeHeader>
+                                {i18n.t("settings.gift.send_header")}
+                            </LargeHeader>
+                            <NiceP>{i18n.t("settings.gift.need_plus")}</NiceP>
+                            <MutinyPlusCta />
+                        </VStack>
+                    </Show>
                     <Show when={giftResult()}>
                         <VStack>
                             <Switch>
@@ -234,7 +247,7 @@ export default function GiftPage() {
                             </Button>
                         </VStack>
                     </Show>
-                    <Show when={!giftResult()}>
+                    <Show when={!giftResult() && state.mutiny_plus}>
                         <LargeHeader>
                             {i18n.t("settings.gift.send_header")}
                         </LargeHeader>

src/routes/settings/Plus.tsx

@@ -36,14 +36,11 @@ function Perks(props: { alreadySubbed?: boolean }) {
             <Show when={props.alreadySubbed}>
                 <li>{i18n.t("settings.plus.satisfaction")}</li>
             </Show>
+            <li>{i18n.t("settings.plus.gifting")} </li>
             <li>
                 {i18n.t("redshift.title")}{" "}
                 <em>{i18n.t("common.coming_soon")}</em>
             </li>
-            <li>
-                {i18n.t("settings.plus.gifting")}{" "}
-                <em>{i18n.t("common.coming_soon")}</em>
-            </li>
             <li>
                 {i18n.t("settings.plus.multi_device")}{" "}
                 <em>{i18n.t("common.coming_soon")}</em>

src/routes/settings/index.tsx

@@ -7,6 +7,7 @@ import {
     DefaultMain,
     ExternalLink,
     LargeHeader,
+    MutinyPlusCta,
     NavBar,
     SafeArea,
     SettingsCard,
@@ -78,15 +79,7 @@ export default function Settings() {
                 <LargeHeader>{i18n.t("settings.header")}</LargeHeader>
                 <VStack biggap>
                     <Show when={state.settings?.selfhosted !== "true"}>
-                        <SettingsLinkList
-                            header={i18n.t("settings.plus.title")}
-                            links={[
-                                {
-                                    href: "/settings/plus",
-                                    text: i18n.t("settings.support")
-                                }
-                            ]}
-                        />
+                        <MutinyPlusCta />
                     </Show>
                     <SettingsLinkList
                         header={i18n.t("settings.general")}
@@ -137,7 +130,9 @@ export default function Settings() {
                                 disabled: !state.mutiny_plus,
 
                                 text: i18n.t("settings.gift.title"),
-                                caption: !state.mutiny_plus ? "Upgrade to Mutiny+ to enabled gifting" : undefined
+                                caption: !state.mutiny_plus
+                                    ? "Upgrade to Mutiny+ to enabled gifting"
+                                    : undefined
                             },
                             {
                                 href: "/settings/lnurlauth",