@luxfi/core 5.1.4 → 5.1.6

package/components/chat-widget.tsx

@@ -1,80 +1,85 @@
-'use client'
-import React from 'react'
-
-import { Button, Card } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import LuxLogo from './icons/lux-logo'
-import type { ChatbotSuggestedQuestion } from '../types'
-
-const ChatWidget: React.FC<{
-  title: string,
-  chatbotUrl: string,
-  subtitle?: string,
-  question?: string,
-  /* 
-    ChatBotSuggestQuestion.icon
-    Currently supports these icons from remix icons (https://remixicon.com/):
-      GlobalLineIcon,
-      ShieldFlashLineIcon,
-      BankCardLineIcon,
-      GroupLineIcon,
-      QuestionnaireLineIcon
-  */
-  suggestedQuestions?: ChatbotSuggestedQuestion[]
-}> = ({
-  title,
-  chatbotUrl,
-  subtitle,
-  question,
-  suggestedQuestions
-}) => {
-
-  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
-
-  const onClick = () => { setShowChatbot(!showChatbot) }
-
-  const searchParams = new URLSearchParams()
-  if (question) {
-    searchParams.append('question', question)
-  }
-  if (suggestedQuestions) {
-    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
-    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
-    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
-  }
-
-  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
-
-  return (<>
-    <div className={
-      'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
-      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
-      (showChatbot ? 'flex' : 'hidden')
-    }>
-      <Card className='flex flex-col h-full w-full'>
-        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
-          <h3 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h3>
-          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
-            <LuxLogo width={24} height={24}/>
-          </Button>
-        </div>
-        <iframe src={iframeSrc} className='h-full' />
-      </Card>
-    </div>
-
-    <LuxLogo
-      width={28}
-      height={28}
-      onClick={onClick}
-      className={cn(
-          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
-        'fixed bottom-5 right-5 z-below-modal-3 transition-all cursor-pointer hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
-        showChatbot ? 'rotate-180' : ''
-      )}
-      strokeWidth={1}
-    />
-  </>)
-}
-
-export default ChatWidget
+'use client'
+import React from 'react'
+
+import { Button, Card } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import LuxLogo from './icons/lux-logo'
+import type { ChatbotSuggestedQuestion } from '../types'
+
+const ChatWidget: React.FC<{
+  title: string
+  chatbotUrl: string
+  subtitle?: string
+  question?: string
+  buttonClx?: string
+  /* 
+    ChatBotSuggestQuestion.icon
+    Currently supports these icons from remix icons (https://remixicon.com/):
+      GlobalLineIcon,
+      ShieldFlashLineIcon,
+      BankCardLineIcon,
+      GroupLineIcon,
+      QuestionnaireLineIcon
+  */
+  suggestedQuestions?: ChatbotSuggestedQuestion[]
+}> = ({
+  title,
+  chatbotUrl,
+  subtitle,
+  question,
+  suggestedQuestions,
+  buttonClx=''
+}) => {
+
+  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
+
+  const onClick = () => { setShowChatbot(!showChatbot) }
+
+  const searchParams = new URLSearchParams()
+  if (question) {
+    searchParams.append('question', question)
+  }
+  if (suggestedQuestions) {
+    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
+    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
+    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
+  }
+
+  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
+
+  return (<>
+    <div className={
+      'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
+      (showChatbot ? 'flex' : 'hidden')
+    }>
+      <Card className='flex flex-col h-full w-full'>
+        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
+          <h3 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h3>
+          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
+            <LuxLogo width={24} height={24}/>
+          </Button>
+        </div>
+        <iframe src={iframeSrc} className='h-full' />
+      </Card>
+    </div>
+
+    <LuxLogo
+      width={28}
+      height={28}
+      onClick={onClick}
+      className={cn(
+          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
+        'fixed bottom-5 right-5 z-floating cursor-pointer',
+        'hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
+        'transition-transform', 
+        showChatbot ? 'rotate-180' : '',
+        buttonClx
+      )}
+      strokeWidth={1}
+    />
+  </>)
+}
+
+export default ChatWidget

package/components/commerce/add-widget.tsx

@@ -0,0 +1,20 @@
+'use client'
+import React from 'react'
+
+import type { LineItem } from '@hanzo/commerce/types'
+import  { AddToCartWidget } from '@hanzo/commerce'
+
+import { useRecentActivity } from '../../commerce/ui/context'
+
+const AddWidget: React.FC<{
+  item: LineItem
+  disabled?: boolean
+  className?: string
+  buttonClx?: string
+  variant?: 'minimal' | 'primary' | 'outline'
+}> = (props) => {
+  const l = useRecentActivity()
+  return <AddToCartWidget {...props} onQuantityChanged={l.quantityChanged.bind(l)}/>
+}
+
+export default AddWidget

package/components/commerce/bag-button.tsx

