nitro-web 0.0.1

package/components/billing/stripe.api.js

@@ -0,0 +1,267 @@
+import Stripe from 'stripe'
+import db from 'monastery'
+import * as util from '../../util.js'
+
+let stripe = undefined
+let stripeProducts = []
+let config = {}
+
+export default {
+  routes: {
+    'post   /api/stripe/webhook': ['stripeWebhook'],
+    'post   /api/stripe/create-billing-portal-session': ['isUser', 'billingPortalSessionCreate'],
+    'get    /api/stripe/upcoming-invoices': ['isUser', 'upcomingInvoicesFind'],
+  },
+
+  setup: function (middleware, _config) {
+    // Set config values
+    config = {
+      env: _config.env,
+      clientUrl: _config.clientUrl,
+      stripeSecretKey: _config.stripeSecretKey,
+      stripeWebhookSecret: _config.stripeWebhookSecret,
+    }
+    for (let key in config) {
+      if (!config[key]) {
+        throw new Error(`Missing config value for stripe.api.js: ${key}`)
+      }
+    }
+    stripe = new Stripe(config.stripeSecretKey)
+  },
+
+  stripeWebhook: async function (req, res) {
+    try {
+      var event = config.env == 'development' ? req.body : stripe.webhooks.constructEvent(
+        req.rawBody,
+        req.rawHeaders['stripe-signature'],
+        config.stripeWebhookSecret
+      )
+    } catch (err) {
+      if (err && err.message) console.log(err.message)
+      else console.log(err)
+      return res.error(err)
+    }
+
+    if (!event.data || !event.data.object) {
+      return res.status(400).send(`Missing webhook data: ${event}.`)
+    }
+
+    // useful for cleaning failed webhooks
+    if (req.query.success) return true
+    // console.log('event.type: ', event.type)
+
+    // Stripe cannot guarantee event order
+    switch (event.type) {
+      case 'customer.subscription.created':
+      case 'customer.subscription.updated':
+      case 'customer.subscription.deleted':
+        // Subscriptions can be renewed which resurrects cancelled subscriptions.. ignore this
+        console.log('Event: ' + event.type)
+        this._webhookSubUpdated(req, res, event)
+        break
+      case 'customer.created': // customer created by subscribing
+      case 'customer.updated': // payment method changes
+        console.log('Event: ' + event.type)
+        this._webhookCustomerCreatedUpdated(req, res, event)
+        break
+      default:
+        res.status(400).send(`Unsupported type: ${event}.`)
+        break
+    }
+  },
+
+  billingPortalSessionCreate: async function (req, res) {
+    try {
+      if (!req.user.stripeCustomer?.id) {
+        throw new Error('No stripe customer found for the user')
+      }
+      const session = await stripe.billingPortal.sessions.create({
+        customer: req.user.stripeCustomer.id,
+        return_url: config.clientUrl + '/subscriptions',
+      })
+      res.json(session.url)
+    } catch (err) {
+      this._error(req, res, err)
+    }
+  },
+
+  upcomingInvoicesFind: async function (req, res) {
+    try {
+      if (!req.user.stripeCustomer?.id) return res.json({})
+      const nextInvoice = await stripe.invoices.retrieveUpcoming({
+        customer: req.user.stripeCustomer.id,
+      })
+      res.json(nextInvoice)
+    } catch (err) {
+      if (err.code == 'invoice_upcoming_none') return res.json({})
+      this._error(req, res, err)
+    }
+  },
+
+  /* Private webhook actions */
+
+  _webhookCustomerCreatedUpdated: async function (req, res, event) {
+    try {
+      const customer = event.data.object
+      const user = await this._getUserFromEvent(event)
+      const customerExpanded = await stripe.customers.retrieve(
+        customer.id,
+        { expand: ['invoice_settings.default_payment_method'] }
+      )
+      await db.user.update({
+        query: user._id,
+        data: { stripeCustomer: customerExpanded },
+        blacklist: ['-stripeCustomer'],
+      })
+      res.json({})
+    } catch (err) {
+      console.log(err)
+      this._error(req, res, err)
+    }
+  },
+
+  _webhookSubUpdated: async function (req, res, event) {
+    // Update the subscription on the company
+    try {
+      const subData = event.data.object
+       // webhook from deleting a company?
+      if (subData.cancellation_details.comment == 'company deleted') {
+        return res.json({})
+      }
+
+      const user = await this._getUserFromEvent(event)
+      if (!user.company) {
+        throw new Error(`Subscription user has no company to update the subscription (${subData.id}) onto`)
+      }
+
+      // Ignoring incomplete subscriptions
+      if (subData.status.match(/incomplete/)) {
+        return res.json({})
+      // Ignoring subscriptions without companyId (e.g. manual subscriptions)
+      } else if (!subData.metadata.companyId) {
+        return res.json({ ignoringManualSubscriptions: true })
+      // Ignoring old subscriptions
+      } else if (subData.created < (user.company.stripeSubscription?.created || 0)) {
+        return res.json({ ignoringOldSubscriptions: true })
+      }
+      
+      // Update company with the updated subscription and users
+      const sub = await stripe.subscriptions.retrieve(
+        subData.id,
+        { expand: ['latest_invoice.payment_intent'] }
+      )
+      await db.company.update({
+        query: user.company._id,
+        data: { stripeSubscription: sub, users: user.company.users },
+        blacklist: ['-stripeSubscription', '-users'],
+      })
+      
+      res.json({})
+    } catch (err) {
+      console.error(err)
+      this._error(req, res, err)
+    }
+  },
+
+  /* Private */
+
+  _getUserFromEvent: async function (event) {
+    // User retreived from the event's customer. 
+    // The customer is created before the paymentIntent and subscriptionIntent is set up
+    let object = event.data.object
+    let customerId = object.object == 'customer'? object.id : object.customer
+    if (customerId) {
+      var user = await db.user.findOne({
+        query: { 'stripeCustomer.id': customerId },
+        populate: db.user.populate({}),
+        blacklist: false, // ['-company.users.inviteToken'],
+      })
+    }
+    if (!user) {
+      await db.log.insert({ data: {
+        date: Date.now(),
+        event: event.type,
+        message: `Cannot find user with id: ${customerId}.`,
+      }})
+      throw new Error(`Cannot find user with id: ${customerId}.`)
+    }
+    // populate company owner with user data (handy for _addSubscriptionBillingChange)
+    if (user.company?.users) {
+      user.company.users = user.company.users.map(o => {
+        if (o.role == 'owner' && o._id.toString() == user._id.toString()) {
+          o.firstName = user.firstName
+          o.name = user.name
+          o.email = user.email
+        }
+        return o
+      })
+    }
+    return user
+  },
+
+  _getProducts: async function () {
+    /**
+     * Returns all products and caches it on the app
+     * @returns {Array} products
+     */
+    try {
+      if (stripeProducts) return stripeProducts
+      if (!config.stripeSecretKey) {
+        stripeProducts = []
+        throw new Error('Missing process.env.stripeSecretKey for retrieving products')
+      }
+
+      let products = (await stripe.products.list({ limit: 100, active: true })).data
+      let prices = (await stripe.prices.list({ limit: 100, active: true, expand: ['data.tiers'] })).data
+
+      return (stripeProducts = products.map((product) => ({
+        // remove default_price when new pricing is ready
+        ...util.pick(product, ['id', 'created', 'default_price', 'description', 'name', 'metadata']),
+        type: product.name.match(/housing/i) ? 'project' : 'subscription', // overwriting, was 'service'
+        prices: prices
+          .filter((price) => price.product == product.id)
+          .map((price) => ({
+            ...util.pick(price, ['id', 'product', 'nickname', 'recurring', 'unit_amount', 'tiers', 'tiers_mode']),
+            interval: price.recurring?.interval, // 'year', 'month', undefined
+          })),
+      })))
+    } catch (err) {
+      console.error(new Error(err)) // when stripe throws errors, the callstack is missing.
+      return []
+    }
+  },
+
+  _createOrUpdateCustomer: async function (user, paymentMethod=null) {
+    /**
+     * Creates or updates a stripe customer and saves it to the user
+     * @param {Object} user - user
+     * @param {String} paymentMethod - stripe payment method id to save to the customer
+     * @called before paymentIntent and subscriptionIntent, and after completion with paymentMethod
+     * @returns mutates user
+     */
+    const data = {
+      email: user.email,
+      name: user.name,
+      address: { country: 'NZ' },
+      ...(!paymentMethod ? {} : { invoice_settings: { default_payment_method: paymentMethod }}),
+      expand: ['invoice_settings.default_payment_method', 'tax'], // expands card object
+    }
+    
+    if (user.stripeCustomer) var customer = await stripe.customers.update(user.stripeCustomer.id, data)
+    else customer = await stripe.customers.create({ ...data })
+
+    user.stripeCustomer = customer
+    await db.user.update({
+      query: user._id,
+      data: { stripeCustomer: customer },
+      blacklist: ['-stripeCustomer'],
+    })
+  },
+
+  _error: async function (req, res, err) {
+    if (err && err.response && err.response.body) console.log(err.response.body)
+    if (util.isString(err) && err.match(/Cannot find company with id/)) {
+      res.json({ user: 'no company found' })
+    } else res.error(err)
+  },
+}

