@hanzo/ui 0.5.15 → 0.5.17

package/blocks/components/carte-blanche-block/index.tsx

@@ -47,6 +47,9 @@ const _getClx = (specifier: string, section: CardSection): string => {
       case 'header': {
         result = 'border-none'
       } break
+      case 'footer': {
+        result = 'border-t-0'
+      } break
     }
   }
 
@@ -83,6 +86,10 @@ const CarteBlancheBlockComponent: React.FC<
     getClx('big-padding-content', 'content'),
   ].join(' ')
 
+  const footerclx = [
+    getClx('no-inner-borders', 'footer'),
+  ].join(' ')
+
   const noOuterBorders = specified('no-outer-borders')
   const contentLeft = specified('variant-content-left')
   const mobileContentLeft = specified('variant-mobile-content-left')
@@ -90,7 +97,7 @@ const CarteBlancheBlockComponent: React.FC<
   return (
     <Card className={cn('flex flex-col', className, noOuterBorders ? 'border-none' : '')} >
       {contentLeft || (mobileContentLeft && agent === 'phone') ? (
-        <VariantContentLeft block={b} agent={agent} className={className} contentclx={contentclx} headingclx={headingclx}/>
+        <VariantContentLeft block={b} agent={agent} className={className} headingclx={headingclx} contentclx={contentclx} footerclx={footerclx}/>
       ) : (<>
         {(b.heading || b.topContent) && (
           <CardHeader className={cn('typography-img:m-0', headingclx)} >
@@ -108,7 +115,7 @@ const CarteBlancheBlockComponent: React.FC<
           </CardContent>
         )}
         {b.cta && (
-          <CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' /*+ paddingclx*/} >
+          <CardFooter className={cn('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center', footerclx)} >
             <CTABlockComponent block={b.cta} agent={agent}/>
           </CardFooter>
         )}

package/blocks/components/carte-blanche-block/variant-content-left.tsx

@@ -1,4 +1,4 @@
-import { EnhHeadingBlockComponent, type Block, type BlockComponentProps, type CarteBlancheBlock, CTABlockComponent } from '../..'
+import { EnhHeadingBlockComponent, type CarteBlancheBlock, CTABlockComponent } from '../..'
 import {
   CardContent,
   CardFooter,
@@ -13,16 +13,18 @@ const VariantContentLeft: React.FC<{
   className?: string
   headingclx?: string
   contentclx?: string
+  footerclx?: string
 }> = ({
   block,
   agent,
   className,
   headingclx,
   contentclx,
+  footerclx,
 }) => {
-  return (
+  return (<>
     <div className='flex gap-2'>
-      {block.topContent && <Content blocks={block.topContent} agent={agent} className='self-start ml-6 mt-6'/>}
+      {block.topContent && <Content blocks={block.topContent} agent={agent} className='self-center ml-6 mt-6'/>}
       <div className='flex flex-col'>
         {block.heading && (
           <CardHeader className={cn('typography-img:m-0', headingclx)} >
@@ -34,14 +36,14 @@ const VariantContentLeft: React.FC<{
             <Content blocks={block.content} agent={agent}/>
           </CardContent>
         )}
-        {block.cta && (
-          <CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' /*+ paddingclx*/} >
-            <CTABlockComponent block={block.cta} agent={agent}/>
-          </CardFooter>
-        )}
       </div>
     </div>
-  )
+    {block.cta && (
+      <CardFooter className={cn('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center mx-auto', footerclx)}>
+        <CTABlockComponent block={block.cta} agent={agent}/>
+      </CardFooter>
+    )}
+  </>)
 }
 
 export default VariantContentLeft

package/common/contact-dialog/disclaimer.tsx

@@ -5,7 +5,7 @@ const Disclaimer: React.FC = () => (
     By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided. 
     Message and data rates may apply. Message frequency varies. 
     You can unsubscribe at any time by replying STOP. 
-    View our <a href='/assets/standard-docs/LUX-Privacy-Policy.pdf'>Privacy Policy</a> and <a href='/assets/standard-docs/LUX-NFT-Terms-and-Conditions.pdf'>Terms & conditions</a>.
+    View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
   </div>
 )
 

package/common/contact-dialog/index.tsx

@@ -30,8 +30,8 @@ const ContactDialog: React.FC<ButtonModalProps> = ({
     <DialogTrigger asChild>
       <Button {...buttonProps} >{buttonText}</Button>
     </DialogTrigger>
-    <DialogContent className="sm:max-w-[500px] p-0 gap-0 light-theme">
-      <DialogHeader className='py-6  text-foreground'>
+    <DialogContent className="sm:max-w-[500px] p-0 gap-0 bg-background border">
+      <DialogHeader className='py-6 text-foreground'>
         <DialogTitle className='text-4xl font-heading text-center text-inherit'>{title}</DialogTitle>
         {byline && (<DialogDescription className='text-inherit text-xl text-center'>{byline} </DialogDescription>)}
       </DialogHeader>

package/next/analytics/fpixel.ts

@@ -0,0 +1,10 @@
+export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
+
+export const pageview = () => {
+  window.fbq('track', 'PageView')
+}
+
+// https://developers.facebook.com/docs/facebook-pixel/advanced/
+export const event = (name: string, options = {}) => {
+  window.fbq('track', name, options)
+}

package/next/analytics/google-analytics.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import * as gtag from './gtag'
+import Script from 'next/script'
+import { usePathname } from 'next/navigation'
+
+const GoogleAnalyticsHead = () => {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gtag.GA_TRACKING_ID}', {
+            page_path: window.location.pathname,
+          });
+        `,
+      }}
+    />
+  )
+}
+
+const GoogleAnalytics = () => {
+  const [loaded, setLoaded] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!loaded) return
+
+    gtag.pageview(pathname)
+  }, [pathname, loaded])
+
+  return (
+    <div>
+      <Script
+        strategy='afterInteractive'
+        onLoad={() => setLoaded(true)}
+        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+      />
+    </div>
+  )
+}
+
+export {GoogleAnalyticsHead, GoogleAnalytics}

package/next/analytics/gtag.ts

@@ -0,0 +1,17 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: string) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  })
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }: {action: string, category: string, label: string, value: string}) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}

package/next/analytics/pixel-analytics.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Script from 'next/script'
+import { useEffect, useState } from 'react'
+import * as fbq from './fpixel'
+
+const FacebookPixelHead = () => {
+  return (
+    <noscript>
+      <img
+        height='1'
+        width='1'
+        style={{ display: 'none' }}
+        src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
+      />
+    </noscript>
+  )
+}
+
+const FacebookPixel = () => {
+  const [loaded, setLoaded] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!loaded) return
+
+    fbq.pageview()
+  }, [pathname, loaded])
+
+  return (
+    <div>
+       <Script
+        id='fb-pixel'
+        strategy='afterInteractive'
+        onLoad={() => setLoaded(true)}
+        dangerouslySetInnerHTML={{
+          __html: `
+            !function(f,b,e,v,n,t,s)
+            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+            n.queue=[];t=b.createElement(e);t.async=!0;
+            t.src=v;s=b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t,s)}(window, document,'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+            fbq('init', ${fbq.FB_PIXEL_ID});
+          `,
+        }}
+      />
+    </div>
+  )
+}
+
+export {FacebookPixelHead, FacebookPixel}

package/next/root-layout.tsx

@@ -3,6 +3,8 @@ import React, { type PropsWithChildren } from 'react'
 import Header from '../common/header'
 import type { SiteDef } from '../types'
 import getAppRouterBodyFontClasses from './get-app-router-font-classes'
+import { FacebookPixelHead, FacebookPixel } from './analytics/pixel-analytics'
+import { GoogleAnalytics, GoogleAnalyticsHead } from './analytics/google-analytics'
 
 // Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
 const viewport = {
@@ -39,8 +41,12 @@ const RootLayout: React.FC<PropsWithChildren & {
     <head >
       {/* https://stackoverflow.com/a/75716588/11645689 */ }
       <base target='_blank' />
+      <FacebookPixelHead/>
+      <GoogleAnalyticsHead/>
     </head>
     <body className={bodyClasses}>
+      <FacebookPixel />
+      <GoogleAnalytics />
       {header && <Header siteDef={siteDef}/>}
       {children}
     </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "0.5.15",
+  "version": "0.5.17",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/primitives/dialog.tsx

@@ -50,7 +50,7 @@ const DialogClose = React.forwardRef<
     <DialogPrimitive.Close
         ref={ref}
         className={cn(
-            "absolute right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duration-100 ring-1 ring-secondary-400 transition bg-secondary-500 hover:text-primary-text focus:outline-none rounded-full items-center",
+            "absolute right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duration-100 ring-1 ring-muted transition bg-secondary-500 hover:text-primary-text focus:outline-none rounded-full items-center",
             className
         )}
         {...props}

package/siteDef/footer/legal.ts

@@ -3,12 +3,12 @@ import type { LinkDef } from '../../types'
 const legal: LinkDef[] = [
   {
     title: 'Terms and Conditions',
-    href: '/assets/standard-docs/LUX-NFT-Terms-and-Conditions.pdf',
+    href: '/terms',
     newTab: true,
   },
   {
     title: 'Privacy Policy',
-    href: '/assets/standard-docs/LUX-Privacy-Policy.pdf',
+    href: '/privacy',
     newTab: true,
   },
 ]