feat: create button as embeddable component

backend/src/data/default_config.json

@@ -1,9 +1,14 @@
 {
   "buttonFontName": "Arial",
+  "buttonFontSize": 16,
   "buttonText": "Support me",
+  "buttonDescriptionText": "Open a new way to support our content",
   "buttonBorder": "Light",
   "buttonTextColor": "#ffffff",
-  "buttonBackgroundColor": "#ff808c",
+  "buttonBackgroundColor": "#f69656",
+  "buttonTooltip": "0",
+  "buttonTooltipTextColor": "#ffffff",
+  "buttonTooltipBackgroundColor": "#f69656",
   "bannerFontName": "Arial",
   "bannerFontSize": 16,
   "bannerTitleText": "How to support?",

frontend/app/components/Select.tsx

@@ -120,7 +120,7 @@ export const Select = ({
         >
           <Combobox.Options
             className={cx(
-              'absolute max-h-60 w-full overflow-auto rounded-b-md bg-white py-1 z-10 text-base shadow-lg outline-0 focus:outline-none sm:text-sm',
+              'absolute max-h-60 w-auto overflow-auto rounded-b-md bg-white py-1 z-10 text-base shadow-lg outline-0 focus:outline-none sm:text-sm',
               label ? 'mt-14' : 'mt-8'
             )}
           >

frontend/app/components/UploadControl.tsx

@@ -6,6 +6,8 @@ import { processSVG } from '~/lib/utils.js'
 import { triggerColorPresets } from '~/lib/presets.js'
 
 export type UploadControlProps = {
+  name: string
+  value: string
   setImage: (value: string, color?: string) => void
 }
 
@@ -35,7 +37,11 @@ const resizeImage = (img: HTMLImageElement, maxSize: number = 100): string => {
   return canvas.toDataURL('image/png')
 }
 
-export const UploadControl = ({ setImage }: UploadControlProps) => {
+export const UploadControl = ({
+  setImage,
+  name,
+  value
+}: UploadControlProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const defaultColor = triggerColorPresets[0]
 
@@ -83,6 +89,7 @@ export const UploadControl = ({ setImage }: UploadControlProps) => {
         ref={fileInputRef}
         onChange={handleFileChange}
       />
+      <input type="hidden" name={name} value={value} />
       <Button
         className="max-h-8"
         aria-label="Upload image"

frontend/app/components/compositions/ToolConfig.tsx

@@ -14,7 +14,9 @@ import {
   fontOptions,
   slideOptions,
   positionOptions,
-  widgetControlOptions
+  widgetControlOptions,
+  buttonControlOptions,
+  buttonTooltipOptions
 } from '~/lib/presets.js'
 import {
   Button,
@@ -53,6 +55,12 @@ const ButtonConfig = ({
 
   const bgColor = bgColors.button
 
+  useEffect(() => {
+    if (['tooltiptext', 'tooltipbackground'].indexOf(displayedControl) != -1) {
+      setToolConfig({ ...config, buttonTooltip: '1' })
+    }
+  }, [displayedControl])
+
   return (
     <div className="w-full">
       <div
@@ -85,12 +93,36 @@ const ButtonConfig = ({
             }}
             className={cx(displayedControl != 'text' && 'hidden')}
           />
+
+          <ColorPicker
+            label="Tooltip Background"
+            name="buttonTooltipBackgroundColor"
+            preset="background"
+            value={config?.buttonTooltipBackgroundColor}
+            updateColor={(value) =>
+              setToolConfig({
+                ...config,
+                buttonTooltipBackgroundColor: value
+              })
+            }
+            className={cx(displayedControl != 'tooltipbackground' && 'hidden')}
+          />
+          <ColorPicker
+            label="Tooltip Text color"
+            name="buttonTooltipTextColor"
+            preset="text"
+            value={config?.buttonTooltipTextColor}
+            updateColor={(value) => {
+              setToolConfig({ ...config, buttonTooltipTextColor: value })
+            }}
+            className={cx(displayedControl != 'tooltiptext' && 'hidden')}
+          />
         </div>
         <div className="flex items-center max-w-36 w-32 mr-3">
           <Select
             placeholder="Background"
-            options={controlOptions}
-            defaultValue={controlOptions.find(
+            options={buttonControlOptions}
+            defaultValue={buttonControlOptions.find(
               (opt) => opt.value == 'background'
             )}
             onChange={(value) => setDisplayedControl(value)}
@@ -101,6 +133,7 @@ const ButtonConfig = ({
         <div className="flex items-center max-w-36 w-32 shrink-0">
           <Select
             withBorder
+            label="Font"
             name="buttonFontName"
             placeholder="Select Font"
             options={fontOptions}
@@ -110,9 +143,20 @@ const ButtonConfig = ({
             }
           />
         </div>
+        <div className="flex items-center max-w-20 w-18 shrink-0">
+          <FontSize
+            name="buttonFontSize"
+            label="Size"
+            value={config?.buttonFontSize}
+            updateSize={(value) =>
+              setToolConfig({ ...config, buttonFontSize: Number(value ?? 16) })
+            }
+          />
+        </div>
         <div className="flex w-full items-center">
           <Input
             withBorder
+            label="Title"
             name="buttonText"
             value={config?.buttonText || ''}
             className="w-full"
@@ -125,6 +169,7 @@ const ButtonConfig = ({
         <div className="flex items-center max-w-36 w-32 shrink-0">
           <Select
             withBorder
+            label="Border"
             name="buttonBorder"
             placeholder="Select Rounding"
             options={cornerOptions}
@@ -137,6 +182,40 @@ const ButtonConfig = ({
           />
         </div>
       </div>
+      <div className="flex items-start w-full gap-2 mt-4">
+        <div className="flex items-center max-w-36 w-32 shrink-0">
+          <Select
+            withBorder
+            label="Tooltip"
+            name="buttonTooltip"
+            placeholder="Show tooltip"
+            options={buttonTooltipOptions}
+            value={buttonTooltipOptions.find(
+              (opt) => opt.value == config?.buttonTooltip
+            )}
+            onChange={(value) =>
+              setToolConfig({
+                ...config,
+                buttonTooltip: value
+              })
+            }
+          />
+        </div>
+        <div className="flex items-center w-full">
+          <Input
+            withBorder
+            name="buttonDescriptionText"
+            value={config?.buttonDescriptionText || ''}
+            className="w-full mt-7"
+            onChange={(e) =>
+              setToolConfig({
+                ...config,
+                buttonDescriptionText: e.target.value ?? ''
+              })
+            }
+          />
+        </div>
+      </div>
     </div>
   )
 }
@@ -407,6 +486,8 @@ const WidgetConfig = ({
               }}
             />
             <UploadControl
+              name="widgetTriggerIcon"
+              value={config?.widgetTriggerIcon}
               setImage={(value, color) => {
                 setToolConfig({
                   ...config,

frontend/app/components/compositions/ToolPreview.tsx

@@ -12,12 +12,45 @@ import {
   getWebMonetizationLink
 } from '~/lib/utils.js'
 import { WidgetFooter, NotFoundConfig } from '../index.js'
+import Tippy from '@tippyjs/react'
 
 const ButtonConfig = ({ config }: { config: ElementConfigType }) => {
+  const [canRenderTooltip, setCanRenderConfig] = useState(false)
+
+  useEffect(() => {
+    setCanRenderConfig(false)
+    setTimeout(() => {
+      setCanRenderConfig(true)
+    }, 500)
+  }, [config.buttonTooltip])
+
+  useEffect(() => {
+    setCanRenderConfig(true)
+  }, [])
+
   return (
-    <button className="wm_button" onClick={(e) => console.log(e)}>
-      {config.buttonText || '?'}
-    </button>
+    <>
+      {canRenderTooltip ? (
+        <Tippy
+          visible={
+            config.buttonTooltip == '2'
+              ? undefined
+              : config.buttonTooltip != '0' &&
+                !!config.buttonDescriptionText.length
+          }
+          className="button-tippy-wrapper"
+          content={<span>{config.buttonDescriptionText}</span>}
+        >
+          <button type="button" className="wm_button">
+            {config.buttonText || '?'}
+          </button>
+        </Tippy>
+      ) : (
+        <button type="button" className="wm_button">
+          {config.buttonText || '?'}
+        </button>
+      )}
+    </>
   )
 }
 

frontend/app/components/modals/Script.tsx

@@ -8,17 +8,20 @@ import { removeItem } from '~/lib/utils.js'
 type ScriptModalProps = {
   title: string
   tooltip?: string
+  buttonCodeTooltip?: string
   defaultType?: string
   scriptForDisplay: string
   isOpen: boolean
   onClose: () => void
 }
 
-const selectableTypes = ['banner', 'widget']
+const selectableTypes = ['banner', 'widget', 'button']
+const buttonCode = "<span class='_wm_tools_button'></span>"
 
 export const ScriptModal = ({
   title,
   tooltip,
+  buttonCodeTooltip,
   defaultType,
   scriptForDisplay,
   isOpen,
@@ -96,6 +99,28 @@ export const ScriptModal = ({
                     ></CopyButton>
                   </div>
                 </div>
+                {types.includes('button') && (
+                  <div className="flex flex-col">
+                    <span className="flex w-full ml-4">
+                      Button code{' '}
+                      <InfoWithTooltip tooltip={buttonCodeTooltip} />
+                    </span>
+                    <div className="flex">
+                      <code className="flex m-6 my-2 p-2 max-w-md w-md border border-tealish whitespace-pre-wrap break-all break-words overflow-x-auto block">
+                        {buttonCode}
+                      </code>
+                      <div className="flex">
+                        <CopyButton
+                          aria-label="copy button"
+                          className="h-7 w-7"
+                          size="sm"
+                          value={buttonCode}
+                          variant="input"
+                        ></CopyButton>
+                      </div>
+                    </div>
+                  </div>
+                )}
                 <Form method="post" replace preventScrollReset>
                   <div className="flex justify-end space-x-4">
                     <Button

frontend/app/lib/message.server.ts

@@ -22,7 +22,6 @@ export const messageStorage = createCookieSessionStorage<
     path: '/',
     httpOnly: true,
     sameSite: 'none',
-    partitioned: true,
     maxAge: ONE_MINUTE_IN_S,
     secrets: ['MY_SUPER_SECRET_TOKEN'],
     secure: process.env.ENABLE_INSECURE_MESSAGE_COOKIE

frontend/app/lib/presets.ts

@@ -49,18 +49,37 @@ export const widgetControlOptions = [
   },
   {
     value: 'buttonbackground',
-    label: 'Btn background'
+    label: 'Button background'
   },
   {
     value: 'buttontext',
-    label: 'Btn Text'
+    label: 'Button Text'
   },
   {
     value: 'trigger',
     label: 'Trigger & Icon'
   }
 ]
 
+export const buttonControlOptions = [
+  {
+    value: 'background',
+    label: 'Background'
+  },
+  {
+    value: 'text',
+    label: 'Text'
+  },
+  {
+    value: 'tooltipbackground',
+    label: 'Tooltip background'
+  },
+  {
+    value: 'tooltiptext',
+    label: 'Tooltip Text'
+  }
+]
+
 export const slideOptions = [
   {
     value: SlideAnimationType.None,
@@ -72,6 +91,21 @@ export const slideOptions = [
   }
 ]
 
+export const buttonTooltipOptions = [
+  {
+    value: '0',
+    label: 'Hide'
+  },
+  {
+    value: '1',
+    label: 'Show'
+  },
+  {
+    value: '2',
+    label: 'Hover'
+  }
+]
+
 export const positionOptions = [
   {
     value: PositionType.Bottom,
@@ -120,12 +154,12 @@ export const availableTools = [
       'You can add a widget to provide a brief explanation or description, along with a donation or one-time payment option, even for users without the Web Monetization extension. It also adds your wallet address for your site to be monetized.'
   },
   {
-    enabled: false,
+    enabled: true,
     title: 'Button',
     image: 'button_representation.svg',
     bgColor: 'from-wm-green to-wm-green-fade',
     link: 'create/button',
-    tooltip: '',
+    tooltip: tooltips.button,
     description:
       'You can place a custom button with a short tooltip on your site that triggers a payment option in a full-page overlay, offering a convenient way for visitors to support your work or content.'
   },

frontend/app/lib/tooltips.ts

@@ -5,6 +5,9 @@ export const tooltips = {
     "When a Web Monetization extension isn't detected, a banner will inform users that this site is Web Monetized. It will automatically include a browser-specific link to the extension. Messaging and styling are fully customizable to align with your site's look and feel.",
   widget:
     'This widget enables one-time payments for your website. It appears in the lower right corner, visible to all visitors regardless of their Web Monetization status. The title, text, and styling of the displayed message are customizable.',
+  button: '',
+  buttonCodeTooltip:
+    'Copy the button html to where you want the button to appear on your website',
   scriptModal:
     'Copy your script and insert it just before the closing </body> tag on your website, or place it within a script type element if you\'re using a site management software (ex: WordPress, etc). <br />Be sure to review and select all the options in the "Include" section, that you want to display on your website.'
 }