package/components/partials/element/accordion.jsx

@@ -0,0 +1,82 @@
+import { css } from 'twin.macro'
+import { IsFirstRender } from '../is-first-render.js'
+
+export function Accordion({ children, className, expanded, onChange }) {
+  /**
+   * @param {rxjs} children - first child is the header, second child is the contents
+   *   <Accordion>
+   *     <div>Header</div><div>Contents</div>
+   *   </Accordion>
+   * @param {boolean} <expanded> - initial value (or controlled value if onChange is passed)
+   * @param {function} <onChange> - called when the header is clicked
+   */
+  let [preState, setPreState] = useState(expanded)
+  let [state, setState] = useState(expanded)
+  let [height, setHeight] = useState('auto')
+  let isFirst = IsFirstRender()
+  let el = useRef()
+  let style = () => css`
+    &>:last-child {
+      height: 0;
+      overflow: hidden;
+      transition: height ease 0.2s;
+    }
+    &.is-expanded > div:last-child {
+      height: ${height.replace('-', '')};
+    }
+  `
+
+  useEffect(() => {
+    // Overrite local state
+    setPreState(expanded)
+  }, [expanded])
+
+  useEffect(() => {
+    // Calulcate height first before opening and closing
+    if (!isFirst) {
+      setHeight((_o) => el.current.children[1].scrollHeight + 'px' + (preState ? '-' : ''))
+    }
+  }, [preState])
+
+  useEffect(() => {
+    // Open and close
+    if (height == 'auto') return
+    if (preState) var timeout = setTimeout(() => setHeight('auto'), 200)
+    // Wait for dom reflow after 2 frames
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        if (preState) setState(true)
+        else setState(false)
+      })
+    })
+    return () => timeout && clearTimeout(timeout)
+  }, [height])
+
+  let onClick = function(e) {
+    // Click came from inside the accordion header/summary
+    if (e.currentTarget.children[0].contains(e.target) || e.currentTarget.children[0] == e.target) {
+      if (onChange) {
+        onChange(e, getElementIndex(e.currentTarget))
+      } else {
+        setPreState(o => !o)
+      }
+    }
+  }
+
+  let getElementIndex = function(node) {
+    let index = 0
+    while ((node = node.previousElementSibling)) index++
+    return index
+  }
+
+  return (
+    <div
+      ref={el}
+      class={['accordion', className, state ? 'is-expanded' : ''].filter(o => o).join(' ')}
+      onClick={onClick}
+      css={style}
+    >
+      {children}
+    </div>
+  )
+}

