72 lines
3.2 KiB
JavaScript
72 lines
3.2 KiB
JavaScript
import "/_/code/components/LoadingCircle.js"
|
|
|
|
class DesktopIntegrationsSection extends Shadow {
|
|
constructor(stripeDetails, onConnectStripe) {
|
|
super()
|
|
this.stripeDetails = stripeDetails
|
|
this.onConnectStripe = onConnectStripe
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
HStack(() => {
|
|
VStack(() => {
|
|
p("Integrations")
|
|
.margin(0).fontSize(1.35, em).fontWeight("700").color("var(--headertext)")
|
|
p("Connect third-party services to your network")
|
|
.margin(0).marginTop(0.2, em).fontSize(0.75, em).color("var(--headertext)").opacity(0.42)
|
|
})
|
|
.gap(0)
|
|
})
|
|
.paddingHorizontal(1.75, em).paddingTop(1.5, em).paddingBottom(1.25, em)
|
|
.alignItems("flex-start").flexShrink(0)
|
|
|
|
VStack(() => {
|
|
this.settingSection("💳", "Stripe", "Accept payments and manage subscriptions", () => {
|
|
if (this.stripeDetails === null) {
|
|
LoadingCircle()
|
|
} else if (this.stripeDetails?.email) {
|
|
HStack(() => {
|
|
VStack(() => {}).width(8, px).height(8, px).borderRadius(50, pct).background("#10b981").flexShrink(0)
|
|
p("Connected").margin(0).fontSize(0.82, em).fontWeight("600").color("#10b981")
|
|
})
|
|
.gap(0.35, em).alignItems("center").marginBottom(0.3, em)
|
|
p(this.stripeDetails.email)
|
|
.margin(0).fontSize(0.75, em).color("var(--headertext)").opacity(0.5)
|
|
} else {
|
|
p("Not connected")
|
|
.margin(0).fontSize(0.82, em).color("var(--headertext)").opacity(0.4).marginBottom(0.65, em)
|
|
button("Connect Stripe →")
|
|
.paddingHorizontal(1, em).paddingVertical(0.5, em)
|
|
.border("none").borderRadius(0.45, em)
|
|
.background("var(--quillred)").color("white")
|
|
.fontSize(0.82, em).fontWeight("600").cursor("pointer")
|
|
.onClick((done) => { if (done) this.onConnectStripe() })
|
|
}
|
|
})
|
|
})
|
|
.paddingHorizontal(1.75, em).flex(1)
|
|
})
|
|
.height(100, pct).overflow("hidden")
|
|
}
|
|
|
|
settingSection(icon, title, subtitle, renderContent) {
|
|
VStack(() => {
|
|
HStack(() => {
|
|
p(icon).margin(0).fontSize(1, em).lineHeight("1").flexShrink(0)
|
|
VStack(() => {
|
|
p(title).margin(0).fontSize(0.92, em).fontWeight("700").color("var(--headertext)")
|
|
p(subtitle).margin(0).marginTop(0.1, em).fontSize(0.72, em).color("var(--headertext)").opacity(0.42)
|
|
})
|
|
.gap(0)
|
|
})
|
|
.gap(0.65, em).alignItems("flex-start").marginBottom(0.85, em)
|
|
renderContent()
|
|
})
|
|
.padding(1.1, em).background("var(--darkaccent)").border("1px solid var(--divider)")
|
|
.borderRadius(0.65, em).marginBottom(0.85, em)
|
|
}
|
|
}
|
|
|
|
register(DesktopIntegrationsSection)
|