@@ -1,98 +1,98 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { observable, type IObservableValue, reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { buttonVariants } from '@hanzo/ui/primitives'
-import { cn, type VariantProps } from '@hanzo/ui/util'
-import { useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-
-const BagButton: React.FC<{
-  showIfEmpty?: boolean  
-  animateOnHover?: boolean
-  animateOnQuantityChange?: boolean
-  size?: VariantProps<typeof buttonVariants>['size']
-  className?: string
-  iconClx?: string
-  onClick?: () => void
-}> = observer(({
-  showIfEmpty=false,
-  animateOnHover=true,
-  animateOnQuantityChange=true,
-  size='default',
-  className='',
-  iconClx='',
-  onClick
-}) => {
-
-  const c = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => (c.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          wiggleRef.current.set('more')   
-        }
-        else {
-          wiggleRef.current.set('less')   
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          wiggleRef.current.set('none')   
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-    // undefined means context is not installed, ie commerce functions are not in use
-  if (!c || (!showIfEmpty && c.cartEmpty)) {
-    return <div /> // trigger code needs non-null 
-  }
-
-
-  return (
-    <div
-      aria-label="Bag"
-      role='button'
-      onClick={onClick}
-      className={cn(
-        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
-          // Overides the bg change on hover --not a "hover effect" 
-        'relative group p-0 aspect-square hover:bg-background', 
-        ((wiggleRef.current.get() === 'more') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-        className
-      )}
-    >
-    {!c.cartEmpty && (
-      <div className={
-        'z-above-content flex flex-col justify-center items-center  ' +
-        'absolute left-0 right-0 top-0 bottom-0 ' + 
-        'leading-none font-sans font-bold text-primary-fg text-xs ' 
-      }>
-        <div className='h-[3px] w-full' />
-        <div>{c.cartQuantity}</div>
-      </div>
-    )}
-      <Icons.bag width='24' height='28' className={cn(
-        'relative -top-[3px] fill-primary',
-        iconClx,
-        (animateOnHover ? 
-          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
-          : 
-          ''
-        ) 
-      )} aria-hidden="true" />
-    </div>            
-  )
-})
-
-export default BagButton
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { buttonVariants } from '@hanzo/ui/primitives'
+import { cn, type VariantProps } from '@hanzo/ui/util'
+import { useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+
+const BagButton: React.FC<{
+  showIfEmpty?: boolean  
+  animateOnHover?: boolean
+  animateOnQuantityChange?: boolean
+  size?: VariantProps<typeof buttonVariants>['size']
+  className?: string
+  iconClx?: string
+  onClick?: () => void
+}> = observer(({
+  showIfEmpty=false,
+  animateOnHover=true,
+  animateOnQuantityChange=true,
+  size='default',
+  className='',
+  iconClx='',
+  onClick
+}) => {
+
+  const c = useCommerce()
+  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
+
+  useEffect(() => (
+      // return IReactionDisposer
+    animateOnQuantityChange ? reaction(
+      () => (c.cartQuantity),
+      (curr, prev) => {
+        if (curr > prev) {
+          runInAction(() => {wiggleRef.current.set('more')})   
+        }
+        else {
+          runInAction(() => {wiggleRef.current.set('less')})   
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          runInAction(() => {wiggleRef.current.set('none')})    
+        }, 800)
+      }
+    ) : undefined
+  ), [])
+
+    // undefined means context is not installed, ie commerce functions are not in use
+  if (!c || (!showIfEmpty && c.cartEmpty)) {
+    return <div /> // trigger code needs non-null 
+  }
+
+
+  return (
+    <div
+      aria-label="Bag"
+      role='button'
+      onClick={onClick}
+      className={cn(
+        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
+          // Overides the bg change on hover --not a "hover effect" 
+        'relative group p-0 aspect-square hover:bg-background', 
+        ((wiggleRef.current.get() === 'more') ? 
+          'item-added-to-cart-animation' 
+          : 
+          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
+        className
+      )}
+    >
+    {!c.cartEmpty && (
+      <div className={
+        'z-above-content flex flex-col justify-center items-center  ' +
+        'absolute left-0 right-0 top-0 bottom-0 ' + 
+        'leading-none font-sans font-bold text-primary-fg text-xs ' 
+      }>
+        <div className='h-[3px] w-full' />
+        <div>{c.cartQuantity}</div>
+      </div>
+    )}
+      <Icons.bag width='24' height='28' className={cn(
+        'relative -top-[3px] fill-primary',
+        iconClx,
+        (animateOnHover ? 
+          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
+          : 
+          ''
+        ) 
+      )} aria-hidden="true" />
+    </div>            
+  )
+})
+
+export default BagButton

package/components/commerce/buy-button.tsx

@@ -0,0 +1,34 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import { Button, buttonVariants } from '@hanzo/ui/primitives'
+import { type VariantProps } from '@hanzo/ui/util'
+
+import { cn } from '@hanzo/ui/util'
+import { useSelectAndBuy } from '../../commerce/ui/context'
+
+const BuyButton: React.FC<
+  PropsWithChildren & 
+  VariantProps<typeof buttonVariants> & 
+  {
+    skuPath: string
+    className?: string 
+  }
+> = ({
+  skuPath,
+  children,
+  className='',
+  ...rest
+}) => {
+
+  const buyOptions = useSelectAndBuy()
+  const handleClick = (): void => { buyOptions.showVariants(skuPath) }
+  
+  return (
+    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
+      {children}
+    </Button>
+  )
+}
+
+export default BuyButton