package/components/partials/element/avatar.jsx

@@ -0,0 +1,28 @@
+import { s3Image } from '../../../util.js'
+import { Initials } from './initials.jsx'
+
+export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className }) {
+  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease ' + (className || '')
+
+  function getInitials(user) {
+    const text = (user.firstName ? [user.firstName, user.lastName] : user.name.split(' ')).map((o) => o.charAt(0))
+    if (text.length == 1) return text[0]
+    if (text.length > 1) return `${text[0]}${text[text.length - 1]}`
+    return ''
+  }
+
+  function getHex(user) {
+    let colors = ['#067306', '#AA33FF', '#FF54AF', '#F44336', '#c03c3c', '#7775f2', '#d88c1b']
+    let charIndex = (user.firstName||'a').toLowerCase().charCodeAt(0) - 97
+    let charIndexLimited = (charIndex < 0 || charIndex > 25) ? 25 : charIndex
+    let index = Math.round(charIndexLimited / 25 * (colors.length-1))
+    return colors[index]
+  }
+
+  return (
+    user.avatar 
+    ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small')} /> 
+    : showPlaceholderImage ? <img class={classes} src="/assets/imgs/icons/user.svg" width="30px" /> 
+    : <Initials class={classes} icon={{ initials: getInitials(user), hex: getHex(user) }} isRound={isRound} isMedium={true} />
+  )
+}

