Product metafields

Starter code to load product metafields from shopify and display

import React from 'react';
import { Text, Flexbox, Image } from "@evlop/native-components";
import { useMetafields } from "@evlop/shopify";
import QRCode from 'react-qr-code';
import RenderHTML from 'react-native-render-html';

const AppBlock: NativeAppBlock = function ({ data, product }) {

  const productMetafields = useMetafields({
    resourceType: "product",
    resourceId: String(product?.id),
    metafieldIdentifiers: data.metafieldIdentifiers,
  });

  const renderedMetafields = data.metafieldIdentifiers?.map(({ namespace: _namespace, key, label, id, displayAs }) => {
    let displayValue: any = productMetafields?.[_namespace]?.[key];

    if(data.hideEmptyValue && !displayValue) return;

    const valueStr = typeof displayValue === 'object' ? JSON.stringify(displayValue) : `${displayValue ?? ''}`;

    const renderByDisplayAs = () => {
      switch (displayAs) {
        case 'image':
          return <Image src={displayValue ?? ''} width={100} height={100} />;
        case 'qr':
          return <QRCode value={valueStr} size={128} />;
        case 'html':
          return <RenderHTML source={{html: valueStr}} />;
        case 'text':
        default:
          return <Text color="gray-800">{`${displayValue ?? "N/A"}`}</Text>;
      }
    };

    return (
      <Flexbox key={id} flexDirection="column" gap="5xs">
        <Text fontWeight="Bold">{label}</Text>
        {renderByDisplayAs()}
      </Flexbox>
    );
  }).filter(Boolean);

  if(!renderedMetafields?.length) return null;

  return (
    <Flexbox flexDirection="column" gap="2xs" px="md" py="2xs">
      {!!data.title && <Text fontWeight="Bold" fontSize="2xl">{data.title}</Text>}
      {renderedMetafields}
    </Flexbox>
  );
};

export default AppBlock;