add: ability to create seller account

crates/app/src/public/css/style.css

@@ -583,6 +583,9 @@ input[type="checkbox"]:checked {
     border-radius: 6px;
     height: max-content;
     font-weight: 600;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .notification.tr {
@@ -597,6 +600,11 @@ input[type="checkbox"]:checked {
     padding: 0;
 }
 
+.notification .icon {
+    width: 100%;
+    height: 100%;
+}
+
 /* chip */
 .chip {
     background: var(--color-primary);

crates/app/src/public/html/auth/seller_connection.lisp

@@ -0,0 +1,25 @@
+(text "{% extends \"auth/base.html\" %} {% block head %}")
+(title
+    (text "Connection"))
+
+(text "{% endblock %} {% block title %}Connection{% endblock %} {% block content %}")
+(div
+    ("class" "w-full flex-col gap-2")
+    ("id" "status")
+    (b
+        (text "Working...")))
+
+(text "{% if connection_type == \"refresh\" %}")
+(script
+    ("defer" "true")
+    (text "setTimeout(async () => {
+        trigger(\"seller::onboarding\");
+    }, 1000);"))
+(text "{% elif connection_type == \"return\" %}")
+(script
+    ("defer" "true")
+    (text "setTimeout(async () => {
+        document.getElementById(\"status\").innerHTML =
+            `<b>Account updated.</b> You can now close this tab.`;
+    }, 1000);"))
+(text "{%- endif %} {% endblock %}")

crates/app/src/public/html/macros.lisp

@@ -331,3 +331,17 @@
     (span
         (text "{{ text \"settings:tab.connections\" }}")))
 (text "{%- endmacro %}")
+
+(text "{% macro seller_settings_nav_options() -%}")
+(a
+    ("data-tab-button" "account")
+    ("class" "active")
+    ("href" "#/account")
+    (icon (text "smile"))
+    (span (str (text "settings:tab.account"))))
+(a
+    ("data-tab-button" "products")
+    ("href" "#/products")
+    (icon (text "package"))
+    (span (str (text "marketplace:label.products"))))
+(text "{%- endmacro %}")

crates/app/src/public/html/marketplace/seller.lisp

@@ -0,0 +1,79 @@
+(text "{% extends \"root.html\" %} {% block head %}")
+(title
+    (text "Seller settings - {{ config.name }}"))
+(text "{% endblock %} {% block body %} {{ macros::nav() }}")
+(main
+    ("class" "flex flex-col gap-2")
+
+    ; nav
+    (div
+        ("class" "mobile_nav mobile")
+        ; primary nav
+        (div
+            ("class" "dropdown")
+            ("style" "width: max-content")
+            (button
+                ("class" "raised small")
+                ("onclick" "trigger('atto::hooks::dropdown', [event])")
+                ("exclude" "dropdown")
+                (icon (text "sliders-horizontal"))
+                (span ("class" "current_tab_text") (text "account")))
+            (div
+                ("class" "inner left")
+                (text "{{ macros::seller_settings_nav_options() }}"))))
+
+    ; nav desktop
+    (div
+        ("class" "desktop pillmenu")
+        (text "{{ macros::seller_settings_nav_options() }}"))
+
+    ; ...
+    (div
+        ("class" "card w-full lowered flex flex-col gap-2")
+        ("data-tab" "account")
+        (div
+            ("class" "card-nest w-full")
+            (div
+                ("class" "card small flex items-center gap-2")
+                (div
+                    ("class" "notification")
+                    ("style" "width: 46px")
+                    (icon (text "stripe")))
+
+                (b (str (text "marketplace:label.status"))))
+
+            (div
+                ("class" "card")
+                (text "{% if user.seller_data.account_id -%}")
+                (text "{% if user.seller_data.completed_onboarding -%}")
+                ; completed onboarding + has stripe account linked
+                (button
+                    ("onclick" "trigger('seller::login')")
+                    (icon (text "arrow-right"))
+                    (str (text "marketplace:action.open_seller_dashboard")))
+                (text "{% else %}")
+                ; not completed onboarding
+                (p (text "You've not finished setting up your Stripe account."))
+                (p (text "Please complete onboarding to accept payments."))
+
+                (button
+                    ("onclick" "trigger('seller::onboarding')")
+                    (icon (text "arrow-right"))
+                    (str (text "marketplace:action.finsh_setting_up_account")))
+                (text "{%- endif %}")
+                (text "{% else %}")
+                ; doesn't have a stripe account linked
+                (button
+                    ("onclick" "trigger('seller::register')")
+                    (icon (text "arrow-right"))
+                    (str (text "marketplace:action.get_started")))
+                (text "{%- endif %}"))))
+
+    (div
+        ("class" "card w-full lowered hidden flex flex-col gap-2")
+        ("data-tab" "products")
+        (div
+            ("class" "card w-full flex flex-wrap gap-2")
+            )))
+
+(text "{% endblock %}")

crates/app/src/public/images/vendor/stripe.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 468 222.5" style="enable-background:new 0 0 468 222.5" xml:space="preserve"><style>.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#635bff}</style><path class="st0" d="M414 113.4c0-25.6-12.4-45.8-36.1-45.8-23.8 0-38.2 20.2-38.2 45.6 0 30.1 17 45.3 41.4 45.3 11.9 0 20.9-2.7 27.7-6.5v-20c-6.8 3.4-14.6 5.5-24.5 5.5-9.7 0-18.3-3.4-19.4-15.2h48.9c0-1.3.2-6.5.2-8.9zm-49.4-9.5c0-11.3 6.9-16 13.2-16 6.1 0 12.6 4.7 12.6 16h-25.8zM301.1 67.6c-9.8 0-16.1 4.6-19.6 7.8l-1.3-6.2h-22v116.6l25-5.3.1-28.3c3.6 2.6 8.9 6.3 17.7 6.3 17.9 0 34.2-14.4 34.2-46.1-.1-29-16.6-44.8-34.1-44.8zm-6 68.9c-5.9 0-9.4-2.1-11.8-4.7l-.1-37.1c2.6-2.9 6.2-4.9 11.9-4.9 9.1 0 15.4 10.2 15.4 23.3 0 13.4-6.2 23.4-15.4 23.4zM223.8 61.7l25.1-5.4V36l-25.1 5.3zM223.8 69.3h25.1v87.5h-25.1zM196.9 76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7 15.9-6.3 19-5.2v-23c-3.2-1.2-14.9-3.4-20.8 7.4zM146.9 47.6l-24.4 5.2-.1 80.1c0 14.8 11.1 25.7 25.9 25.7 8.2 0 14.2-1.5 17.5-3.3V135c-3.2 1.3-19 5.9-19-8.9V90.6h19V69.3h-19l.1-21.7zM79.3 94.7c0-3.9 3.2-5.4 8.5-5.4 7.6 0 17.2 2.3 24.8 6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6C67.5 67.6 54 78.2 54 95.9c0 27.6 38 23.2 38 35.1 0 4.6-4 6.1-9.6 6.1-8.3 0-18.9-3.4-27.3-8v23.8c9.3 4 18.7 5.7 27.3 5.7 20.8 0 35.1-10.3 35.1-28.2-.1-29.8-38.2-24.5-38.2-35.7z"/></svg>

crates/app/src/public/js/me.js

@@ -1201,3 +1201,60 @@
         ]);
     });
 })();