package/components/partials/element/button.jsx

@@ -0,0 +1,66 @@
+// todo: add loading indicator
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+/**
+ * @param {'primary'|'secondary'|'white'|'primary-sm'|'secondary-sm'|'white-sm'} [type='primary']
+ * @param {string} [className]
+ * @param {boolean} [isLoading]
+ * @param {React.ReactNode|string} [IconLeft]
+ * @param {React.ReactNode|string} [IconRight]
+ * @param {React.ReactNode|string} [IconRight2]
+ * @param {React.ReactNode|string} [children]
+ */
+export function Button({ color='primary', className, isLoading, IconLeft, IconRight, IconRight2, children, ...props }) {
+  const size = color.match(/xs|sm|md|lg/) || 'md'
+  const iconPosition = IconLeft ? 'left' : IconRight ? 'right' : IconRight2 ? 'right2' : 'none'
+  const base = 'relative inline-block font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+
+  // Button types
+  const primary = 'bg-primary text-white shadow-sm hover:bg-primary-hover focus-visible:outline-primary'
+  const secondary = 'bg-secondary text-white shadow-sm hover:bg-secondary-hover focus-visible:outline-secondary'
+  const white = 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 shadow-sm hover:bg-gray-50'
+
+  // Button sizes
+  const sizes = {
+    xs: 'px-2 py-1 text-xs rounded',
+    sm: 'px-2.5 py-1.5 text-sm rounded-md',
+    md: 'px-3 py-2 text-sm rounded-md',
+    lg: 'px-3.5 py-2.5 text-sm rounded-md',
+  }
+
+  // Icon position
+  const contentLayouts = {
+    left: 'w-full inline-flex items-center',
+    right: 'w-full inline-flex items-center',
+    right2: 'w-full inline-flex items-center justify-between',
+    none: 'w-full ',
+  }
+  
+  if (color.match(/primary/)) var colorAndSize = `${primary} ${sizes[size]}`
+  else if (color.match(/secondary/)) colorAndSize = `${secondary} ${sizes[size]}`
+  else if (color.match(/white/)) colorAndSize = `${white} ${sizes[size]}`
+
+  var contentLayout = `${contentLayouts[iconPosition]}`
+  if (!(className||'').match(/gap-/)) contentLayout += ' gap-x-1.5'
+
+  function getIcon(Icon, className) {
+    if (Icon == 'v') return <ChevronDownIcon className={className} />
+    else return Icon
+  }
+  
+  return (
+    <button class={`${base} ${colorAndSize} ${className||''}`} {...props}>
+      <span class={`${contentLayout} ${isLoading ? 'opacity-0' : ''}`}>
+        {IconLeft && getIcon(IconLeft, 'size-6 -my-6 -mx-1')}
+        {children}
+        {IconRight && getIcon(IconRight, 'size-6 -my-6 -mx-1')}
+        {IconRight2 && getIcon(IconRight2, 'size-6 -my-6 -mx-1')}
+      </span>
+      {
+        isLoading && 
+        <span class="absolute inset-0 flex items-center justify-center">
+          <span className="w-4 h-4 rounded-full animate-spin border-2 border-t-transparent border-white" />
+        </span>
+      }
+    </button>
+  )
+}

