78 lines
3.3 KiB
JavaScript
78 lines
3.3 KiB
JavaScript
class SettingsIntegrationsSection extends Shadow {
|
||
constructor(stripeDetails, basePath, callbacks, loading = false) {
|
||
super()
|
||
this.stripeDetails = stripeDetails
|
||
this.basePath = basePath
|
||
this.loading = loading
|
||
this.onConnectStripe = callbacks.onConnectStripe
|
||
}
|
||
|
||
render() {
|
||
VStack(() => {
|
||
this.backHeader("Integrations", () => window.navigateTo(this.basePath))
|
||
|
||
VStack(() => {}).height(1, px).background("var(--divider)").flexShrink(0)
|
||
|
||
if (this.loading) { LoadingCircle(); return }
|
||
|
||
VStack(() => {
|
||
p("STRIPE")
|
||
.margin(0).marginBottom(0.55, em)
|
||
.fontSize(0.62, em).fontWeight("700").letterSpacing("0.07em")
|
||
.color("var(--headertext)").opacity(0.35)
|
||
|
||
if (this.stripeDetails?.email) {
|
||
HStack(() => {
|
||
VStack(() => {})
|
||
.width(8, px).height(8, px).borderRadius(50, pct)
|
||
.background("#10b981").flexShrink(0)
|
||
VStack(() => {
|
||
p("Connected").margin(0).fontSize(0.9, em).fontWeight("600").color("var(--headertext)")
|
||
p(this.stripeDetails.email)
|
||
.margin(0).marginTop(0.15, em).fontSize(0.72, em)
|
||
.color("var(--headertext)").opacity(0.42)
|
||
})
|
||
.gap(0).flex(1)
|
||
})
|
||
.gap(0.65, em).alignItems("center").paddingVertical(0.85, em)
|
||
} else {
|
||
VStack(() => {
|
||
p("Stripe is not connected to this network.")
|
||
.margin(0).fontSize(0.82, em).color("var(--headertext)").opacity(0.5)
|
||
.marginBottom(1, em)
|
||
button("Connect Stripe →")
|
||
.paddingHorizontal(1.2, em).paddingVertical(0.65, em)
|
||
.border("none").borderRadius(0.5, em)
|
||
.background("var(--quillred)").color("white")
|
||
.fontSize(0.85, em).fontWeight("600").cursor("pointer")
|
||
.onTap(() => this.onConnectStripe())
|
||
})
|
||
.paddingVertical(0.85, em).gap(0)
|
||
}
|
||
})
|
||
.paddingHorizontal(1, em).paddingTop(1, em)
|
||
.flex(1).overflowY("auto")
|
||
})
|
||
.height(100, pct).overflow("hidden")
|
||
}
|
||
|
||
backHeader(title, onBack) {
|
||
HStack(() => {
|
||
button("‹")
|
||
.border("none").background("transparent")
|
||
.color("var(--headertext)").fontSize(1.4, em)
|
||
.lineHeight("1").paddingVertical(0.2, em).paddingRight(0.3, em)
|
||
.cursor("pointer").flexShrink(0)
|
||
.onTap(onBack)
|
||
p(title)
|
||
.margin(0).fontSize(1.05, em).fontWeight("700").color("var(--headertext)")
|
||
.flex(1).overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
|
||
})
|
||
.gap(0.25, em).alignItems("center")
|
||
.paddingHorizontal(0.85, em).paddingTop(1.25, em).paddingBottom(0.85, em)
|
||
.flexShrink(0)
|
||
}
|
||
}
|
||
|
||
register(SettingsIntegrationsSection)
|