Pro fixes (#1088)

* add pro badge to themer

* add isPro flag to palettes

* show based on currentUser.hasPro

* fix logged out user stuff

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

package-lock.json

@@ -13994,7 +13994,7 @@
     },
     "packages/webawesome-pro": {
       "name": "@shoelace-style/webawesome-pro",
-      "version": "3.0.0-alpha.13",
+      "version": "3.0.0-beta.1",
       "license": "TODO",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",

packages/webawesome/docs/_data/themer.js

@@ -715,7 +715,10 @@ export const elementPresets = themes.map(theme => ({
  * All palettes used by themes in a simple array.
  */
 export const palettes = themes
-  .map(theme => theme.palette)
+  .map(theme => ({
+    ...theme.palette,
+    isPro: theme.isPro,
+  }))
   .filter(
     (palette, index, array) =>
       array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index,

packages/webawesome/docs/_includes/sidebar.njk

@@ -320,7 +320,10 @@
 <ul>
   <li><a href="/docs/color-palettes">Color Palettes</a></li>
   <li><a href="/docs/themes">Themes</a></li>
-  <li><a href="/themer" data-turbo="false">Theme Builder</a></li>
+  <li>
+    <a href="/themer" data-turbo="false">Theme Builder</a>
+    <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+  </li>
 </ul>
 
 <!-- Design tokens -->

packages/webawesome/docs/docs/color-palettes.njk

@@ -2,7 +2,6 @@
 title: Color Palettes
 description: 'Color palettes give you a full spectrum of colors to add life to your project.'
 layout: page
-isPro: true
 ---
 
 <p>Color palettes give you a full spectrum of colors to add life to your project.</p>
@@ -14,9 +13,36 @@ isPro: true
 {% endfor %}
 
 <div id="color-palettes">
+  {% raw %}
+    {% if not currentUser.hasPro %}
+      <p>
+        Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
+      </p>
+    {% endif %}
+  {% endraw %}
   <wa-radio-group id="palette-picker" label="Color Palette" value="default" orientation="horizontal">
     {% for palette in themer.palettes %}
-      <wa-radio class="palette-card" value="{{ palette.name | lower }}">{{ palette.name }}</wa-radio>
+      {% if not palette.isPro %}
+        <wa-radio
+          class="palette-card"
+          value="{{ palette.name | lower }}"
+        >
+          {{ palette.name }}
+        </wa-radio>
+      {% else %}
+        {% raw %}
+          {% if currentUser.hasPro %}
+        {% endraw %}
+            <wa-radio
+              class="palette-card"
+              value="{{ palette.name | lower }}"
+            >
+              {{ palette.name }}
+            </wa-radio>
+        {% raw %}
+          {% endif %}
+        {% endraw %}
+      {% endif %}
     {% endfor %}
   </wa-radio-group>
 
@@ -124,13 +150,16 @@ isPro: true
     border: 1px solid var(--wa-color-surface-border);
     border-radius: var(--border-radius);
     box-shadow: var(--wa-shadow-s);
-    cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
     font-weight: var(--wa-font-weight-action);
     text-transform: capitalize;
   }
 
+  .palette-card:not(:state(disabled)) {
+    cursor: pointer;
+  }
+
   .palette-card:state(checked) {
     border-color: var(--wa-color-brand-border-loud);
     background-color: var(--wa-color-brand-fill-quiet);

packages/webawesome/docs/docs/themes.njk

@@ -2,7 +2,6 @@
 title: Themes
 description: Themes galore
 layout: page
-isPro: true
 ---
 
 <div class="wa-stack wa-gap-3xl">
@@ -16,17 +15,41 @@ isPro: true
   </div>
 
   <div id="theme-viewer">
+    {% if not currentUser.hasPro %}
+      <p>
+        Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
+      </p>
+    {% endif %}
+
     <wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
       {% for theme in themer.themes %}
-        <wa-radio
+        {% if not theme.isPro %}
-          class="theme-card"
+          <wa-radio
-          value="{{ theme.filename | stripExtension }}"
+            class="theme-card"
-          data-description="{{ theme.description }}"
+            value="{{ theme.filename | stripExtension }}"
-          data-title="{{ theme.name }}"
+            data-description="{{ theme.description }}"
-          {% if theme.isPro %}data-is-pro{% endif %}
+            data-title="{{ theme.name }}"
-        >
+            {% if theme.isPro %}data-is-pro{% endif %}
-          {{ theme.name }}
+          >
-        </wa-radio>
+            {{ theme.name }}
+          </wa-radio>
+        {% else %}
+          {% raw %}
+            {% if currentUser.hasPro %}
+          {% endraw %}
+            <wa-radio
+              class="theme-card"
+              value="{{ theme.filename | stripExtension }}"
+              data-description="{{ theme.description }}"
+              data-title="{{ theme.name }}"
+              {% if theme.isPro %}data-is-pro{% endif %}
+            >
+              {{ theme.name }}
+            </wa-radio>
+          {% raw %}
+            {% endif %}
+          {% endraw %}
+        {% endif %}
       {% endfor %}
     </wa-radio-group>
   </div>
@@ -218,12 +241,15 @@ isPro: true
       border: 1px solid var(--wa-color-surface-border);
       border-radius: var(--border-radius);
       box-shadow: var(--wa-shadow-s);
-      cursor: pointer;
       transition: all 0.2s ease;
       text-align: center;
       font-weight: var(--wa-font-weight-action);
       text-transform: capitalize;
 
+      &:not(:state(disabled)) {
+        cursor: pointer;
+      }
+
       &:state(checked) {
         border-color: var(--wa-color-brand-border-loud);
         background-color: var(--wa-color-brand-fill-quiet);