@app-brew/brewery 1.0.0

package/src/components/src/organisms/infinite-product-grid-v2/index.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+import { BaseBlockProps } from '@gauntlet/types'
+import { CollectionComponentProps } from '../../molecules/product-collection'
+import {
+  useAppStore,
+  useBlock,
+  useCollection,
+  useDeviceDimensions,
+  useGlobalSettings,
+  useLoadMore,
+} from '@gauntlet/state'
+import {
+  GenericProductCard,
+  normaliseLayout,
+} from '@gauntlet/components/molecules/generic-product-card'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { FlashList } from '@shopify/flash-list'
+import { View } from 'react-native'
+import { ProductCardSkeleton } from '@gauntlet/components/molecules/skeleton'
+import { Row } from '@gauntlet/components/atoms/flex'
+import base64 from 'react-native-base64'
+
+export type InfiniteProductGridProps = BaseBlockProps & {
+  collectionId?: string
+  searchQuery?: string
+  collectionHandle?: string
+  contentHeight: number
+}
+export function InfiniteProductGridV2({
+  componentId,
+  instanceId,
+  screenId,
+  setDynamicFooter,
+  collectionId,
+  searchQuery = '',
+  contentHeight,
+  collectionHandle,
+}: InfiniteProductGridProps) {
+  const { width } = useDeviceDimensions()
+  const contentWidth = width - 16
+  const block = useBlock(screenId, componentId, instanceId)
+  const style = useBlockStyle(block, { themeKey: 'product-collection' })
+  const { options, source, layout } = useBlockSettings(block, {
+    extends: 'product-collection',
+  })
+  const bundle = useAppStore((store) => store.bundle)
+  const globalSettings = useGlobalSettings()
+  const id = block.source?.bundleId ? bundle.collectionId : collectionId
+  const gid = React.useMemo(() => {
+    if (!id) return ''
+    if (id === 'search_collection') return id
+    if (id?.startsWith('gid')) return id
+    return base64.decode(id)
+  }, [id])
+
+  const defaultSortKey = options?.defaultSortKey ?? ''
+  const c = useCollection({
+    id: gid,
+    handle: collectionHandle,
+    showFiltered: true,
+    withSearch: true,
+    defaultSortKey,
+  })
+  const { fetchMore } = useLoadMore(c.data?.id ?? '', true)
+  let items: Array<string | { kind: string; id: string }> =
+    c?.data?.products ?? []
+  const productStyle = globalSettings.enableProductCardV3
+    ? style.productV2
+    : style.product
+  const productCardWidth = Math.floor((contentWidth - 8) / 2)
+  const productCardStyle = React.useMemo(() => {
+    return {
+      ...productStyle,
+      root: {
+        width: productCardWidth,
+        ...productStyle.root,
+      },
+    }
+  }, [productCardWidth, productStyle])
+  const productlayout = normaliseLayout(layout)
+  const renderItem = React.useCallback(({ item }) => {
+    if (typeof item !== 'string') {
+      return (
+        <ProductCardSkeleton
+          style={{
+            root: {
+              width: productCardWidth,
+              ...style?.skeleton?.root,
+            },
+          }}
+          skeletonProps={undefined}
+        />
+      )
+    }
+    return (
+      <GenericProductCard
+        style={productCardStyle}
+        options={options}
+        handle={item}
+        source={source}
+        layout={productlayout}
+      />
+    )
+  }, [])
+
+  return (
+    <View
+      style={{
+        height: contentHeight,
+        width: contentWidth,
+        marginLeft: 8,
+        marginRight: 8,
+      }}
+    >
+      <FlashList
+        data={items}
+        numColumns={2}
+        getItemType={(item) =>
+          typeof item === 'string' ? 'product' : item.kind
+        }
+        estimatedItemSize={320}
+        keyExtractor={(item) => (typeof item === 'string' ? item : item.id)}
+        showsVerticalScrollIndicator={false}
+        renderItem={renderItem}
+        drawDistance={contentHeight * 2}
+        onEndReached={() => {
+          if (c.data?.hasNextPage) {
+            fetchMore && fetchMore(c.data?.id)
+          }
+        }}
+        ListFooterComponent={() => {
+          if (c.status === 'idle') return null
+          return (
+            <Row>
+              <ProductCardSkeleton
+                style={{
+                  root: {
+                    width: productCardWidth,
+                    ...style?.skeleton?.root,
+                  },
+                }}
+                skeletonProps={undefined}
+              />
+              <ProductCardSkeleton
+                style={{
+                  root: {
+                    width: productCardWidth,
+                    ...style?.skeleton?.root,
+                  },
+                }}
+                skeletonProps={undefined}
+              />
+            </Row>
+          )
+        }}
+        onEndReachedThreshold={0.5}
+      />
+    </View>
+  )
+}

