Phone view: Premium managment

src/pages/Premium/Premium.module.scss

@@ -406,6 +406,10 @@
   flex-direction: column;
   width: 466px;
 
+  @media only screen and (max-width: 720px) {
+    width: unset;
+  }
+
   .footer {
     display:flex;
     justify-content: space-between;
@@ -849,6 +853,81 @@
     li {
       list-style: disc;
       list-style-position: inside;
+
+      .chevronRight {
+        display: none;
+      }
+    }
+  }
+}
+
+.managePremium {
+  padding-inline: 12px;
+  .premiumSidebar {
+    .premiumSidebarTitle {
+      color: var(--text-primary);
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 20px;
+      margin-bottom: 16px;
+    }
+
+    .premiumSidebarDescription {
+      color: var(--text-secondary);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+
+      p, ul {
+        color: var(--text-secondary);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        background-color: var(--background-header-input);
+        border-radius: 8px;
+      }
+
+      ul {
+        padding-left: 0;
+      }
+
+      li {
+        list-style: none;
+        list-style-position: inside;
+        padding: 14px 16px;
+        button {
+          color: var(--text-primary);
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px;
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .chevronRight {
+            display: block;
+            width: 6px;
+            height: 16px;
+            background-color: var(--text-primary);
+            -webkit-mask: url(../../assets/icons/chevron_right.svg) no-repeat 0 / 100%;
+            mask: url(../../assets/icons/chevron_right.svg) no-repeat 0 / 100%;
+          }
+        }
+
+        border-bottom: 1px solid var(--subtile-devider);
+        border-radius: 0;
+
+        &:first-child {
+          border-radius: 8px 8px 0 0;
+        }
+
+        &:last-child {
+          border-bottom: none;
+          border-radius: 0 0 8px 8px;
+        }
+      }
     }
   }
 }
@@ -1117,6 +1196,10 @@
   align-items: center;
   gap: 20px;
 
+  @media only screen and (max-width: 720px) {
+    width: unset;
+  }
+
   .description, .warning {
     width: 100%;
     color: var(--text-secondary);
@@ -1168,6 +1251,10 @@
 .renameDialog {
   width: 440px;
 
+  @media only screen and (max-width: 720px) {
+    width: unset;
+  }
+
   .nameAvailableMessage {
     margin-top: 20px;
     width: 100%;
@@ -1776,6 +1863,7 @@
       font-size: 15px;
       font-weight: 400;
       line-height: 20px;
+      min-width: unset;
     }
 
     .tdDetails {
@@ -1813,6 +1901,10 @@
         outline: none;
         background: none;
       }
+
+      @media only screen and (max-width: 720px) {
+        width: unset;
+      }
     }
   }
 
@@ -1831,6 +1923,10 @@
   width: 672px;
   border-radius: 12px;
   background: var(--background-input);
