Create base points tile

white-label-loyalty · Sep 6, 2024 · abd1e7b · abd1e7b
1 parent 0b33513
commit abd1e7b
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 27 deletions.
diff --git a/lib/assets/points.png b/lib/assets/points.png
diff --git a/lib/assets/pointsFull.png b/lib/assets/pointsFull.png
diff --git a/lib/components/atoms/Text/index.tsx b/lib/components/atoms/Text/index.tsx
@@ -38,6 +38,7 @@ export const Text: React.FC<TextProps> = ({
       case 'eyebrow':
         return createResponsiveStyle({
           ...baseStyle,
+          fontSize: [12, 12, 14],
         });
       case 'title':
         return createResponsiveStyle({
@@ -57,6 +58,9 @@ export const Text: React.FC<TextProps> = ({
       case 'caption':
         return createResponsiveStyle({
           ...baseStyle,
+          fontWeight: 'bold',
+          fontSize: [18, 18, 24],
+          color: theme.primary,
         });
       case 'label':
         return createResponsiveStyle({

diff --git a/lib/components/organisms/PointsTile/PointsTile.stories.tsx b/lib/components/organisms/PointsTile/PointsTile.stories.tsx
@@ -1,5 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
+import pointsImage from '../../../assets/points.png';
+import pointsFull from '../../../assets/pointsFull.png';
 import { TileHeight, TileType } from '../../../types/tile';
 import { TileWrapper } from '../../../utils/storybookHelpers';
 import PointsTile from './index';
@@ -15,16 +17,37 @@ const Template: StoryFn<typeof PointsTile> = (args) => (
   </TileWrapper>
 );
 
-export const Default = Template.bind({});
-Default.args = {
+export const HalfTile = Template.bind({});
+HalfTile.args = {
   tile: {
     tileHeight: TileHeight.Half,
     active: true,
     type: TileType.Points,
     tenantId: 'tenant1',
     configuration: {
       title: 'Points',
-      imageUrl: 'https://picsum.photos/200/200',
+      imageUrl: pointsImage,
+      multiplier: undefined,
+      points: 100,
+      prefix: undefined,
+      suffix: undefined,
+    },
+    id: '405a6844-f472-4d9e-84b9-20fb55dbd399',
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    visibilityCriteria: 'all',
+  },
+};
+export const FullTile = Template.bind({});
+FullTile.args = {
+  tile: {
+    tileHeight: TileHeight.Full,
+    active: true,
+    type: TileType.Points,
+    tenantId: 'tenant1',
+    configuration: {
+      title: 'Points',
+      imageUrl: pointsFull,
       multiplier: undefined,
       points: 100,
       prefix: undefined,

diff --git a/lib/components/organisms/PointsTile/index.tsx b/lib/components/organisms/PointsTile/index.tsx
@@ -1,7 +1,8 @@
+import Color from 'color';
 import React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { useTheme } from '../../../context/ThemeContext';
-import { PointsTileConfig, Tile } from '../../../types/tile';
+import { PointsTileConfig, Tile, TileHeight } from '../../../types/tile';
 import { BaseTile, Text } from '../../atoms';
 import { useTileContext } from '../../atoms/BaseTile';
 import { useSectionContext } from '../Section';
@@ -16,31 +17,32 @@ const PointsTile: React.FC<PointsTileProps> & {
   Image: typeof PointsTileImage;
 } = ({ tile }) => {
   const { theme } = useTheme();
+  const isFullSize = tile.tileHeight === TileHeight.Full;
 
   const styles = StyleSheet.create({
     container: {
       padding: theme.sizes.md,
-      maxWidth: 270,
       borderRadius: theme.sizes.borderRadiusSm,
       width: '100%',
-      flexDirection: 'row',
-      alignItems: 'center',
+      flexDirection: isFullSize ? 'row' : 'row-reverse',
+      alignItems: isFullSize ? 'flex-start' : 'center',
       justifyContent: 'space-between',
-      aspectRatio: 2,
     },
     contentContainer: {
       flexDirection: 'column',
+      width: isFullSize ? '100%' : 'auto',
     },
   });
 
   return (
     <BaseTile tile={tile}>
+      {isFullSize && <PointsTileImage isFullSize={isFullSize} />}
       <View style={styles.container}>
+        {!isFullSize && <PointsTileImage isFullSize={isFullSize} />}
         <View style={styles.contentContainer}>
           <PointsTileTitle />
           <PointsTilePoints />
         </View>
-        <PointsTileImage />
       </View>
     </BaseTile>
   );
@@ -51,14 +53,7 @@ const PointsTileTitle: React.FC = () => {
   const { configuration } = useTileContext();
   const { title } = configuration as PointsTileConfig;
 
-  const styles = StyleSheet.create({
-    title: {
-      marginBottom: 4,
-      color: theme.text,
-    },
-  });
-
-  return <Text style={styles.title}>{title}</Text>;
+  return <Text variant="eyebrow">{title}</Text>;
 };
 
 const PointsTilePoints: React.FC = () => {
@@ -80,37 +75,62 @@ const PointsTilePoints: React.FC = () => {
     points !== undefined ? points * effectiveMultiplier : null;
 
   const styles = StyleSheet.create({
-    points: {
-      fontSize: 24,
-      fontWeight: 'bold',
+    suffix: {
+      fontSize: 16,
       color: theme.primary,
     },
+    pointsWithSuffix: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
   });
 
   if (calculatedPoints === null) return null;
   return (
-    <Text style={styles.points}>
+    <Text variant="caption">
       {effectivePrefix}
-      {calculatedPoints}
-      {effectiveSuffix}
+      <View style={styles.pointsWithSuffix}>
+        {calculatedPoints}
+        <Text style={styles.suffix}>{effectiveSuffix}</Text>
+      </View>
     </Text>
   );
 };
 
-const PointsTileImage: React.FC = () => {
+type PointTileImageProps = {
+  isFullSize: boolean;
+};
+
+const PointsTileImage: React.FC<PointTileImageProps> = ({ isFullSize }) => {
   const { theme } = useTheme();
   const { configuration } = useTileContext();
   const { imageUrl } = configuration as PointsTileConfig;
 
   const styles = StyleSheet.create({
+    imageContainer: {
+      width: isFullSize ? '100%' : 57,
+      height: isFullSize ? '50%' : 57,
+      backgroundColor: isFullSize
+        ? Color(theme.primary).alpha(0.2).string()
+        : theme.surface,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
     image: {
-      width: theme.sizes.lg * 3,
-      height: theme.sizes.lg * 3,
+      width: '80%',
+      height: '80%',
+      resizeMode: 'contain',
     },
   });
 
   if (!imageUrl) return null;
-  return <Image source={{ uri: imageUrl }} style={styles.image} />;
+
+  return (
+    <View style={styles.imageContainer}>
+      <Image source={{ uri: imageUrl }} style={styles.image} />
+    </View>
+  );
 };
 
 PointsTile.Title = PointsTileTitle;