package/src/components/src/organisms/judgeme-reviews/index.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import {
+  useAppStore,
+  useBlock,
+  useDeviceDimensions,
+  useProductByHandle,
+  useUser,
+} from '@gauntlet/state'
+import { BaseBlockProps, JudgemeReviewsConfig } from '@gauntlet/types'
+import { Section } from '../../atoms/section'
+import { Text } from '../../atoms/text'
+import { ResilientAutoheightWebView } from '../../molecules/web-view-auto-height'
+import { View } from 'react-native'
+import { Loader } from '../payment-web-view'
+import { createHtmlForWidget } from './utils'
+import { useBlockSettings } from '@gauntlet/components/style-utils'
+
+export type JudgemeReviewsProps = BaseBlockProps & {
+  productHandle: string
+}
+export function JudgemeReviews({
+  screenId,
+  componentId,
+  instanceId,
+  productHandle,
+}: JudgemeReviewsProps) {
+  const gotoPath = useAppStore((s) => s.route.gotoPath)
+  const webViewRef = React.useRef<any>(null)
+  const { width, height } = useDeviceDimensions()
+  const block = useBlock<JudgemeReviewsConfig>(
+    screenId,
+    componentId,
+    instanceId
+  )
+  const settings = useBlockSettings(block)
+  const options = settings?.options
+  const product = useProductByHandle(productHandle, ['id'])
+  const judgemeConfig = useAppStore(
+    (state) => state.config.data?.integrations.judgeme
+  )
+  const { isUserAuthenticated } = useUser()
+  const html = React.useMemo(() => {
+    if (!judgemeConfig) return undefined
+    const { storeDomain, platform, publicToken, stylesheet } = judgemeConfig
+    return createHtmlForWidget({
+      productId: product.data?.id,
+      domain: storeDomain,
+      platform,
+      token: publicToken,
+      stylesheet,
+    })
+  }, [product.data?.id, judgemeConfig])
+
+  if (!html) return null
+
+  if (!block || product.status !== 'idle' || !judgemeConfig)
+    return (
+      <Section
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          ...block?.style?.root,
+          height: height,
+        }}
+      >
+        <Text>Loading...</Text>
+      </Section>
+    )
+  if (!product.data)
+    throw new Error(
+      `Expected product.data to be defined for productHandle ${productHandle} and status ${product.status}`
+    )
+
+  const contentWidth = width - 32
+  const onMessageReceive = (event: any) => {
+    const data = JSON.parse(event.nativeEvent.data)
+    if (data.action === 'navigate') {
+      if (data.path === 'add-review') {
+        if (isUserAuthenticated()) {
+          gotoPath(`${data.path}/${productHandle}`)
+        } else {
+          gotoPath(options?.signInPath ?? 'signin')
+        }
+        return
+      }
+      gotoPath(data.path)
+    }
+  }
+  return (
+    <ResilientAutoheightWebView
+      ref={webViewRef}
+      style={{
+        width: contentWidth,
+        marginBottom: 100,
+        opacity: 0.99,
+        ...block?.style?.root,
+      }}
+      startInLoadingState={true}
+      androidHardwareAccelerationDisabled={true}
+      renderLoading={() => (
+        <View
+          style={{
+            position: 'absolute',
+            alignItems: 'center',
+            justifyContent: 'center',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+          }}
+        >
+          <Loader colors={['#000', '#000', '#000', '#000']} />
+        </View>
+      )}
+      automaticallyAdjustContentInsets={true}
+      scrollEnabled={false}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
+      nestedScrollEnabled={false}
+      source={{
+        html: html,
+      }}
+      onMessage={onMessageReceive}
+      injectedJavaScript={
+        'window.appbrew={ "postMessage": function (data){ window.ReactNativeWebView.postMessage(JSON.stringify(data)); }}; true;'
+      }
+    />
+  )
+}

package/src/components/src/organisms/judgeme-reviews/utils.ts

