Example - Goal progress bar (mockData.json)

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

function clamp(value, min, max) {
  return Math.max(min, Math.min(max, value));
}

export default function GoalProgressExample({ blockConfig, useVariables }) {
  const variables = useVariables();

  const goalAmount = Number(blockConfig?.goalAmount ?? 50);

  const subtotal = Number(variables?.cart?.subtotalAmount ?? 0);
  const remaining = clamp(goalAmount - subtotal, 0, goalAmount);
  const progress = goalAmount === 0 ? 0 : clamp((subtotal / goalAmount) * 100, 0, 100);

  return (
    <div style={{ padding: '16px' }}>
      {remaining > 0 ? (
        <Text type="body">Add ${remaining.toFixed(2)} to reach your goal.</Text>
      ) : (
        <Text type="body">You’ve reached the goal.</Text>
      )}

      <div
        style={{
          marginTop: '12px',
          width: '100%',
          height: '10px',
          backgroundColor: '#eee',
          borderRadius: '999px',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            width: `${progress}%`,
            height: '100%',
            backgroundColor: '#111',
          }}
        />
      </div>

      <Text type="body" style={{ marginTop: '8px' }}>
        Subtotal: ${subtotal.toFixed(2)} / ${goalAmount.toFixed(2)}
      </Text>
    </div>
  );
}

[
  {
    "id": "goalAmount",
    "label": "Goal amount",
    "type": "range",
    "defaultValue": 50,
    "min": 0,
    "max": 500,
    "unit": "",
    "step": 1
  }
]

{
  "cart": {
    "subtotalAmount": 22.5
  }
}