+
+  @media only screen and (max-width: 720px) {
+    padding-inline: 6px;
+  }
 }
 
 .orderHistory {
@@ -1842,6 +1938,10 @@
     width: 100%;
     margin-top: 24px;
 
+    @media only screen and (max-width: 720px) {
+      width: calc(100dvw - 24px);
+    }
+
     th {
       color: var(--text-primary);
       font-size: 15px;

src/pages/Premium/Premium.tsx

@@ -56,6 +56,7 @@ import { useToastContext } from '../../components/Toaster/Toaster';
 import { triggerImportEvents } from '../../lib/notes';
 import { useAppContext } from '../../contexts/AppContext';
 import { isPhone } from '../../utils';
+import PremiumManageModal from './PremiumManageModal';
 
 export const satsInBTC = 100_000_000;
 
@@ -91,6 +92,7 @@ export type PremiumStore = {
   openPromoCode: boolean,
   openRename: boolean,
   openRenew: boolean,
+  openManage: boolean,
   openOrderHistory: boolean,
   openFeatures: 'features' | 'faq' | undefined,
   openLegend: boolean,
@@ -157,6 +159,7 @@ const Premium: Component = () => {
     openPromoCode: false,
     openRename: false,
     openRenew: false,
+    openManage: false,
     openLegend: false,
     openOrderHistory: false,
     openFeatures: undefined,
@@ -738,6 +741,9 @@ const Premium: Component = () => {
         await getSubscriptionInfo();
         setPremiumData('openRenew', () => true);
         break;
+        case 'managePremium':
+        setPremiumData('openManage', () => true);
+        break;
       case 'orderHistory':
         setPremiumData('openOrderHistory', () => true);
         break;
@@ -1038,7 +1044,9 @@ const Premium: Component = () => {
                 data={premiumData}
                 profile={account?.activeUser}
                 updateUserMetadata={updateUserMetadata}
-                onExtendPremium={() => handlePremiumAction('extendSubscription')}/>
+                onExtendPremium={() => handlePremiumAction('extendSubscription')}
+                onManagePremium={() => handlePremiumAction('managePremium')}
+              />
             </Match>
 
             <Match when={
@@ -1150,6 +1158,14 @@ const Premium: Component = () => {
             setData={setPremiumData}
           />
 
+          <PremiumManageModal
+            open={premiumData.openManage}
+            setOpen={(v: boolean) => setPremiumData('openManage', () => v)}
+            data={premiumData}
+            setData={setPremiumData}
+            onSelect={handlePremiumAction}
+          />
+
           <PremiumOrderHistoryModal
             open={premiumData.openOrderHistory}
             setOpen={(v: boolean) => setPremiumData('openOrderHistory', () => v)}

src/pages/Premium/PremiumManageModal.tsx

@@ -0,0 +1,59 @@
+import { Component, createEffect, Show } from 'solid-js';
+import { SetStoreFunction } from 'solid-js/store';
+import AdvancedSearchDialog from '../../components/AdvancedSearch/AdvancedSearchDialog';
+import ButtonPrimary from '../../components/Buttons/ButtonPrimary';
+import ButtonSecondary from '../../components/Buttons/ButtonSecondary';
+import { PremiumStore } from './Premium';
+
+import styles from './Premium.module.scss';
+import PremiumSubscriptionOptions from './PremiumSubscriptionOptions';
+import PremiumSidebarActive from './PremiumSidebarActive';
+
+
+const PremiumManageModal: Component<{
+  data: PremiumStore,
+  setData: SetStoreFunction<PremiumStore>,
+  onSelect: (action: string) => void,
+  open?: boolean,
+  setOpen: (v: boolean) => void,
+  onOpen?: () => void,
+  onClose?: () => void,
+}> = (props) => {
+
+  createEffect(() => {
+    if (props.open) {
+      props.onOpen && props.onOpen();
+    } else {
+      props.onClose && props.onClose();
+    }
+  })
+
+  return (
+    <AdvancedSearchDialog
+      open={props.open}
+      setOpen={props.setOpen}
+      triggerClass="hidden"
+      title={
+        <div>
+          Manage Premium
+        </div>
+      }
+    >
+      <div class={styles.managePremium}>
+        <PremiumSidebarActive
+          data={props.data}
+          onSidebarAction={(action) => {
+            props.setOpen(false);
+            props.onSelect(action);
+          }}
+          onOpenFAQ={() => {
+            props.setOpen(false);
+            props.setData('openFeatures', () => 'faq');
+          }}
+        />
+      </div>
+    </AdvancedSearchDialog>
+  );
+}
+
+export default PremiumManageModal

src/pages/Premium/PremiumSidebarActive.tsx

@@ -41,22 +41,22 @@ const PremiumSidebarActive: Component<{
         <ul>
           <li>
             <ButtonLink onClick={() => props.onSidebarAction('premiumRelay')}>
-              Premium Relay
+              <div>Premium Relay</div> <div class={styles.chevronRight}></div>
             </ButtonLink>
           </li>
           <li>
             <ButtonLink onClick={() => props.onSidebarAction('mediaManagment')}>
-              Media Managment
+              <div>Media Managment</div> <div class={styles.chevronRight}></div>
             </ButtonLink>
           </li>
           <li>
             <ButtonLink onClick={() => props.onSidebarAction('contactBackup')}>
-              Contact List Backup
+              <div>Contact List Backup</div> <div class={styles.chevronRight}></div>
             </ButtonLink>
           </li>
           <li>
             <ButtonLink onClick={() => props.onSidebarAction('contentBackup')}>
-              Content Backup
+              <div>Content Backup</div> <div class={styles.chevronRight}></div>
             </ButtonLink>
           </li>
         </ul>
@@ -70,37 +70,37 @@ const PremiumSidebarActive: Component<{
         <ul>
           <li>
             <ButtonLink onClick={() => props.onSidebarAction('orderHistory')}>
-              Order history
+              <div>Order history</div> <div class={styles.chevronRight}></div>
             </ButtonLink>
           </li>
           <Show when={!isLegend()}>
             <li>
               <ButtonLink onClick={() => props.onSidebarAction('extendSubscription')}>
                 <Show
                   when={isExpired()}
-                  fallback="Extend your subscripton"
+                  fallback={<><div>Extend your subscripton</div> <div class={styles.chevronRight}></div></>}
                 >
-                  Renew your subscripton
+                  <div>Renew your subscripton</div> <div class={styles.chevronRight}></div>
                 </Show>
               </ButtonLink>
             </li>
           </Show>
           <li>
             <ButtonLink onClick={() => props.onSidebarAction('changeName')}>
-              Change your Primal name
+              <div>Change your Primal name</div> <div class={styles.chevronRight}></div>
             </ButtonLink>
           </li>
           <Show when={isLegend()}>
             <li>
               <ButtonLink onClick={() => props.onSidebarAction('customLegend')}>
-                Legendary Profile Customization
+                <div>Legendary Profile Customization</div> <div class={styles.chevronRight}></div>
               </ButtonLink>
             </li>
           </Show>
             <Show when={!isExpired() && !isLegend()}>
               <li>
                 <ButtonLink onClick={() => props.onSidebarAction('becomeLegend')}>
-                  Become a Legend
+                  <div>Become a Legend</div> <div class={styles.chevronRight}></div>
                 </ButtonLink>
               </li>
             </Show>