@@ -0,0 +1,77 @@
+function getJudgemeProductId(id: string) {
+  if (!id.startsWith('gid')) return null
+  const judgemeId = id.replace(/[^0-9]/g, '')
+  return judgemeId
+}
+
+export type HtmlForWidgetParams = {
+  productId: string | undefined
+  domain: string | undefined
+  platform: string | undefined
+  token: string | undefined
+  stylesheet: string | undefined
+}
+
+export function createHtmlForWidget({
+  productId,
+  domain,
+  platform,
+  token,
+  stylesheet,
+}: HtmlForWidgetParams) {
+  if (!productId || !domain || !platform || !token) return
+  const id = getJudgemeProductId(productId)
+  if (!id) return null
+  return `
+    <html lang="en">
+      <head>
+          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximun-scale=1">
+          <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+          <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+          <script>jdgm = window.jdgm || {};jdgm.SHOP_DOMAIN = "${domain}";jdgm.PLATFORM = "${platform}";jdgm.PUBLIC_TOKEN = "${token}";</script>
+          <script data-cfasync='false' type='text/javascript' async src='https://cdn.judge.me/widget_preloader.js'></script>
+        <script data-cfasync='false' type='text/javascript' async src='https://cdn1.judge.me/assets/installed.js'></script>
+          <link rel="stylesheet" type="text/css" href="${stylesheet}"  />
+      </head>
+      <body>
+          <div class="jdgm-widget jdgm-review-widget jdgm-outside-widget" data-id="${id}"></div>
+          <script>
+            function addWriteReviewButton() {
+              setTimeout(() => {
+                try {
+                  const summaryNode = document.getElementsByClassName(
+                    'jdgm-rev-widg__summary'
+                  )
+                  const buttonsNode = document.getElementsByClassName(
+                    'jdgm-widget-actions-wrapper'
+                  )
+                  if (buttonsNode.length > 0) {
+                    buttonsNode[0].remove();
+                  }
+                  const reviewButtonNode = document.createElement('button')
+                  reviewButtonNode.className = 'write_a_review_button'
+                  reviewButtonNode.innerText = 'WRITE A REVIEW'
+                  reviewButtonNode.addEventListener('click', () => {
+                    window.appbrew.postMessage({
+                      action: 'navigate',
+                      path: 'add-review',
+                    })
+                  })
+                  summaryNode[0].before(reviewButtonNode)
+                  
+                } catch (err) {
+                  addWriteReviewButton()
+                }
+              }, 200)
+            }
+            addWriteReviewButton()   
+          </script>
+      </body>
+  </html>`
+}
+
+/**
+ * <script>jdgm = window.jdgm || {};jdgm.SHOP_DOMAIN = 'thebearhouseindia.myshopify.com';jdgm.PLATFORM = 'shopify';jdgm.PUBLIC_TOKEN = 'Mi8VHlcsumR7-57_gLsJ31GBkgs';</script>
+<script data-cfasync='false' type='text/javascript' async src='https://cdn.judge.me/widget_preloader.js'></script>
+<script data-cfasync='false' type='text/javascript' async src='https://cdn1.judge.me/assets/installed.js'></script>
+ */

package/src/components/src/organisms/last-order/index.tsx

@@ -0,0 +1,40 @@
+import { useBlock, useDeviceDimensions, useUser } from '@gauntlet/state'
+import { AsyncData, BaseBlockProps } from '@gauntlet/types'
+import { Order } from '@gauntlet/shopify-types'
+import React from 'react'
+import { Section } from '../../atoms/section'
+import { OrderItem } from '../../molecules/order-item'
+
+export function LastOrder({
+  componentId,
+  instanceId,
+  screenId,
+}: BaseBlockProps) {
+  const [state, setState] = React.useState<AsyncData<Order>>({
+    status: 'loading',
+  })
+  const block = useBlock(screenId, componentId, instanceId)
+  const { getLastOrder } = useUser()
+  React.useEffect(() => {
+    getLastOrder()
+      .then((res) => {
+        setState(res)
+      })
+      .catch(console.error)
+  }, [getLastOrder])
+
+  const { width: PAGE_WIDTH } = useDeviceDimensions()
+  if (state.status !== 'idle') {
+    return null
+  }
+  return (
+    <Section style={{ width: PAGE_WIDTH, ...block?.style?.root }}>
+      <OrderItem
+        items={state.data.lineItems}
+        id={state.data.number}
+        fulfillmentStatus={state.data.fulfillmentStatus}
+        amount={state.data.total}
+      />
+    </Section>
+  )
+}

