@app-brew/judgeme 1.0.0

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@app-brew/judgeme",
+  "version": "1.0.0",
+  "files": [
+    "src/",
+    "tsconfig.paths.json"
+  ],
+  "peerDependencies": {
+    "@fastify/deepmerge": "^1.3.0",
+    "axios": "^1.8.3",
+    "react": "19.1.0",
+    "react-native": "0.81.0",
+    "react-native-config": "1.5.9",
+    "react-native-webview": "13.16.0",
+    "@app-brew/brewery": ">=1.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+import { JudgemeReviewsV2 } from './judgeme-reviews'
+import { JudgemeReviewScreen } from './judgeme-screen'
+
+export * from './judgeme-review-provider'
+export * from './judgeme-star-ratings'
+export * from './ratings-count'
+
+export function registerJudgemeBlocks(r: Map<string, any>) {
+  r.set('judgeme-reviews-v2', JudgemeReviewsV2)
+}
+
+export function registerJudgemeScreen(r: Map<string, any>) {
+  r.set('product-reviews', JudgemeReviewScreen)
+}

package/src/judgeme-review-provider.ts

@@ -0,0 +1,42 @@
+import axios from 'axios'
+import EnvConfig from 'react-native-config'
+import { ReviewDetails, ReviewProvider } from '@gauntlet/types'
+
+export class JudgemeReviewProvider implements ReviewProvider {
+  static instance: JudgemeReviewProvider
+  static getInstance() {
+    if (!JudgemeReviewProvider.instance) {
+      JudgemeReviewProvider.instance = new JudgemeReviewProvider()
+    }
+    return JudgemeReviewProvider.instance
+  }
+  async submitReview(
+    reviewDetails: ReviewDetails,
+    customerDetails: {
+      customerId: string
+      customerAccessToken: string
+      email: string
+      displayName: string
+    }
+  ) {
+    const appId = EnvConfig.APP_ID
+    await axios.post(
+      `${EnvConfig['APP_SERVICE_URL']}/integrations/judgeme/reviews`,
+      reviewDetails,
+      {
+        headers: {
+          'X-App-Id': appId,
+          'X-Customer-Access-Token': customerDetails.customerAccessToken,
+          'X-Customer-Id': customerDetails.customerId,
+        },
+      }
+    )
+    return
+  }
+  async getReviewsSummary(productId: string) {
+    return {}
+  }
+  async getReviews(productId: string, page: number) {
+    return {}
+  }
+}

package/src/judgeme-reviews.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react'
+import {
+  ScreenContext,
+  useAppStore,
+  useBlock,
+  useDeviceDimensions,
+  useProductByHandle,
+  useUser,
+} from '@gauntlet/state'
+import {
+  BaseBlockProps,
+  JudgemeReviewsConfig,
+  ProductId,
+} from '@gauntlet/types'
+import { Section } from '@gauntlet/components/atoms/section'
+import { Text } from '@gauntlet/components/atoms/text'
+import { View } from 'react-native'
+import { Loader } from '@gauntlet/components/organisms/payment-web-view'
+
+import { useBlockSettings } from '@gauntlet/components/style-utils'
+import { WebView } from 'react-native-webview'
+import { useLink } from '@gauntlet/state'
+
+export type JudgemeReviewsProps = BaseBlockProps & {
+  productHandle: string
+}
+export function JudgemeReviewsV2({
+  screenId,
+  componentId,
+  instanceId,
+  productHandle,
+}: JudgemeReviewsProps) {
+  const { gotoLink } = useLink()
+  const webViewRef = React.useRef<any>(null)
+  const { width, height } = useDeviceDimensions()
+  const screenContext = React.useContext(ScreenContext)
+  const contentHeight = screenContext?.value?.contentHeight ?? 710
+
+  const block = useBlock<JudgemeReviewsConfig>(
+    screenId,
+    componentId,
+    instanceId
+  )
+  const settings = useBlockSettings(block)
+
+  const product = useProductByHandle(productHandle)
+  const judgemeConfig = useAppStore.getState().config.data?.integrations.judgeme
+  const options = settings?.options
+
+  const { isUserAuthenticated } = useUser()
+
+  if (product.status !== 'idle' || !judgemeConfig)
+    return (
+      <Section
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          ...block?.style?.root,
+          height: height,
+        }}
+      >
+        <Text>Loading...</Text>
+      </Section>
+    )
+  if (!product.data)
+    console.log(
+      `Expected product.data to be defined for productHandle ${productHandle} and status ${product.status}`
+    )
+
+  const onMessageReceive = (event: any) => {
+    const data = JSON.parse(event.nativeEvent.data)
+    if (data.action === 'navigate') {
+      if (data.path === 'add-review') {
+        if (isUserAuthenticated()) {
+          gotoLink({
+            kind: 'screen',
+            value: `${data.path}/${productHandle}`,
+          })
+        } else {
+          gotoLink({
+            kind: 'screen',
+            value: options?.signInPath ?? 'signin',
+          })
+        }
+        return
+      }
+
+      gotoLink({
+        kind: 'screen',
+        value: data.path,
+      })
+    }
+  }
+
+  if (!judgemeConfig) return null
+
+  const uri = `https://appbrew.pages.dev/judgeme-reviews?productId=${getJudgemeProductId(
+    product.data.id
+  )}&domain=${judgemeConfig.storeDomain}&token=${
+    judgemeConfig.publicToken
+  }&platform=${judgemeConfig.platform ?? 'shopify'}&stylesheet=${
+    judgemeConfig.stylesheet
+  }`
+
+  return (
+    <WebView
+      ref={webViewRef}
+      style={{
+        height: contentHeight,
+        width: width,
+        ...block?.style?.root,
+      }}
+      androidLayerType="hardware"
+      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={true}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
+      nestedScrollEnabled={true}
+      source={{
+        uri,
+      }}
+      onMessage={onMessageReceive}
+    />
+  )
+}
+
+function getJudgemeProductId(id: ProductId) {
+  if (!id.startsWith('gid')) return null
+  const judgemeId = id.replace(/[^0-9]/g, '')
+  return judgemeId
+}