package/components/partials/element/dropdown.jsx

@@ -0,0 +1,185 @@
+import { css } from 'twin.macro'
+import { cloneElement } from 'react'
+import { toArray } from '../../../util.js'
+import { forwardRef } from 'react'
+import { getSelectStyle } from '../form/select.jsx'
+import { CheckCircleIcon } from '@heroicons/react/24/solid'
+
+
+/**
+ * Dropdown component
+ * 
+ * @param {boolean} animate 
+ * @param {React.ReactNode} children
+ * @param {string} className
+ * @param {'bottom-left'|'bottom-right'|'top-left'|'top-right'} [dir='bottom-left'] - The direction of the menu
+ * @param {[{ label, onClick, isSelected, icon, className }]} options - Menu options
+ * @param {boolean} isHoverable - Whether the dropdown is hoverable
+ * @param {number} minWidth - The minimum width of the menu
+ * @param {React.ReactNode} menuChildren - The content to render inside the top of the dropdown
+ * @param {boolean} menuIsOpen - Whether the menu is open
+ * @param {boolean} menuToggles - Whether the menu toggles
+ * @param {function} toggleCallback - The callback function to call when the menu is toggled
+ */
+export const Dropdown = forwardRef(function Dropdown({ 
+  animate=true,
+  children, 
+  className, 
+  dir, 
+  options, 
+  isHoverable,
+  minWidth, 
+  menuChildren, 
+  menuIsOpen, 
+  menuToggles=true,
+  toggleCallback,
+}, ref) {
+  // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
+  isHoverable = isHoverable && !menuIsOpen
+  const dropdownRef = useRef(null)
+  const [isActive, setIsActive] = useState(menuIsOpen)
+  const menuStyle = getSelectStyle({ name: 'menu', usePrefixes: true })
+
+  // Expose the setIsActive function to the parent component
+  useImperativeHandle(ref, () => ({ setIsActive }))
+
+  useEffect(() => {
+    const pageClick = (e) => {
+      try {
+        // If the active element exists and is clicked outside of the dropdown, toggle the dropdown
+        if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) setIsActive(!isActive)
+      } catch (_e) {
+        // Errors throw for contains() when the user clicks off the webpage when open
+        setIsActive(!isActive)
+      }
+    }
+    if (isActive && !menuIsOpen) {
+      // Wait for the next event loop in the case of mousedown'ing the dropdown, while loosing click focus from a checkbox  
+      setTimeout(() => {
+        window.addEventListener('mousedown', pageClick)
+        window.addEventListener('focus', pageClick, true) // true needed to capture focus events
+      }, 0)
+    }
+    return () => {
+      window.removeEventListener('mousedown', pageClick)
+      window.removeEventListener('focus', pageClick, true) // true needed to capture focus events
+    }
+  }, [isActive, dropdownRef])
+
+  useEffect(() => {
+    if (toggleCallback) toggleCallback(isActive)
+  }, [isActive])
+  
+  function onMouseDown(e) {
+    if (e.key && e.key != 'Enter') return
+    if (e.key) e.preventDefault() // for button, stops buttons firing twice
+    if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) setIsActive(!isActive)
+  }
+
+  function onClick(option, e) {
+    if (option.onClick) option.onClick(e)
+    if (!menuIsOpen) setIsActive(!isActive)
+  }
+
+  return (
+    <div 
+      class={
+        'relative' + 
+        (dir ? ` is-${dir}` : ' is-bottom-left') +
+        (isHoverable ? ' is-hoverable' : '') +
+        (isActive ? ' is-active' : '') +
+        (!animate ? ' no-animation' : '') +
+        (className ? ` ${className}` : '')
+      }
+      onClick={(e) => e.stopPropagation()} // required for dropdowns inside row links
+      ref={dropdownRef} 
+      css={style}
+    >
+      {
+        toArray(children).map((el, key) => {
+          const onKeyDown = onMouseDown 
+          if (!el.type) throw new Error('Dropdown component requires a valid child element')
+          return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick
+        })
+      }
+      <ul 
+        style={{ minWidth }}
+        class={`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1]`}
+      >
+        {menuChildren}
+        {
+          options && options.map((option, i) => {
+            const optionStyle = getSelectStyle({ name: 'option', usePrefixes: true, isSelected: option.isSelected })
+            return (
+              <li 
+                key={i} 
+                className={`${optionStyle} ${option.className}`}
+                onClick={(e) => onClick(option, e)}
+              >
+                <span class="flex-auto">{option.label}</span>
+                { !!option.icon && option.icon }
+                { option.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-1" /> }
+              </li>
+            )
+          })
+        }
+      </ul>
+    </div>
+  )
+})
+
+const style = () => css`
+  ul {
+    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease;
+  }
+  &.is-bottom-right,
+  &.is-top-right {
+    ul {
+      left: auto;
+      right: 0;
+    }
+  }
+  &.is-bottom-left,
+  &.is-bottom-right {
+    ul {
+      top: 100%;
+      transform: translateY(6px);
+    }
+  }
+  &.is-top-left,
+  &.is-top-right {
+    ul {
+      bottom: 100%;
+      transform: translateY(-10px);
+    }
+  }
+  // active submenu
+  &.is-hoverable:hover,
+  &:focus,
+  &.is-active,
+  li:hover,
+  li:focus,
+  li.is-active {
+    ul {
+      opacity: 1;
+      visibility: visible;
+      transition: transform 0.15s ease, opacity 0.15s ease;
+    }
+    &.is-bottom-left > ul,
+    &.is-bottom-right > ul {
+      transform: translateY(3px) !important;
+    }
+    &.is-top-left > ul,
+    &.is-top-right > ul {
+      transform: translateY(-7px) !important;
+    }
+  }
+  // no animation
+  &.no-animation {
+    ul {
+      transition: none;
+    }
+  }
+`
+
+