package/src/components/src/organisms/metafield-image-compare-block/hook.tsx

@@ -0,0 +1,119 @@
+import { useShopifyQuery } from '@gauntlet/state'
+import { useEffect, useState } from 'react'
+
+interface Metafield {
+  namespace: string
+  key: string
+}
+
+interface MediaImage {
+  src: string
+  meta: {
+    width: number
+    height: number
+  }
+}
+export const useMetafieldImageCompareBlock = (
+  productHandle: string,
+  metafieds: {
+    before: Metafield
+    after: Metafield
+  }
+) => {
+  const [images, setImages] = useState<{
+    beforeImage: MediaImage
+    afterImage: MediaImage
+  } | null>(null)
+  const gqlQuery = getGQLQuery(productHandle, metafieds)
+  const metafieldData = useShopifyQuery(gqlQuery)
+  useEffect(() => {
+    if (metafieldData) {
+      const transformedData = transformData(metafieldData)
+      if (
+        transformedData &&
+        transformedData.beforeImage &&
+        transformedData.afterImage
+      ) {
+        setImages(transformedData)
+        return
+      }
+    }
+    setImages(null)
+  }, [metafieldData])
+  return images
+}
+
+/** Escape a value for safe use inside a GraphQL double-quoted string literal. */
+const escapeGQLString = (value: string) =>
+  value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+
+const getGQLQuery = (
+  productHandle: string,
+  metafieds: {
+    before: Metafield
+    after: Metafield
+  }
+) => {
+  if (!metafieds || !metafieds.before || !metafieds.after) return ''
+  const handle = escapeGQLString(productHandle)
+  const beforeNs = escapeGQLString(metafieds.before.namespace)
+  const beforeKey = escapeGQLString(metafieds.before.key)
+  const afterNs = escapeGQLString(metafieds.after.namespace)
+  const afterKey = escapeGQLString(metafieds.after.key)
+  return `query{
+            product(handle:"${handle}"){
+                beforeImage: metafield(namespace:"${beforeNs}", key:"${beforeKey}"){
+                    reference{
+                        ... on MediaImage{
+                            image{
+                                height
+                                width
+                                url
+                            }
+                        }
+                    }
+                }
+                afterImage: metafield(namespace:"${afterNs}", key:"${afterKey}"){
+                    reference{
+                        ... on MediaImage{
+                            image{
+                                height
+                                width
+                                url
+                            }
+                        }
+                    }
+                }
+            }
+        }`
+}
+
+interface MetafieldQueryResult {
+  product?: {
+    beforeImage?: { reference?: { image?: { url: string; width: number; height: number } } }
+    afterImage?: { reference?: { image?: { url: string; width: number; height: number } } }
+  }
+}
+
+const transformData = (data: MetafieldQueryResult) => {
+  if (!data?.product) return null
+  const beforeImage = data?.product?.beforeImage?.reference?.image
+  const afterImage = data?.product?.afterImage?.reference?.image
+  if (!beforeImage || !afterImage) return null
+  return {
+    beforeImage: {
+      src: beforeImage?.url,
+      meta: {
+        width: beforeImage?.width,
+        height: beforeImage?.height,
+      },
+    },
+    afterImage: {
+      src: afterImage?.url,
+      meta: {
+        width: afterImage?.width,
+        height: afterImage?.height,
+      },
+    },
+  }
+}