package/src/judgeme-screen.tsx

@@ -0,0 +1,267 @@
+import { CustomScreenProps } from '@gauntlet/types'
+import { SafeAreaContainer } from '@gauntlet/components/atoms/safe-area-container'
+import * as React from 'react'
+import {
+  ScreenContext,
+  useAppStore,
+  useDeviceDimensions,
+  useProductByHandle,
+  useUser,
+} from '@gauntlet/state'
+import { ActivityIndicator, View } from 'react-native'
+
+import { WebView } from 'react-native-webview'
+import { useLink } from '@gauntlet/state'
+import { EnhancedProduct, IdleData, ProductId } from '@gauntlet/types'
+import { appbarVariants } from '@gauntlet/components/molecules/appbar-v2'
+import deepmerge from '@fastify/deepmerge'
+import { AppbarTemplate } from '@gauntlet/components/molecules/appbar-template'
+import { Text } from '@gauntlet/components/index'
+
+const BASE_URL = 'https://appbrew.pages.dev'
+
+export function JudgemeReviewScreen({
+  id,
+  options: screenOptions,
+}: CustomScreenProps) {
+  const { productHandle } = screenOptions
+  const { gotoLink } = useLink()
+  const webViewRef = React.useRef<any>(null)
+  const { width } = useDeviceDimensions()
+  const screenContext = React.useContext(ScreenContext)
+  const contentHeight = screenContext?.value?.contentHeight ?? 710
+
+  const product = useProductByHandle(productHandle ?? '')
+  const judgemeConfig = useAppStore.getState().config.data?.integrations.judgeme
+  const reviewsScreen =
+    useAppStore.getState().config?.data?.screens?.['product-reviews']
+  const judgemeMetafieldExists = Boolean(
+    useAppStore.getState().metafield.data.product?.[productHandle]?.judgeme
+      ?.badge
+  )
+  const settings = reviewsScreen?.settings ?? {
+    source: {},
+    options: {},
+  }
+
+  const cssVariables = React.useMemo(() => {
+    if (!judgemeConfig) return {}
+    const defaultPrimaryColor =
+      useAppStore.getState().config.data?.theme?.base?.colors?.brandprimary ??
+      '#000000'
+
+    const defaultTextOnPrimaryColor =
+      useAppStore.getState().config.data?.theme?.base?.colors
+        ?.textprimaryinverse ?? '#ffffff'
+
+    /**
+     * primary color: will change the background color of the button and the verified badge
+     * text-dark: title and content of the reviews
+     * star-color: color of the stars
+     * bg-very-light: background color of the reviews
+     * text-on-primary: text color on the primary color (button and verified badge)
+     * button-border-radius: border radius of the button
+     * font-family: font family of the text
+     *
+     */
+    const cssVariablesMap: Record<string, string | number> = {
+      primaryColor: judgemeConfig.primaryColor || defaultPrimaryColor,
+      starColor: judgemeConfig.starColor || '#ffa41c',
+      textDark: judgemeConfig.textDark || '#1a1b18',
+      reviewsBackgroundColor: judgemeConfig.bgVeryLight || '#f9f9f9',
+      textOnPrimary: judgemeConfig.textOnPrimary || defaultTextOnPrimaryColor,
+      buttonBorderRadius: judgemeConfig.buttonBorderRadius ?? 999,
+      fontFamily: judgemeConfig.fontFamily || 'Roboto',
+    }
+
+    for (const key in cssVariablesMap) {
+      const value = String(cssVariablesMap[key])
+      if (value.startsWith('#')) {
+        cssVariablesMap[key] = value.replace('#', '')
+      } else {
+        cssVariablesMap[key] = value
+      }
+    }
+
+    return cssVariablesMap
+  }, [judgemeConfig])
+
+  const style = reviewsScreen?.style ?? {}
+  const variant = settings?.options?.appbar?.variant ?? 'minimal'
+  const appbarVariant = appbarVariants[variant]
+
+  const { isUserAuthenticated } = useUser()
+  const mergedStyle = deepmerge({ all: true })(
+    appbarVariant?.style,
+    style?.appbar ?? {}
+  )
+  const finalSettings = settings?.['appbar'] ?? appbarVariant?.settings
+
+  if (!judgemeMetafieldExists) {
+    return (
+      <SafeAreaContainer>
+        <AppbarTemplate
+          options={finalSettings?.options}
+          style={mergedStyle}
+          source={finalSettings?.source}
+          variant={variant}
+        />
+        <View style={style.error?.root}>
+          <Text style={style.error?.text}>
+            {settings?.options?.errorMessage ?? 'No reviews to display'}
+          </Text>
+        </View>
+      </SafeAreaContainer>
+    )
+  }
+
+  if (product.status !== 'idle' || !judgemeConfig)
+    return (
+      <SafeAreaContainer>
+        <AppbarTemplate
+          options={finalSettings?.options}
+          style={mergedStyle}
+          source={finalSettings?.source}
+          variant={variant}
+        />
+        <ActivityIndicator
+          size={'large'}
+          color={'#000'}
+          style={{
+            position: 'absolute',
+            alignItems: 'center',
+            justifyContent: 'center',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            ...mergedStyle?.loader,
+          }}
+        />
+      </SafeAreaContainer>
+    )
+  if (!product.data)
+    console.log(
+      `Expected product.data to be defined for productHandle ${productHandle} and status ${product.status}`
+    )
+
+  const onMessageReceive = (event: any) => {
+    const data = JSON.parse(event.nativeEvent.data)
+    if (data.action === 'navigate') {
+      if (data.path === 'add-review') {
+        if (isUserAuthenticated()) {
+          gotoLink({
+            kind: 'screen',
+            value: `${data.path}`,
+            params: { productHandle },
+          })
+        } else {
+          gotoLink({
+            kind: 'screen',
+            value: settings?.options?.signInPath ?? 'signin',
+          })
+        }
+        return
+      }
+
+      gotoLink({
+        kind: 'screen',
+        value: data.path,
+      })
+    }
+  }
+
+  if (!judgemeConfig) return null
+
+  const uri = gerUri(product, judgemeConfig, cssVariables)
+
+  return (
+    <SafeAreaContainer style={style?.screen}>
+      <AppbarTemplate
+        options={finalSettings?.options}
+        style={mergedStyle}
+        source={finalSettings?.source}
+        variant={variant}
+      />
+      <WebView
+        ref={webViewRef}
+        style={{
+          height: contentHeight,
+          width: width,
+          ...mergedStyle?.webview,
+        }}
+        androidLayerType="hardware"
+        startInLoadingState={true}
+        androidHardwareAccelerationDisabled={true}
+        renderLoading={() => (
+          <View
+            style={{
+              position: 'absolute',
+              alignItems: 'center',
+              justifyContent: 'center',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+            }}
+          >
+            <ActivityIndicator
+              size={'large'}
+              color={'#000'}
+              style={{
+                position: 'absolute',
+                alignItems: 'center',
+                justifyContent: 'center',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                ...style?.loader,
+              }}
+            />
+          </View>
+        )}
+        automaticallyAdjustContentInsets={true}
+        scrollEnabled={true}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        nestedScrollEnabled={true}
+        source={{
+          uri,
+        }}
+        onMessage={onMessageReceive}
+      />
+    </SafeAreaContainer>
+  )
+}
+
+function getJudgemeProductId(id: ProductId) {
+  if (!id.startsWith('gid')) return null
+  const judgemeId = id.replace(/[^0-9]/g, '')
+  return judgemeId
+}
+
+function gerUri(
+  product: IdleData<EnhancedProduct>,
+  judgemeConfig: {
+    storeDomain: string
+    platform: string
+    publicToken: string
+    stylesheet?: string | undefined
+    customHtmlPageUrl?: string | undefined
+  },
+  cssVariables: Record<string, string | number>
+) {
+  const defaultJudgemeUrl = `${BASE_URL}/judgeme-reviews/index.html`
+  const storeDomain = useAppStore.getState().config.data?.store?.shopifyDomain
+  const platform = judgemeConfig.platform ?? 'shopify'
+
+  const uri = judgemeConfig?.customHtmlPageUrl ?? defaultJudgemeUrl
+  return `${uri}?productId=${getJudgemeProductId(
+    product.data.id
+  )}&domain=${storeDomain}&token=${judgemeConfig.publicToken
+    }&platform=${platform}&primaryColor=${cssVariables.primaryColor}&textDark=${cssVariables.textDark
+    }&starColor=${cssVariables.starColor}&reviewsBackgroundColor=${cssVariables.reviewsBackgroundColor
+    }&textOnPrimary=${cssVariables.textOnPrimary}&buttonBorderRadius=${cssVariables.buttonBorderRadius
+    }&fontFamily=${cssVariables.fontFamily}`
+}