package/components/partials/element/initials.jsx

@@ -0,0 +1,56 @@
+import { css } from 'twin.macro'
+
+export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }) {
+  return (
+    <span 
+      css={style} 
+      class={
+        'initials-square' +
+        (isBig ? ' is-big' : '') + 
+        (isMedium ? ' is-medium' : '') + 
+        (isSmall ? ' is-small' : '') + 
+        (isRound ? ' is-round' : '') + 
+        (icon ? '' : ' is-empty') + 
+        (className ? ' ' + className : '')
+      }
+      style={icon ? {backgroundColor: icon?.hex + '15', color: icon?.hex} : {}}
+    >
+      {icon?.initials}
+    </span>
+  )
+}
+
+const style = (_theme) => css`
+  // seen in input.jsx
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  font-weight: 700;
+  font-size: 11px;
+  width: 24px;
+  height: 24px;
+  // new
+  &.is-medium {
+    width: 30px;
+    height: 30px;
+    font-size: 12px;
+  }
+  // seen in select.jsx
+  &.is-small {
+    width: 22px;
+    height: 22px;
+    font-size: 11px;
+  }
+  &.is-big {
+    width: 48px;
+    height: 48px;
+    font-size: 14px;
+  }
+  &.is-round {
+    border-radius: 50%;
+  }
+  &.is-empty {
+    width: 0;
+  }
+`