Added ButtonItem

graphcommerce-org · Jan 29, 2024 · ea1189f · ea1189f
1 parent 43f5039
commit ea1189f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/magento-pagebuilder/ContentTypes/ButtonItem/ButtonItem.tsx b/packages/magento-pagebuilder/ContentTypes/ButtonItem/ButtonItem.tsx
@@ -3,6 +3,8 @@ import { productLink } from '@graphcommerce/magento-product'
 import { Button, ButtonProps } from '@mui/material'
 import { extractAdvancedProps } from '../../utils'
 import { ButtonItemContentType } from './types'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 
 /**
  * Page Builder ButtonItem component.
@@ -13,6 +15,8 @@ import { ButtonItemContentType } from './types'
 export const ButtonItem: ButtonItemContentType['component'] = (props) => {
   const [cssProps, cssClasses, additional] = extractAdvancedProps(props)
 
+  const linkBase = useQuery(StoreConfigDocument).data?.storeConfig?.secure_base_link_url
+
   const { buttonType, link, openInNewTab = false, buttonText, linkType } = additional
 
   const buttonProps: ButtonProps<'a'> = {
@@ -23,9 +27,11 @@ export const ButtonItem: ButtonItemContentType['component'] = (props) => {
 
   if (!link) return null
 
+  const relativeUrl = linkBase ? link.replace(linkBase, '').trim() : link
+
   return (
     <Button
-      href={linkType === 'product' ? productLink({ url_key: link }) : link}
+      href={linkType === 'product' ? productLink({ url_key: relativeUrl }) : relativeUrl}
       // sx={sx}
       {...buttonProps}
       target={openInNewTab ? '_blank' : undefined}

diff --git a/packages/magento-pagebuilder/components/ButtonLink/ButtonLink.tsx b/packages/magento-pagebuilder/components/ButtonLink/ButtonLink.tsx
@@ -2,6 +2,8 @@
 import { productLink } from '@graphcommerce/magento-product'
 import { Button, ButtonProps, SxProps, Theme } from '@mui/material'
 import { ButtonLinkProps } from './getButtonLinkProps'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 
 type ButtonLinkComponentProps = ButtonLinkProps & {
   sx?: SxProps<Theme>
@@ -12,20 +14,24 @@ function isButton(props: any): props is ButtonLinkComponentProps {
 }
 
 export function ButtonLink(props: ButtonLinkComponentProps) {
-  if (!isButton(props)) return null
+  // if (!isButton(props)) return null
 
   const { buttonType, link, openInNewTab = false, buttonText, linkType, sx } = props
 
+  const linkBase = useQuery(StoreConfigDocument).data?.storeConfig?.secure_base_link_url
+
   const buttonProps: ButtonProps<'a'> = {
     variant: buttonType === 'link' ? 'text' : 'pill',
     color: buttonType === 'primary' ? 'primary' : 'secondary',
   }
 
   if (!link) return null
 
+  const relativeUrl = linkBase ? link.replace(linkBase, '').trim() : link
+
   return (
     <Button
-      href={linkType === 'product' ? productLink({ url_key: link }) : link}
+      href={linkType === 'product' ? productLink({ url_key: relativeUrl }) : relativeUrl}
       sx={sx}
       {...buttonProps}
       target={openInNewTab ? '_blank' : undefined}