package/src/components/src/organisms/metafield-image-compare-block/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { useBlock, useDeviceDimensions } from '@gauntlet/state'
+import { useMetafieldImageCompareBlock } from './hook'
+import { ImageCompare } from '@gauntlet/components/molecules/image-compare'
+import { BlockSection } from '@gauntlet/components/atoms/block-section'
+import {
+  BaseBlockProps,
+  MetafieldImageCompareBlockConfig,
+} from '@gauntlet/types'
+import {
+  getContentWidth,
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+
+interface MetafieldImageCompareBlockProps extends BaseBlockProps {
+  productHandle: string
+}
+
+export const MetafieldImageCompareBlock = ({
+  componentId,
+  instanceId,
+  screenId,
+  productHandle,
+}: MetafieldImageCompareBlockProps) => {
+  const block = useBlock<MetafieldImageCompareBlockConfig>(
+    screenId,
+    componentId,
+    instanceId
+  )
+  const styles = useBlockStyle(block)
+  const settings = useBlockSettings(block)
+  const { width } = useDeviceDimensions()
+  const { source, options } = settings
+
+  const images = useMetafieldImageCompareBlock(
+    productHandle,
+    source?.metafields
+  )
+
+  if (!images?.beforeImage || !images?.afterImage) return null
+  return (
+    <BlockSection
+      style={styles?.root}
+      background={block.background}
+      block={block}
+    >
+      <ImageCompare
+        key={options?.direction}
+        beforeImage={images?.beforeImage}
+        afterImage={images?.afterImage}
+        source={source}
+        options={options}
+        width={getContentWidth(width, styles?.root)}
+        style={styles?.imageCompare}
+      />
+    </BlockSection>
+  )
+}

package/src/components/src/organisms/metafield-product-list/index.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react'
+import { BaseBlockProps } from '@gauntlet/types'
+import { View } from 'react-native'
+import { useBlock, useDeviceDimensions, useShopifyQuery } from '@gauntlet/state'
+import {
+  getContentWidth,
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { Text } from '@gauntlet/components/atoms/text'
+import { List } from '@gauntlet/components/organisms/product-list'
+import { normaliseLayout } from '@gauntlet/components/molecules/generic-product-card'
+
+interface MetafieldProductListBlockProps extends BaseBlockProps {
+  productHandle?: string
+}
+
+export function MetafieldProductListBlock({
+  productHandle,
+  screenId,
+  componentId,
+  instanceId,
+}: MetafieldProductListBlockProps) {
+  const block = useBlock(screenId, componentId, instanceId)
+  const styles = useBlockStyle(block)
+  const settings = useBlockSettings(block)
+  const { layout, options, source } = settings ?? {}
+  const showHeading = Boolean(source?.heading)
+  const PAGE_WIDTH = useDeviceDimensions().width
+  const contentWidth = getContentWidth(PAGE_WIDTH, styles?.root ?? {})
+
+  const normalisedLayout = useMemo(() => normaliseLayout(layout), [layout])
+
+  const namespace = source?.metafield?.namespace
+  const key = source?.metafield?.key
+
+  const query = useMemo(() => {
+    if (!productHandle || !namespace || !key) return null
+    return getMetafieldsQuery(productHandle, namespace, key)
+  }, [productHandle, namespace, key])
+
+  const data: unknown = useShopifyQuery(query)
+  const productHandles = useMemo(
+    () => transformMetafieldsData(data),
+    [data]
+  )
+
+  if (!productHandle) return null
+  if (!query) return null
+  if (
+    !Array.isArray(productHandles) ||
+    productHandles.length === 0
+  ) {
+    return null
+  }
+
+  if (!normalisedLayout) {
+    return null
+  }
+
+  return (
+    <View style={styles?.root}>
+      {showHeading && source?.heading && (
+        <View style={styles?.heading?.root}>
+          <Text style={styles?.heading?.text}>{source.heading}</Text>
+        </View>
+      )}
+      <List
+        products={productHandles}
+        productLayout={normalisedLayout}
+        productStyle={styles?.productV2 ?? { root: {} }}
+        productOptions={{ ...options, horizontal: options?.horizontal ?? true }}
+        productSource={source?.productV2}
+        listStyle={styles?.list ?? {}}
+        contentWidth={contentWidth}
+      />
+    </View>
+  )
+}
+
+function transformMetafieldsData(data: unknown): string[] | null {
+  if (!data || typeof data !== 'object') return null
+  const product = (data as { product?: { metafield?: { references?: { edges?: Array<{ node?: { handle?: string } }> } } } }).product
+  if (!product?.metafield?.references?.edges) return null
+  const edges = product.metafield.references.edges
+  if (!Array.isArray(edges) || edges.length === 0) return null
+  return edges
+    .map((edge) => edge?.node?.handle)
+    .filter((handle): handle is string => Boolean(handle))
+}
+
+function getMetafieldsQuery(
+  productHandle: string,
+  namespace: string,
+  key: string
+): string {
+  return `
+    query getMetafieldProductList {
+      product(handle: "${productHandle}") {
+        metafield(namespace: "${namespace}", key: "${key}") {
+          references(first: 20) {
+            edges {
+              node {
+                ... on Product {
+                  handle
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `
+}