+
+(() => {
+    const self = reg_ns("seller");
+
+    self.define("register", async () => {
+        await trigger("atto::debounce", ["seller::register"]);
+
+        if (
+            !(await trigger("atto::confirm", [
+                "Are you sure you want to do this?",
+            ]))
+        ) {
+            return;
+        }
+
+        const res = await (
+            await fetch("/api/v1/service_hooks/stripe/seller/register", {
+                method: "POST",
+            })
+        ).json();
+
+        trigger("atto::toast", [res.ok ? "success" : "error", res.message]);
+        self.onboarding();
+    });
+
+    self.define("onboarding", async () => {
+        await trigger("atto::debounce", ["seller::onboarding"]);
+
+        const res = await (
+            await fetch("/api/v1/service_hooks/stripe/seller/onboarding", {
+                method: "POST",
+            })
+        ).json();
+
+        trigger("atto::toast", [res.ok ? "success" : "error", res.message]);
+
+        if (res.ok) {
+            window.location.href = res.payload;
+        }
+    });
+
+    self.define("login", async () => {
+        await trigger("atto::debounce", ["seller::login"]);
+
+        const res = await (
+            await fetch("/api/v1/service_hooks/stripe/seller/login", {
+                method: "POST",
+            })
+        ).json();
+
+        trigger("atto::toast", [res.ok ? "success" : "error", res.message]);
+
+        if (res.ok) {
+            window.location.href = res.payload;
+        }
+    });
+})();