feat: optional custom domain (#71)

* feat: optional custom domain
* fix: business plan too

Author: motorina0

src/components/cards/ChatCard.vue

@@ -3,47 +3,82 @@
     <iframe
       id="lnbits-chat-embed-iframe"
       ref="chatIframe"
+      class="lnbits-chat-embed-iframe"
       loading="lazy"
-      style="
-        position: fixed;
-        right: 24px;
-        bottom: 24px;
-        width: 360px;
-        height: 64px;
-        border: 0;
-        border-radius: 12px;
-        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
-        z-index: 9999;
-        transition: height 0.2s ease;
-        overflow: hidden;
-      "
     ></iframe>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import {onBeforeUnmount, onMounted, ref} from 'vue'
 import {saas} from 'src/boot/saas'
 
 const chatIframe = ref(null)
+const chatUrl = ref('')
+
+const CHAT_BOTTOM_OFFSET = 24
+const CHAT_COLLAPSED_HEIGHT = 56
+const CHAT_EXPANDED_HEIGHT = 520
+const CHAT_SCROLL_BUFFER = 24
+
+function syncChatLayout(isOpen) {
+  const iframe = chatIframe.value
+  if (!iframe) return
+
+  const iframeHeight = isOpen
+    ? CHAT_EXPANDED_HEIGHT
+    : CHAT_COLLAPSED_HEIGHT
+
+  iframe.style.height = `${iframeHeight}px`
+  document.documentElement.style.setProperty(
+    '--chat-embed-safe-space',
+    `${iframeHeight + CHAT_BOTTOM_OFFSET + CHAT_SCROLL_BUFFER}px`
+  )
+}
+
+function handleMessage(event) {
+  if (!event.data || event.data.source !== 'lnbits-chat-embed') return
+
+  const iframe = chatIframe.value
+  if (!iframe) return
+
+  if (event.data.url && event.data.url !== chatUrl.value) {
+    chatUrl.value = event.data.url
+    localStorage.setItem('chatUrl', chatUrl.value)
+    iframe.src = chatUrl.value
+  }
+
+  syncChatLayout(Boolean(event.data.open))
+}
 
 onMounted(() => {
   const iframe = chatIframe.value
   if (!iframe) return
-  let chatUrl = localStorage.getItem('chatUrl') || saas.chatUrl
-  iframe.src = chatUrl
-  const minHeight = 56
-  const maxHeight = 520
-  window.addEventListener('message', function (event) {
-    if (!event.data || event.data.source !== 'lnbits-chat-embed') return
-    if (event.data.url && event.data.url !== chatUrl) {
-      chatUrl = event.data.url
-      localStorage.setItem('chatUrl', chatUrl)
-      iframe.src = chatUrl
-    }
-    iframe.style.height = event.data.open ? maxHeight + 'px' : minHeight + 'px'
-
-  })
 
+  chatUrl.value = localStorage.getItem('chatUrl') || saas.chatUrl
+  iframe.src = chatUrl.value
+  syncChatLayout(false)
+  window.addEventListener('message', handleMessage)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', handleMessage)
+  document.documentElement.style.removeProperty('--chat-embed-safe-space')
 })
 </script>
+
+<style scoped>
+.lnbits-chat-embed-iframe {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  width: 360px;
+  height: 56px;
+  border: 0;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+  z-index: 9999;
+  transition: height 0.2s ease;
+  overflow: hidden;
+}
+</style>

src/components/tables/InstancesTable.vue

@@ -1469,7 +1469,8 @@ export default defineComponent({
             '<p>This payment plan supports a custom subdomain or a full custom domain. Enter the hostname you want to use for this instance.</p>' +
             '<p>You will need to configure your domain\'s DNS settings. <a href="https://community.lnbits.com/t/custom-domain-names-dns-setup-guide/60" title="LNbits SaaS custom DNS settings" target="_blank">Find out how here.</a></p>',
           label: 'Domain or subdomain',
-          hint: 'Examples: my-team or pay.example.com',
+          hint: 'Optional. Examples: my-team or pay.example.com',
+          optional: true,
           missingMessage: 'Enter a custom domain or subdomain.',
           invalidMessage: 'Use a valid hostname such as my-team or pay.example.com.',
           formatValue: value => this.normalizeDomainValue(value),
@@ -1481,11 +1482,12 @@ export default defineComponent({
         return {
           title: 'Custom subdomain',
           message:
-            '<p>This payment plan includes a custom subdomain. Enter the subdomain you want to reserve for this instance.</p>' + 
+            '<p>This payment plan includes a custom subdomain. Enter the subdomain you want to reserve for this instance.</p>' +
             '<p>You will need to configure your domain\'s DNS settings. <a href="https://community.lnbits.com/t/custom-domain-names-dns-setup-guide/60" title="LNbits SaaS custom DNS settings" target="_blank">Find out how here.</a></p>',
           label: 'Subdomain',
-          hint: 'Example: my-team.lnbits.com',
+          hint: 'Optional. Example: my-team.lnbits.com',
           suffix: '.lnbits.com',
+          optional: true,
           missingMessage: 'Enter a custom subdomain.',
           invalidMessage: 'Use only letters, numbers, and hyphens for the subdomain.',
           formatValue: value => {
@@ -2588,7 +2590,7 @@ export default defineComponent({
       }
 
       if (!this.normalizedPlanDomain) {
-        return config.missingMessage
+        return config.optional ? '' : config.missingMessage
       }
 
       if (!config.isValid(this.normalizedPlanDomain)) {

src/css/app.css

@@ -9,6 +9,7 @@
   --surface-glass: rgba(255, 255, 255, 0.08);
   --surface-glass-strong: rgba(255, 255, 255, 0.12);
   --stroke-glass: rgba(255, 255, 255, 0.16);
+  --chat-embed-safe-space: 0px;
 }
 
 body {
@@ -545,6 +546,12 @@ pre {
   background: transparent;
 }
 
+@media (min-width: 600px) {
+  .app-shell__page-container {
+    padding-bottom: var(--chat-embed-safe-space);
+  }
+}
+
 .body--dark .app-shell .q-header {
   background: linear-gradient(120deg, rgba(12, 7, 20, 0.88), rgba(22, 10, 36, 0.7));
   backdrop-filter: blur(14px);

src/layouts/MainLayout.vue

@@ -103,7 +103,7 @@
       </q-list>
     </q-drawer>
 
-    <q-page-container>
+    <q-page-container class="app-shell__page-container">
       <router-view />
     </q-page-container>
   </q-layout>