Example - Banner with CTA destination

import * as React from 'react';
import { Image, Text, getDestinationHandler } from '@tapcart/mobile-components';

export default function BannerCtaExample({ blockConfig, useActions, useTapcart }) {
  const Tapcart = useTapcart();
  const { openScreen, openProduct, openCollection } = useActions();
  const { destination, asset } = blockConfig;

  const openDestination = getDestinationHandler(destination?.type);

  const handleClick = (e) => {
    e.stopPropagation();
    if (!destination || destination.type === 'none') return;

    Tapcart.action('trigger/haptic');
    openDestination(destination.location, {
      openScreen,
      openProduct,
      openCollection,
    });
  };

  return (
    <div role="button" tabIndex={0} onClick={handleClick} style={{ cursor: 'pointer' }}>
      {asset?.url ? (
        <Image data={asset} alt="Banner" />
      ) : (
        <div style={{ padding: '16px' }}>
          <Text type="body">Add a banner asset in the right rail.</Text>
        </div>
      )}
    </div>
  );
}

[
  {
    "id": "asset",
    "label": "Banner asset",
    "type": "asset-upload",
    "description": "Upload an image",
    "supportedFileTypes": ["image"],
    "defaultValue": {
      "url": "https://storage.googleapis.com/cdn.tapcart.com/placeholders/placeholder-1.jpg",
      "naturalAspectRatio": "1:1"
    }
  },
  {
    "id": "destination",
    "label": "Destination",
    "type": "destination",
    "defaultValue": { "type": "none", "location": null }
  }
]