package/src/judgeme-star-ratings.tsx

@@ -0,0 +1,74 @@
+import { BaseIconStyle, BaseStyle, BaseTextStyle } from '@gauntlet/types'
+import * as React from 'react'
+import { ProductComponentsProps } from '@gauntlet/components/molecules/product-components'
+import { View } from 'react-native'
+import StarRating from '@gauntlet/components/atoms/stars'
+import { useAppStore } from '@gauntlet/state'
+
+interface JudgemeStarRatingsStyle {
+  root: BaseStyle
+  text: BaseTextStyle
+  star: BaseIconStyle
+  container?: BaseStyle
+}
+interface JudgemeStarRatingsOptions {}
+
+interface JudgemeStarRatingsProps extends ProductComponentsProps {
+  style: JudgemeStarRatingsStyle
+  options: JudgemeStarRatingsOptions
+}
+
+export function JudgemeStarRatings({
+  productData,
+  style,
+  options,
+}: JudgemeStarRatingsProps) {
+  const judgemeBadge = useAppStore(
+    (s) => s.metafield.data.product[productData.handle]?.judgeme?.badge
+  )
+  const badgeValue = judgemeBadge?.value
+  if (!judgemeBadge) return null
+  if (!badgeValue) return null
+  const { averageRating, numberOfReviews } = parseRatingsAndReviews(badgeValue)
+  if (!averageRating || !numberOfReviews) return null
+
+  return (
+    <View style={style.root}>
+      {!!(averageRating && Number(averageRating)) && (
+        <StarRating
+          ratings={averageRating}
+          views={numberOfReviews}
+          style={{
+            root: style.root,
+            ratingCount: style.text,
+            icon: style.star,
+            container: style?.container,
+          }}
+          handle={productData?.handle}
+          options={options}
+        />
+      )}
+    </View>
+  )
+}
+
+// const htmlString = `<div style='display:none' class='jdgm-prev-badge' data-average-rating='4.64' data-number-of-reviews='208' data-number-of-questions='0'> <span class='jdgm-prev-badge__stars' data-score='4.64' tabindex='0' aria-label='4.64 stars' role='button'> <span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--half'></span> </span> <span class='jdgm-prev-badge__text'> 208 reviews </span> </div>`
+export function parseRatingsAndReviews(htmlString: string): {
+  averageRating: number | null
+  numberOfReviews: number | null
+} {
+  const averageRatingRegex = /data-average-rating=['"]([\d.]+)['"]/
+  const numberOfReviewsRegex = /data-number-of-reviews=['"](\d+)['"]/
+
+  const averageRatingMatch = htmlString.match(averageRatingRegex)
+  const numberOfReviewsMatch = htmlString.match(numberOfReviewsRegex)
+
+  const averageRating = averageRatingMatch
+    ? parseFloat(averageRatingMatch[1])
+    : null
+  const numberOfReviews = numberOfReviewsMatch
+    ? parseInt(numberOfReviewsMatch[1], 10)
+    : null
+
+  return { averageRating, numberOfReviews }
+}

package/src/ratings-count.tsx

@@ -0,0 +1,46 @@
+import { BaseIconStyle, BaseStyle, BaseTextStyle } from '@gauntlet/types'
+import * as React from 'react'
+import { ProductComponentsProps } from '@gauntlet/components/molecules/product-components'
+import { View } from 'react-native'
+import { useAppStore } from '@gauntlet/state'
+import { parseRatingsAndReviews } from './judgeme-star-ratings'
+import { Text } from '@gauntlet/components/atoms/text'
+
+interface RatingsCountStyle {
+    root: BaseStyle
+    text: BaseTextStyle
+    star: BaseIconStyle
+    container?: BaseStyle
+}
+interface RatingsCountOptions {
+    template?: string
+}
+
+interface RatingsCountProps extends ProductComponentsProps {
+    style: RatingsCountStyle
+    options: RatingsCountOptions
+}
+
+export function RatingsCount({
+    productData,
+    style,
+    options,
+}: RatingsCountProps) {
+    const judgemeBadge = useAppStore(
+        (s) => s.metafield.data.product[productData.handle]?.judgeme?.badge
+    )
+    const badgeValue = judgemeBadge?.value
+    if (!judgemeBadge) return null
+    if (!badgeValue) return null
+    const { numberOfReviews } = parseRatingsAndReviews(badgeValue)
+    if (!numberOfReviews) return null
+    if (Number(numberOfReviews) === 0) return null
+    const template = options.template ?? '{{count}}'
+    const displayText = template.replace('{{count}}', String(numberOfReviews))
+    return (
+        <View style={style.root}>
+            <Text style={style.text}>{displayText}</Text>
+        </View>
+    )
+}
+

package/tsconfig.paths.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@gauntlet/integrations/judgeme": [
+        "./src/index.ts"
+      ]
+    }
+  }
+}