-
-const YoutubeIframe = styled('iframe')({})
-
-export function YoutubeVideo(props: YoutubeVideoProps) {
- const { youtubeId, videoLoop, videoLazyLoading, sx = [] } = props
-
- const youtubeUrl = new URL('https://www.youtube.com/embed')
- const { searchParams } = youtubeUrl
- searchParams.set('controls', '0')
- searchParams.set('autoplay', '1')
- searchParams.set('mute', '1')
- searchParams.set('iv_load_policy', '3')
- searchParams.set('playsinline', '1')
- searchParams.set('modestbranding', '1')
- searchParams.set('loop', videoLoop ? '1' : '0')
- searchParams.set('playlist', youtubeId)
- searchParams.set('color', 'white')
-
- return (
-
- )
-}
diff --git a/packages/magento-pagebuilder/components/MediaBackground/extractImageBackgroundProps.ts b/packages/magento-pagebuilder/components/MediaBackground/extractImageBackgroundProps.ts
deleted file mode 100644
index 2e1abc4d16..0000000000
--- a/packages/magento-pagebuilder/components/MediaBackground/extractImageBackgroundProps.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { stripEmpty } from '../../utils'
-import type { ImageBackgroundProps } from './getImageBackgroundProps'
-
-export function extractImageBackgroundProps(
- props: P,
-): [Partial, Omit] {
- const {
- mobileImage,
- desktopImage,
- backgroundSize,
- backgroundRepeat,
- backgroundAttachment,
- backgroundPosition,
- ...remaining
- } = props
- return [
- stripEmpty({
- mobileImage,
- desktopImage,
- backgroundSize,
- backgroundRepeat,
- backgroundAttachment,
- backgroundPosition,
- }),
- remaining,
- ]
-}
diff --git a/packages/magento-pagebuilder/components/MediaBackground/extractVideoBackgroundProps.ts b/packages/magento-pagebuilder/components/MediaBackground/extractVideoBackgroundProps.ts
deleted file mode 100644
index de0898fad7..0000000000
--- a/packages/magento-pagebuilder/components/MediaBackground/extractVideoBackgroundProps.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { VideoBackgroundProps } from './getVideoBackgroundProps'
-
-export function extractVideoBackgroundProps(
- props: P,
-): [VideoBackgroundProps, Omit] {
- const {
- videoSrc,
- videoFallbackSrc,
- videoLazyLoading,
- videoLoop,
- videoOverlayColor,
- videoPlayOnlyVisible,
- ...remaining
- } = props
- return [
- {
- videoSrc,
- videoFallbackSrc,
- videoLazyLoading,
- videoLoop,
- videoOverlayColor,
- videoPlayOnlyVisible,
- },
- remaining,
- ]
-}
diff --git a/packages/magento-pagebuilder/components/MediaBackground/getImageBackgroundProps.ts b/packages/magento-pagebuilder/components/MediaBackground/getImageBackgroundProps.ts
deleted file mode 100644
index ee46805dc5..0000000000
--- a/packages/magento-pagebuilder/components/MediaBackground/getImageBackgroundProps.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { stripEmpty } from '../../utils'
-
-export type ImageBackgroundProps = {
- mobileImage?: string | null
- desktopImage?: string | null
-} & Pick<
- React.CSSProperties,
- 'backgroundSize' | 'backgroundPosition' | 'backgroundAttachment' | 'backgroundRepeat'
->
-
-/** Retrieve background images from a master format node */
-export function getImageBackgroundProps(node: HTMLElement): ImageBackgroundProps {
- const images = node.getAttribute('data-background-images')
- const response = {
- desktopImage: null,
- mobileImage: null,
- backgroundSize: node.style.backgroundSize,
- backgroundPosition: node.style.backgroundPosition,
- backgroundAttachment: node.style.backgroundAttachment,
- backgroundRepeat: node.style.backgroundRepeat || 'repeat',
- }
-
- if (images) {
- const imagesStructure = JSON.parse(images.replace(/\\"/g, '"'))
- if (imagesStructure.desktop_image) {
- response.desktopImage = imagesStructure.desktop_image
- }
- if (imagesStructure.mobile_image) {
- response.mobileImage = imagesStructure.mobile_image
- }
- }
-
- return stripEmpty(response)
-}
diff --git a/packages/magento-pagebuilder/components/MediaBackground/getMediaBackgroundProps.ts b/packages/magento-pagebuilder/components/MediaBackground/getMediaBackgroundProps.ts
deleted file mode 100644
index 51c9f49d60..0000000000
--- a/packages/magento-pagebuilder/components/MediaBackground/getMediaBackgroundProps.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ImageBackgroundProps } from './getImageBackgroundProps'
-import { getImageBackgroundProps } from './getImageBackgroundProps'
-import type { VideoBackgroundProps } from './getVideoBackgroundProps'
-import { getVideoBackgroundProps } from './getVideoBackgroundProps'
-
-export type MediaBackgroundProps =
- | (VideoBackgroundProps & { backgroundType: 'video' })
- | (ImageBackgroundProps & { backgroundType: 'image' })
-
-export function getMediaBackgroundProps(node: HTMLElement): MediaBackgroundProps {
- const backgroundType = node.getAttribute('data-background-type') === 'image' ? 'image' : 'video'
-
- return backgroundType === 'image'
- ? { ...getImageBackgroundProps(node), backgroundType }
- : { ...getVideoBackgroundProps(node), backgroundType }
-}
diff --git a/packages/magento-pagebuilder/components/MediaBackground/getVideoBackgroundProps.ts b/packages/magento-pagebuilder/components/MediaBackground/getVideoBackgroundProps.ts
deleted file mode 100644
index 9451a5e288..0000000000
--- a/packages/magento-pagebuilder/components/MediaBackground/getVideoBackgroundProps.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { stripEmpty } from '../../utils'
-
-export type VideoBackgroundProps = {
- videoSrc?: string | null
- videoFallbackSrc?: string | null
- videoLoop: boolean
- videoPlayOnlyVisible: boolean
- videoLazyLoading: boolean
- videoOverlayColor?: string | null
-}
-
-export function getVideoBackgroundProps(node: HTMLElement): VideoBackgroundProps {
- const videoOverlayElement = node.querySelector('[data-element="video_overlay"]')
- return stripEmpty({
- videoSrc: node.getAttribute('data-video-src'),
- videoFallbackSrc: node.getAttribute('data-video-fallback-src'),
- videoLoop: node.getAttribute('data-video-loop') === 'true',
- videoPlayOnlyVisible: node.getAttribute('data-video-play-only-visible') === 'true',
- videoLazyLoading: node.getAttribute('data-video-lazy-load') === 'true',
- videoOverlayColor: videoOverlayElement?.getAttribute('data-video-overlay-color'),
- })
-}
diff --git a/packages/magento-pagebuilder/components/Pagebuilder/ComplexTextValuePagebuilder.graphql b/packages/magento-pagebuilder/components/Pagebuilder/ComplexTextValuePagebuilder.graphql
deleted file mode 100644
index a53f17e244..0000000000
--- a/packages/magento-pagebuilder/components/Pagebuilder/ComplexTextValuePagebuilder.graphql
+++ /dev/null
@@ -1,3 +0,0 @@
-fragment ComplexTextValuePagebuilder on ComplexTextValue @inject(into: ["ComplexTextValue"]) {
- pagebuilder
-}
diff --git a/packages/magento-pagebuilder/components/Pagebuilder/OnlyChildren.tsx b/packages/magento-pagebuilder/components/Pagebuilder/OnlyChildren.tsx
deleted file mode 100644
index 37f42bdfab..0000000000
--- a/packages/magento-pagebuilder/components/Pagebuilder/OnlyChildren.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { RenderComponent } from '../../types'
-
-export const OnlyChildren: RenderComponent = ({ contentType }) => <>Can not render {contentType}
diff --git a/packages/magento-pagebuilder/components/Pagebuilder/Pagebuilder.tsx b/packages/magento-pagebuilder/components/Pagebuilder/Pagebuilder.tsx
deleted file mode 100644
index 4f6d7ac97f..0000000000
--- a/packages/magento-pagebuilder/components/Pagebuilder/Pagebuilder.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { getComponentByType } from '../../renderTypes'
-import { PagebuilderProvider } from './PagebuilderProvider'
-import { PagebuilderRender } from './PagebuilderRender'
-import { isPagebuilderValue } from './isPagebuilderValue'
-
-export type PagebuilderProps = {
- pagebuilder: unknown
- /** The children are only rendered when there is no pagebuilder content. */
- children: React.ReactNode
-}
-
-export function Pagebuilder(props: PagebuilderProps) {
- const { pagebuilder, children } = props
-
- if (isPagebuilderValue(pagebuilder)) {
- return (
-
-
-
- )
- }
-
- return <>{children}
-}
diff --git a/packages/magento-pagebuilder/components/Pagebuilder/PagebuilderProvider.tsx b/packages/magento-pagebuilder/components/Pagebuilder/PagebuilderProvider.tsx
deleted file mode 100644
index 07fd84136e..0000000000
--- a/packages/magento-pagebuilder/components/Pagebuilder/PagebuilderProvider.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { useMemo } from 'react'
-import type { GetRenderComponent } from '../../types'
-
-export type PagebuilderContext = {
- getComponentByType: GetRenderComponent
-}
-const pagebuilerContext = React.createContext(undefined as unknown as PagebuilderContext)
-
-if (process.env.NODE_ENV !== 'production') {
- pagebuilerContext.displayName = 'PagebuilerContext'
-}
-
-export type PagebuilderContextProps = {
- children: React.ReactNode
-} & PagebuilderContext
-
-export function PagebuilderProvider(props: PagebuilderContextProps) {
- const { children, getComponentByType } = props
- const value = useMemo(() => ({ getComponentByType }), [getComponentByType])
- return {children}
-}
-
-export function usePagebuilderContext() {
- return React.useContext(pagebuilerContext)
-}
diff --git a/packages/magento-pagebuilder/components/Pagebuilder/PagebuilderRender.tsx b/packages/magento-pagebuilder/components/Pagebuilder/PagebuilderRender.tsx
deleted file mode 100644
index 76e4d96149..0000000000
--- a/packages/magento-pagebuilder/components/Pagebuilder/PagebuilderRender.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ContentTypeConfigWithString } from '../../types'
-import { usePagebuilderContext } from './PagebuilderProvider'
-
-export function PagebuilderRender(props: { contentItem: ContentTypeConfigWithString }) {
- const { getComponentByType } = usePagebuilderContext()
- const { contentItem } = props
-
- if (!contentItem) return null
-
- if (typeof contentItem === 'string') {
- return (
-
- )
- }
-
- const Render = getComponentByType(contentItem.contentType)
-
- const { children, ...rest } = contentItem
- return (
-
- {children?.map((child, index) => (
- // eslint-disable-next-line react/no-array-index-key
-
- ))}
-
- )
-}
diff --git a/packages/magento-pagebuilder/components/Pagebuilder/isPagebuilderValue.ts b/packages/magento-pagebuilder/components/Pagebuilder/isPagebuilderValue.ts
deleted file mode 100644
index d765220987..0000000000
--- a/packages/magento-pagebuilder/components/Pagebuilder/isPagebuilderValue.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ContentTypeConfig } from '../../types'
-
-export function isPagebuilderValue(pagebuilder: unknown): pagebuilder is ContentTypeConfig {
- return (
- typeof (pagebuilder as ContentTypeConfig)?.contentType === 'string' &&
- Array.isArray((pagebuilder as ContentTypeConfig).children)
- )
-}
diff --git a/packages/magento-pagebuilder/components/ProductDescriptionPagebuilder/ProductDescriptionPagebuilder.tsx b/packages/magento-pagebuilder/components/ProductDescriptionPagebuilder/ProductDescriptionPagebuilder.tsx
deleted file mode 100644
index fdbbf3ade2..0000000000
--- a/packages/magento-pagebuilder/components/ProductDescriptionPagebuilder/ProductDescriptionPagebuilder.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ProductPageDescriptionProps } from '@graphcommerce/magento-product'
-import { ProductPageDescription } from '@graphcommerce/magento-product'
-import { Pagebuilder } from '../Pagebuilder/Pagebuilder'
-
-export function ProductPagePagebuilder(props: ProductPageDescriptionProps) {
- const { description } = props
-
- return (
-
-
-
- )
-}
diff --git a/packages/magento-pagebuilder/components/TextRenderer/TextRenderer.tsx b/packages/magento-pagebuilder/components/TextRenderer/TextRenderer.tsx
deleted file mode 100644
index 03800306bc..0000000000
--- a/packages/magento-pagebuilder/components/TextRenderer/TextRenderer.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-import { Box } from '@mui/material'
-
-export type TextProps = {
- textContent?: string
-}
-
-export type TextRendererProps = TextProps & {
- sx?: SxProps
-}
-
-export function TextRenderer(props: TextRendererProps) {
- const { textContent, sx = [] } = props
-
- const clickHandler = (event) => {
- event.prventDefault()
- console.log('handleclick')
- }
-
- if (!textContent) return null
-
- return (
-
- )
-}
diff --git a/packages/magento-pagebuilder/index.ts b/packages/magento-pagebuilder/index.ts
deleted file mode 100644
index 22f181dcca..0000000000
--- a/packages/magento-pagebuilder/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './components/CategoryPagebuilder/CategoryPagebuilder'
-export * from './components/ProductDescriptionPagebuilder/ProductDescriptionPagebuilder'
-export * from './components/CmsPagePagebuilder/CmsPagePagebuilder'
-export * from './components/Pagebuilder/Pagebuilder'
diff --git a/packages/magento-pagebuilder/mesh/resolvers.ts b/packages/magento-pagebuilder/mesh/resolvers.ts
deleted file mode 100644
index ab2c90a556..0000000000
--- a/packages/magento-pagebuilder/mesh/resolvers.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { MeshContext, Resolvers } from '@graphcommerce/graphql-mesh'
-import { detectPageBuilder } from '../parser/detectPageBuilder'
-import { parser } from '../parser/parser'
-
-function warnNoContent(
- content: string | null | undefined,
- requiredField: string,
- type: string,
- { logger }: MeshContext,
-): content is string | null {
- if (!content) {
- logger.warn(
- `Can not process pagebuilder field, please also query the ${requiredField} on type ${type}`,
- )
- return false
- }
- return true
-}
-
-function nullIfPagebuilder(html: string | null | undefined): string | null {
- if (!html) return null
- const pagebuilder = detectPageBuilder(html)
- if (pagebuilder) return null
- return html
-}
-
-export const resolvers: Resolvers = {
- CmsPage: {
- pagebuilder: {
- selectionSet: '{ content }',
- resolve: ({ content }, _, ctx) => {
- warnNoContent(content, 'content', 'CmsPage', ctx)
- return parser(content)
- },
- },
- content: ({ content }) => nullIfPagebuilder(content),
- },
- CmsBlock: {
- pagebuilder: {
- selectionSet: '{ content }',
- resolve: ({ content }, _, ctx) => {
- warnNoContent(content, 'content', 'CmsBlock', ctx)
- return parser(content)
- },
- },
- content: ({ content }) => nullIfPagebuilder(content),
- },
- CategoryTree: {
- pagebuilder: {
- selectionSet: '{ description }',
- resolve: ({ description }, _, ctx) => {
- warnNoContent(description, 'description', 'CategoryTree', ctx)
- return parser(description)
- },
- },
- description: ({ description }) => nullIfPagebuilder(description),
- },
- ComplexTextValue: {
- pagebuilder: {
- selectionSet: '{ html }',
- resolve: ({ html }, _, ctx) => {
- warnNoContent(html, 'html', 'ComplexTextValue', ctx)
- return parser(html)
- },
- },
- html: ({ html }) => nullIfPagebuilder(html) ?? '',
- },
-}
-
-export default { resolvers }
diff --git a/packages/magento-pagebuilder/package.json b/packages/magento-pagebuilder/package.json
deleted file mode 100644
index a97c5db2d2..0000000000
--- a/packages/magento-pagebuilder/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
- "name": "@graphcommerce/magento-pagebuilder",
- "homepage": "https://www.graphcommerce.org/",
- "repository": "github:graphcommerce-org/graphcommerce",
- "version": "9.0.4-canary.0",
- "sideEffects": false,
- "prettier": "@graphcommerce/prettier-config-pwa",
- "eslintConfig": {
- "extends": "@graphcommerce/eslint-config-pwa",
- "parserOptions": {
- "project": "./tsconfig.json"
- }
- },
- "devDependencies": {
- "@types/jsdom": "^21.1.7"
- },
- "dependencies": {
- "jsdom": "^23.2.0"
- },
- "peerDependencies": {
- "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.0",
- "@graphcommerce/graphql": "^9.0.4-canary.0",
- "@graphcommerce/magento-category": "^9.0.4-canary.0",
- "@graphcommerce/magento-cms": "^9.0.4-canary.0",
- "@graphcommerce/magento-product": "^9.0.4-canary.0",
- "@graphcommerce/next-ui": "^9.0.4-canary.0",
- "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.0",
- "@graphcommerce/react-hook-form": "^9.0.4-canary.0",
- "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.0",
- "@lingui/core": "^4.2.1",
- "@lingui/macro": "^4.2.1",
- "@lingui/react": "^4.2.1",
- "@mui/material": "^5.10.16",
- "framer-motion": "^11.0.0",
- "next": "*",
- "react": "^18.2.0",
- "react-dom": "^18.2.0"
- }
-}
diff --git a/packages/magento-pagebuilder/parser/detectPageBuilder.ts b/packages/magento-pagebuilder/parser/detectPageBuilder.ts
deleted file mode 100644
index c852b36dea..0000000000
--- a/packages/magento-pagebuilder/parser/detectPageBuilder.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** Determine if the content is Page Builder or not */
-export function detectPageBuilder(content?: string | null): content is string {
- return !!(content && /data-content-type=/.test(content))
-}
diff --git a/packages/magento-pagebuilder/parser/parseChildren.ts b/packages/magento-pagebuilder/parser/parseChildren.ts
deleted file mode 100644
index 7615445687..0000000000
--- a/packages/magento-pagebuilder/parser/parseChildren.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { JSDOM } from 'jsdom'
-import type { ContentTypeConfigChildren } from '../types'
-import { isHTMLElement } from '../utils'
-import { convertToInlineStyles, createContentTypeObject, walk } from './parser'
-
-const jsdom = new JSDOM().window
-
-export function parseChildren(node: HTMLElement) {
- const content: ContentTypeConfigChildren = [...node.childNodes].map((childNode) => {
- if (isHTMLElement(childNode)) {
- if (childNode.classList.contains('block-static-block')) {
- const stageContentType = createContentTypeObject('root-container')
- convertToInlineStyles(childNode)
-
- walk(childNode, stageContentType, (rootEl) =>
- jsdom.window.document.createTreeWalker(
- rootEl,
- // eslint-disable-next-line no-bitwise
- jsdom.window.NodeFilter.SHOW_ELEMENT | jsdom.window.NodeFilter.SHOW_TEXT,
- ),
- )
- return stageContentType
- }
- }
-
- if (childNode.nodeName === '#text' && childNode.textContent) {
- const { body } = new JSDOM(`${childNode.textContent}`).window.document
-
- // Delete all script tags
- body.querySelectorAll('script').forEach((script) => script.remove())
-
- return body.innerHTML
- }
-
- return null
- })
-
- return content
-}
diff --git a/packages/magento-pagebuilder/parser/parser.tsx b/packages/magento-pagebuilder/parser/parser.tsx
deleted file mode 100644
index 7f0e524eec..0000000000
--- a/packages/magento-pagebuilder/parser/parser.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/* eslint-disable no-continue */
-// import { getContentTypeConfig } from './config'
-import { JSDOM } from 'jsdom'
-import type { ContentTypeKeys } from '../parserTypes'
-import { getContentType } from '../parserTypes'
-import type { ContentTypeConfig } from '../types'
-// eslint-disable-next-line import/no-cycle
-import { getIsHidden, isHTMLElement } from '../utils'
-import { detectPageBuilder } from './detectPageBuilder'
-
-const pbStyleAttribute = 'data-pb-style'
-const bodyId = 'html-body'
-
-export const createContentTypeObject = (type: string, node?: HTMLElement): ContentTypeConfig => ({
- contentType: type,
- appearance: node ? node.getAttribute('data-appearance') : null,
- children: [],
-})
-
-/** Walk over tree nodes extracting each content types configuration */
-export const walk = (
- rootEl: Node,
- contentTypeStructureObj: ContentTypeConfig,
- treeWalkerCb: (node: Node) => TreeWalker,
-) => {
- const tree = treeWalkerCb(rootEl)
-
- let currentNode = tree.nextNode()
- while (currentNode) {
- if (!isHTMLElement(currentNode)) {
- currentNode = tree.nextNode()
- continue
- }
-
- const contentType = currentNode.getAttribute('data-content-type') as ContentTypeKeys
-
- if (!contentType) {
- currentNode = tree.nextNode()
- continue
- }
-
- const props = createContentTypeObject(contentType, currentNode)
- const aggregator = getContentType(contentType)
-
- if (aggregator && typeof aggregator === 'function') {
- try {
- const result = { ...props, ...aggregator(currentNode, props) }
-
- if (!getIsHidden(currentNode)) contentTypeStructureObj.children.push(result)
- } catch (e) {
- console.error(`Failed to aggregate config for content type ${contentType}.`, e)
- }
- } else {
- console.warn(
- `Page Builder ${contentType} content type is not supported, this content will not be rendered.`,
- )
- }
-
- walk(currentNode, props, treeWalkerCb)
- currentNode = tree.nextSibling()
- }
-
- return contentTypeStructureObj
-}
-
-function isCssStyleRule(rule: CSSRule): rule is CSSStyleRule {
- return !!(rule as CSSStyleRule).style
-}
-function isCssMediaRule(rule: CSSRule): rule is CSSMediaRule {
- return !!(rule as CSSMediaRule).media
-}
-
-/** Convert styles block to inline styles. */
-export const convertToInlineStyles = (document: HTMLElement | Document) => {
- const styleBlocks = document.getElementsByTagName('style')
- const styles: Record = {}
- const mediaStyles: Record = {}
-
- ;[...styleBlocks].forEach((styleBlock) => {
- const cssRules = Array.from(styleBlock.sheet?.cssRules ?? [])
-
- cssRules.forEach((rule) => {
- if (isCssStyleRule(rule)) {
- const selectors = rule.selectorText.split(',').map((selector) => selector.trim())
- selectors.forEach((selector) => {
- if (!styles[selector]) styles[selector] = []
- styles[selector].push(rule.style)
- })
- } else if (isCssMediaRule(rule)) {
- Array.from(rule.media).forEach((media) => {
- const mediaStyle = Array.from(rule.cssRules)
- .filter(isCssStyleRule)
- .map((cssRule) => ({
- selectors: cssRule.selectorText.split(',').map((selector) => selector.trim()),
- css: cssRule.style.cssText,
- }))
- mediaStyles[media] = mediaStyle
- })
- }
- })
- })
-
- Object.keys(mediaStyles).forEach((media, i) => {
- mediaStyles[media].forEach((style) => {
- style.selectors.forEach((selector) => {
- const element = document.querySelector(selector)
-
- if (element) {
- element.setAttribute(`data-media-${i}`, media)
- const savedStyles = element.getAttribute(`data-media-style-${i}`) ?? ''
-
- element.setAttribute(`data-media-style-${i}`, `${savedStyles} ${style.css}`)
- }
- })
- })
- })
-
- Object.keys(styles).forEach((selector) => {
- const element = document.querySelector(selector)
- if (!element) return
-
- styles[selector].forEach((style) => {
- element.setAttribute('style', element.style.cssText + style.cssText)
- })
- element.removeAttribute(pbStyleAttribute)
- })
-}
-
-export const parser = (htmlStr: string | null | undefined) => {
- if (!detectPageBuilder(htmlStr)) return null
-
- const jsdom = new JSDOM(`${htmlStr}`)
-
- // const { document } = jsdom.window
- const stageContentType = createContentTypeObject('root-container')
-
- const { document } = jsdom.window
- const { body } = jsdom.window.document
-
- body.id = bodyId
- convertToInlineStyles(jsdom.window.document)
-
- return walk(body, stageContentType, (rootEl) =>
- document.createTreeWalker(
- rootEl,
- // eslint-disable-next-line no-bitwise
- jsdom.window.NodeFilter.SHOW_ELEMENT | jsdom.window.NodeFilter.SHOW_TEXT,
- ),
- )
-}
diff --git a/packages/magento-pagebuilder/parserTypes.ts b/packages/magento-pagebuilder/parserTypes.ts
deleted file mode 100644
index 58a0bd06fb..0000000000
--- a/packages/magento-pagebuilder/parserTypes.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { bannerAggregator } from './ContentTypes/Banner/bannerAggregator'
-import { blockAggregator } from './ContentTypes/Block/blockAggregator'
-import { buttonItemAggregator } from './ContentTypes/ButtonItem/buttonItemAggregator'
-import { buttonsAggregator } from './ContentTypes/Buttons/buttonsAggregator'
-import { columnAggregator } from './ContentTypes/Column/columnAggregator'
-import { columnGroupAggregator } from './ContentTypes/ColumnGroup/columnGroupAggregator'
-import { dividerAggregator } from './ContentTypes/Divider/dividerAggregator'
-import { headingAggregator } from './ContentTypes/Heading/headingAggregator'
-import { htmlAggregator } from './ContentTypes/Html/htmlAggregator'
-import { imageAggregator } from './ContentTypes/Image/imageAggregator'
-import { rowAggregator } from './ContentTypes/Row/rowAggregator'
-import { sliderAggregator } from './ContentTypes/Slider/sliderAggregator'
-import { tabItemAggregator } from './ContentTypes/TabItem/tabItemAggregator'
-import { tabsAggregator } from './ContentTypes/Tabs/tabsAggregator'
-import { textAggregator } from './ContentTypes/Text/textAggregator'
-import { videoAggregator } from './ContentTypes/Video/videoAggregator'
-import type { ParseProps } from './types'
-import { ContentTypeConfig } from './types'
-
-type ContentTypes =
- | 'row'
- | 'column'
- | 'column-group'
- | 'banner'
- | 'block'
- | 'button-item'
- | 'buttons'
- | 'divider'
- | 'heading'
- | 'html'
- | 'image'
- | 'slider'
- | 'slide'
- | 'tab-item'
- | 'tabs'
- | 'text'
- | 'video'
- | 'dynamic_block'
-
-export const contentTypes = {
- row: rowAggregator,
- column: columnAggregator,
- 'column-group': columnGroupAggregator,
- image: imageAggregator,
- heading: headingAggregator,
- text: textAggregator,
- tabs: tabsAggregator,
- 'tab-item': tabItemAggregator,
- buttons: buttonsAggregator,
- 'button-item': buttonItemAggregator,
- block: blockAggregator,
- // dynamic_block,
- // products,
- html: htmlAggregator,
- divider: dividerAggregator,
- video: videoAggregator,
- // map,
- banner: bannerAggregator,
- slider: sliderAggregator,
- slide: bannerAggregator,
-}
-
-export type ContentTypeKeys = keyof typeof contentTypes
-
-export function getContentType(name: ContentTypeKeys): ParseProps | undefined {
- return contentTypes[name] as ParseProps | undefined
-}
diff --git a/packages/magento-pagebuilder/renderTypes.ts b/packages/magento-pagebuilder/renderTypes.ts
deleted file mode 100644
index 84f4abd88e..0000000000
--- a/packages/magento-pagebuilder/renderTypes.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type React from 'react'
-import { Banner } from './ContentTypes/Banner/Banner'
-import { Block } from './ContentTypes/Block/Block'
-import { ButtonItem } from './ContentTypes/ButtonItem/ButtonItem'
-import { Buttons } from './ContentTypes/Buttons/Buttons'
-import { Column } from './ContentTypes/Column/Column'
-import { ColumnGroup } from './ContentTypes/ColumnGroup/ColumnGroup'
-import { Divider } from './ContentTypes/Divider/Divider'
-import { Heading } from './ContentTypes/Heading/Heading'
-import { Html } from './ContentTypes/Html/Html'
-import { Image } from './ContentTypes/Image/Image'
-import { RootContainer } from './ContentTypes/RootContainer/RootContainer'
-import { Row } from './ContentTypes/Row/Row'
-import { Slider } from './ContentTypes/Slider/Slider'
-import { TabItem } from './ContentTypes/TabItem/TabItem'
-import { Tabs } from './ContentTypes/Tabs/Tabs'
-import { Text } from './ContentTypes/Text/Text'
-import { Video } from './ContentTypes/Video/Video'
-import { OnlyChildren } from './components/Pagebuilder/OnlyChildren'
-import type { ContentTypeConfig, GetRenderComponent } from './types'
-
-const renderTypes = {
- 'root-container': RootContainer,
- row: Row,
- column: Column,
- 'column-group': ColumnGroup,
- image: Image,
- heading: Heading,
- text: Text,
- tabs: Tabs,
- 'tab-item': TabItem,
- buttons: Buttons,
- 'button-item': ButtonItem,
- block: Block,
- // dynamic_block,
- // products,
- html: Html,
- divider: Divider,
- video: Video,
- // map,
- banner: Banner,
- slider: Slider,
- slide: Banner,
-}
-
-export type RenderTypeKeys = keyof typeof renderTypes
-
-/** Retrieve a content types configuration */
-export const getComponentByType: GetRenderComponent = (contentType: string) =>
- renderTypes[contentType] ?? OnlyChildren
-
-/** Set content types configuration with new one */
-export function setRenderType(contentType: string, config: React.FC) {
- renderTypes[contentType] = config
-}
diff --git a/packages/magento-pagebuilder/schema/PageBuilder.graphqls b/packages/magento-pagebuilder/schema/PageBuilder.graphqls
deleted file mode 100644
index 501118594a..0000000000
--- a/packages/magento-pagebuilder/schema/PageBuilder.graphqls
+++ /dev/null
@@ -1,13 +0,0 @@
-scalar PagebuilderAST
-extend type CategoryTree {
- pagebuilder: PagebuilderAST
-}
-extend type ComplexTextValue {
- pagebuilder: PagebuilderAST
-}
-extend type CmsBlock {
- pagebuilder: PagebuilderAST
-}
-extend type CmsPage {
- pagebuilder: PagebuilderAST
-}
diff --git a/packages/magento-pagebuilder/types.ts b/packages/magento-pagebuilder/types.ts
deleted file mode 100644
index 0fc1f8e72f..0000000000
--- a/packages/magento-pagebuilder/types.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type React from 'react'
-
-export type ContentTypeConfigChildren = Array
-
-export type ContentTypeConfigWithString = string | null | ContentTypeConfig
-
-export type ContentTypeConfig = {
- contentType: T
- appearance: string | null
- children: ContentTypeConfigChildren
-}
-
-export type ParseProps<
- Config extends ContentTypeConfig = ContentTypeConfig,
- R extends Record = Record,
-> = (node: HTMLElement, config: Config) => R
-
-export type ContentType> = {
- configAggregator: ParseProps
- component: React.FC
-}
-
-export type RenderComponent = React.FC<
- Omit, 'children'> & { children: React.ReactNode }
->
-
-export type GetRenderComponent = (contentType: string) => RenderComponent
diff --git a/packages/magento-pagebuilder/utils.ts b/packages/magento-pagebuilder/utils.ts
deleted file mode 100644
index b264a7788b..0000000000
--- a/packages/magento-pagebuilder/utils.ts
+++ /dev/null
@@ -1,226 +0,0 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import type { SxProps, Theme } from '@mui/material'
-import type React from 'react'
-
-export function isHTMLElement(node: Node): node is HTMLElement {
- return node.nodeType === 1
-}
-
-const alignmentToFlex = {
- top: 'flex-start',
- middle: 'center',
- bottom: 'flex-end',
-}
-
-/** Retrieve vertical alignment from a master format node */
-export function getVerticalAlignment(node: HTMLElement): VerticalAlignment {
- let verticalAlignment = null
- if (node.style.justifyContent) {
- verticalAlignment = flexToVerticalAlignment(node.style.justifyContent)
- }
-
- return stripEmpty({ verticalAlignment })
-}
-
-export type VerticalAlignment = {
- verticalAlignment: 'top' | 'middle' | 'bottom' | null
-}
-
-/** Convert vertical alignment values to flex values */
-export function verticalAlignmentToFlex(alignment: string | null) {
- return alignmentToFlex[alignment ?? 'middle']
-}
-
-/** Convert flex to vertical alignment values */
-export function flexToVerticalAlignment(flex: string) {
- const flexToAlignment = Object.assign(
- {},
- ...Object.entries(alignmentToFlex).map(([a, b]) => ({ [b]: a })),
- )
- return flexToAlignment[flex]
-}
-
-export type AdvancedProps = PaddingProps &
- MarginProps &
- BorderProps &
- TextAlignProps &
- CssClassesProps &
- MediaQueryProps
-
-export function stripEmpty>(obj: T): T {
- return Object.entries(obj).reduce((acc, [key, value]) => {
- if (value !== undefined && value !== null && value !== '') {
- acc[key] = value
- }
- return acc
- }, {}) as T
-}
-
-/** Retrieve advanced props from content type node */
-export function getAdvanced(node: HTMLElement): AdvancedProps {
- return {
- ...getPadding(node),
- ...getMargin(node),
- ...getBorder(node),
- ...getTextAlign(node),
- ...getCssClasses(node),
- ...getMediaQuery(node),
- }
-}
-
-export function extractAdvancedProps(props: P) {
- const [padding, remainging] = extractPaddingProps(props)
- const [margin, remainging2] = extractMarginProps(remainging)
- const [border, remainging3] = extractBorderProps(remainging2)
- const [textAlign, remainging4] = extractTextAlignProps(remainging3)
- const [cssClasses, remainging5] = extractCssClassesProps(remainging4)
-
- return [{ ...padding, ...margin, ...border, ...textAlign }, cssClasses, remainging5] as const
-}
-
-export type PaddingProps = Pick<
- React.CSSProperties,
- 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'
->
-
-/** Retrieve the padding from a content type node */
-export function getPadding(node: HTMLElement): PaddingProps {
- return stripEmpty({
- paddingTop: node.style.paddingTop,
- paddingRight: node.style.paddingRight,
- paddingBottom: node.style.paddingBottom,
- paddingLeft: node.style.paddingLeft,
- })
-}
-
-export function extractPaddingProps
(
- props: P,
-): [PaddingProps, Omit] {
- const { paddingTop, paddingRight, paddingBottom, paddingLeft, ...remaining } = props
- return [stripEmpty({ paddingTop, paddingRight, paddingBottom, paddingLeft }), remaining]
-}
-
-export type MarginProps = Pick<
- React.CSSProperties,
- 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'
->
-
-/** Retrieve the margin from a content type node */
-export function getMargin(node: HTMLElement): MarginProps {
- return stripEmpty({
- marginTop: node.style.marginTop,
- marginRight: node.style.marginRight,
- marginBottom: node.style.marginBottom,
- marginLeft: node.style.marginLeft,
- })
-}
-
-export function extractMarginProps(
- props: P,
-): [Partial, Omit] {
- const { marginTop, marginLeft, marginBottom, marginRight, ...remaining } = props
- return [stripEmpty({ marginTop, marginLeft, marginBottom, marginRight }), remaining]
-}
-
-export type BorderProps = Pick<
- React.CSSProperties,
- 'border' | 'borderColor' | 'borderWidth' | 'borderRadius'
->
-
-/** Retrieve the border from a content type node */
-export function getBorder(node: HTMLElement): BorderProps {
- return stripEmpty({
- border: node.style.borderStyle,
- borderColor: node.style.borderColor,
- borderWidth: node.style.borderWidth,
- borderRadius: node.style.borderRadius,
- })
-}
-
-export function extractBorderProps(
- props: P,
-): [BorderProps, Omit] {
- const { border, borderColor, borderRadius, borderWidth, ...remaining } = props
- return [stripEmpty({ border, borderColor, borderRadius, borderWidth }), remaining]
-}
-
-export type TextAlignProps = Pick
-
-/** Retrieve the text align from a content type node */
-export function getTextAlign(node: HTMLElement): TextAlignProps {
- return stripEmpty({
- textAlign: node.style.textAlign as React.CSSProperties['textAlign'],
- })
-}
-
-export function extractTextAlignProps(
- props: P,
-): [TextAlignProps, Omit] {
- const { textAlign, ...remaining } = props
- return [stripEmpty({ textAlign }), remaining]
-}
-
-export type CssClassesProps = {
- cssClasses?: string[]
-}
-
-/** Retrieve the CSS classes from a content type node */
-export function getCssClasses(node: HTMLElement): CssClassesProps {
- return stripEmpty({
- cssClasses: node.getAttribute('class') ? node.getAttribute('class')?.split(' ') : [],
- })
-}
-
-export function extractCssClassesProps(
- props: P,
-): [string[], Omit] {
- const { cssClasses = [], ...remaining } = props
- return [cssClasses, remaining]
-}
-
-/** Retrieve if CSS display property is set to none from a content type node */
-export function getIsHidden(node: HTMLElement) {
- return node.style.display === 'none'
-}
-
-/**
- * Converts a CSS string style into a JSX object inline style
- *
- * @param {String} style
- * @returns {Object}
- */
-export function cssToJSXStyle(style: string): React.CSSProperties {
- const toCamelCase = (str: string) => str.replace(/-(.)/g, (_, p) => p.toUpperCase())
- const result = {}
- style.split(';').forEach((el) => {
- const [prop, value] = el.split(':')
- if (prop) {
- result[toCamelCase(prop.trim())] = value.trim()
- }
- })
-
- return result
-}
-
-export type MediaQueryProps = {
- sx?: SxProps
-}
-
-/** Retrieve media queries from a master format node */
-export function getMediaQuery(node: HTMLElement): MediaQueryProps {
- const sx: SxProps = []
- const dataset = Object.keys(node.dataset)
-
- const medias = dataset.filter((key) => key.match(/media-/)).map((key) => node.dataset[key] ?? '')
- const styles = dataset
- .filter((key) => key.match(/mediaStyle/))
- .map((key) => node.dataset[key] ?? '')
-
- if (medias.length === 0) return {}
-
- medias.forEach((media, i) => {
- sx.push({ [media]: cssToJSXStyle(styles[i]) })
- })
-
- return { sx }
-}
diff --git a/packages/magento-pagebuilder/utils/handleHtmlContentClick.ts b/packages/magento-pagebuilder/utils/handleHtmlContentClick.ts
deleted file mode 100644
index 31c73f006c..0000000000
--- a/packages/magento-pagebuilder/utils/handleHtmlContentClick.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Helper function for onClick() HTML Events
- *
- * @param {object} history History object
- * @param {function} history.push Pushes a new entry onto the history stack
- * @param {Event} event
- */
-const handleHtmlContentClick = (history, event) => {
- const { code, target, type } = event
-
- // Check if element is clicked or using accepted keyboard event
- const shouldIntercept = type === 'click' || code === 'Enter' || code === 'Space'
-
- // Intercept link clicks and check to see if the
- // destination is internal to avoid refreshing the page
- if (target.tagName === 'A' && shouldIntercept) {
- event.preventDefault()
-
- const eventOrigin = event.view.location.origin
-
- const { origin: linkOrigin, pathname: path, target: tabTarget, href } = target
-
- if (tabTarget && globalThis.open) {
- globalThis.open(href, '_blank')
- } else if (linkOrigin === eventOrigin) {
- history.push(path)
- } else {
- globalThis.location.assign(href)
- }
- }
-}
-
-export default handleHtmlContentClick
diff --git a/packages/magento-pagebuilder/utils/resolveLinkProps.ts b/packages/magento-pagebuilder/utils/resolveLinkProps.ts
deleted file mode 100644
index ffee9fa516..0000000000
--- a/packages/magento-pagebuilder/utils/resolveLinkProps.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Resolve link properties
- *
- * @param {string} link
- */
-export default (link) => {
- let isExternalUrl
- const linkProps = {}
-
- try {
- const baseUrlObj = new URL(process.env.MAGENTO_BACKEND_URL)
- const urlObj = new URL(link, baseUrlObj)
- isExternalUrl = baseUrlObj.host !== urlObj.host
-
- if (isExternalUrl) {
- linkProps.href = link
- } else {
- linkProps.to = urlObj.pathname
- }
- } catch (e) {
- linkProps.href = link
- }
-
- return linkProps
-}
diff --git a/packages/magento-payment-adyen/CHANGELOG.md b/packages/magento-payment-adyen/CHANGELOG.md
index 8d7e153b6f..0ae89c37a9 100644
--- a/packages/magento-payment-adyen/CHANGELOG.md
+++ b/packages/magento-payment-adyen/CHANGELOG.md
@@ -2,18 +2,6 @@
## 9.0.4-canary.0
-## 9.0.3
-
-## 9.0.3-canary.0
-
-## 9.0.2
-
-## 9.0.2-canary.0
-
-## 9.0.1
-
-## 9.0.1-canary.1
-
## 9.0.0
### Major Changes
diff --git a/packages/magento-payment-adyen/components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder.tsx b/packages/magento-payment-adyen/components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder.tsx
index 15f6c760ba..9266cac86d 100644
--- a/packages/magento-payment-adyen/components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder.tsx
+++ b/packages/magento-payment-adyen/components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder.tsx
@@ -7,7 +7,6 @@ import {
usePaymentMethodContext,
} from '@graphcommerce/magento-cart-payment-method'
import { FormRow } from '@graphcommerce/next-ui'
-import { t } from '@lingui/macro'
import { useRouter } from 'next/router'
import { useAdyenCartLock } from '../../hooks/useAdyenCartLock'
import { useAdyenPaymentMethod } from '../../hooks/useAdyenPaymentMethod'
diff --git a/packages/magento-payment-adyen/hooks/useAdyenCartLock.ts b/packages/magento-payment-adyen/hooks/useAdyenCartLock.ts
index b03bd04335..9b8fa7d9d6 100644
--- a/packages/magento-payment-adyen/hooks/useAdyenCartLock.ts
+++ b/packages/magento-payment-adyen/hooks/useAdyenCartLock.ts
@@ -8,8 +8,10 @@ type AdyenLockState = CartLockState & {
}
/**
- * The cart lock situation is a bit odd since are unable to actually influence the return URL we can't safely remember the cart ID.
+ * The cart lock situation is a bit odd since are unable to actually influence the return URL we
+ * can't safely remember the cart ID.
*
- * This is a potential bug because when the customer is returning from an icognito session, the cart ID is not available.
+ * This is a potential bug because when the customer is returning from an icognito session, the cart
+ * ID is not available.
*/
export const useAdyenCartLock = () => useCartLock()
diff --git a/packages/magento-payment-braintree/CHANGELOG.md b/packages/magento-payment-braintree/CHANGELOG.md
index e2be13f37c..27d509bec3 100644
--- a/packages/magento-payment-braintree/CHANGELOG.md
+++ b/packages/magento-payment-braintree/CHANGELOG.md
@@ -2,18 +2,6 @@
## 9.0.4-canary.0
-## 9.0.3
-
-## 9.0.3-canary.0
-
-## 9.0.2
-
-## 9.0.2-canary.0
-
-## 9.0.1
-
-## 9.0.1-canary.1
-
## 9.0.0
### Major Changes
diff --git a/packages/magento-payment-braintree/methods/braintree_local_payments/PaymentMethodOptions.tsx b/packages/magento-payment-braintree/methods/braintree_local_payments/PaymentMethodOptions.tsx
index 2a35dfbd30..086e305e4e 100644
--- a/packages/magento-payment-braintree/methods/braintree_local_payments/PaymentMethodOptions.tsx
+++ b/packages/magento-payment-braintree/methods/braintree_local_payments/PaymentMethodOptions.tsx
@@ -120,6 +120,7 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
code,
}
} catch (e) {
+ // eslint-disable-next-line @typescript-eslint/no-floating-promises
if (isBraintreeError(e)) unlock({ payment_id: null })
throw e
}
@@ -132,7 +133,10 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
/** To use an external Pay button we register the current form to be handled there as well. */
useFormCompose({ form, step, submit, key: `PaymentMethodOptions_${code}` })
- /** This is the form that the user can fill in. In this case we don't wat the user to fill in anything. */
+ /**
+ * This is the form that the user can fill in. In this case we don't wat the user to fill in
+ * anything.
+ */
return (