Begin work on TierTile

white-label-loyalty · Sep 23, 2024 · 36b6d22 · 36b6d22
1 parent 2da6060
commit 36b6d22
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 39 deletions.
diff --git a/lib/components/organisms/TierTile/TierTile.stories.tsx b/lib/components/organisms/TierTile/TierTile.stories.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
 import TierTile from '.';
 import { TierTileType, TileHeight, TileType } from '../../../types/tile';
 import { TileWrapper } from '../../../utils/storybookHelpers';
-
-// Placeholder imports for images
-const goldImage = '../../../assets/gold.png';
-const silverImage = '../../../assets/silver.png';
+// @ts-ignore
+import goldImage from '../../../assets/gold.png';
+// @ts-ignore
+import silverImage from '../../../assets/silver.png';
 
 export default {
   title: 'components/organisms/TierTile',
@@ -22,7 +22,7 @@ const Template: StoryFn<typeof TierTile> = (args) => (
   </TileWrapper>
 );
 
-const CurrentTierHalf = Template.bind({});
+export const CurrentTierHalf = Template.bind({});
 CurrentTierHalf.args = {
   tile: {
     id: '1',
@@ -49,15 +49,16 @@ CurrentTierHalf.args = {
     },
   },
 };
-const CurrentTierFull = Template.bind({});
+
+export const CurrentTierFull = Template.bind({});
 CurrentTierFull.args = {
   tile: {
     id: '1',
     type: TileType.Tier,
     createdAt: '',
     updatedAt: '',
     active: true,
-    tileHeight: TileHeight.Half,
+    tileHeight: TileHeight.Full,
     configuration: {
       type: TierTileType.currentTier,
       progressType: 'POINTS',
@@ -78,8 +79,46 @@ CurrentTierFull.args = {
   },
 };
 
-const CurrentTargetNextTier = Template.bind({});
-CurrentTargetNextTier.args = {
+export const CurrentTargetNextTierHalf = Template.bind({});
+CurrentTargetNextTierHalf.args = {
+  tile: {
+    id: '2',
+    type: TileType.Tier,
+    createdAt: '',
+    updatedAt: '',
+    active: true,
+    tileHeight: TileHeight.Half,
+    configuration: {
+      type: TierTileType.currentTargetNext,
+      progressType: 'POINTS',
+      pointsMultiplier: 1,
+      pointsPrefix: '$',
+      pointsSuffix: ' spent',
+      tier: {
+        id: '83642bc2-78cb-4d7e-ade3-e0f28f09e90f',
+        name: 'Silver',
+        artworkUrl: silverImage,
+        pointsRequirement: 500,
+        earnedPoints: 300,
+        attained: true,
+        priority: 0,
+      },
+      targetTier: {
+        id: '93642bc2-78cb-4d7e-ade3-e0f28f09e90g',
+        name: 'Gold',
+        artworkUrl: goldImage,
+        pointsRequirement: 1000,
+        earnedPoints: 300,
+        attained: false,
+        priority: 1,
+      },
+      targetTierAttainingPeriod: new Date('2024-12-31'),
+    },
+  },
+};
+
+export const CurrentTargetNextTierFull = Template.bind({});
+CurrentTargetNextTierFull.args = {
   tile: {
     id: '2',
     type: TileType.Tier,
@@ -116,8 +155,8 @@ CurrentTargetNextTier.args = {
   },
 };
 
-const CurrentTargetSpecificTier = Template.bind({});
-CurrentTargetSpecificTier.args = {
+export const CurrentTargetSpecificTierHalf = Template.bind({});
+CurrentTargetSpecificTierHalf.args = {
   tile: {
     id: '3',
     type: TileType.Tier,
@@ -142,7 +181,44 @@ CurrentTargetSpecificTier.args = {
       },
       targetTier: {
         id: '93642bc2-78cb-4d7e-ade3-e0f28f09e90g',
-        name: 'Silver',
+        name: 'Platinum',
+        artworkUrl: silverImage,
+        pointsRequirement: 5000,
+        earnedPoints: 50,
+        attained: false,
+        priority: 0,
+      },
+      targetTierAttainingPeriod: new Date('2024-12-31'),
+    },
+  },
+};
+export const CurrentTargetSpecificTierFull = Template.bind({});
+CurrentTargetSpecificTierFull.args = {
+  tile: {
+    id: '3',
+    type: TileType.Tier,
+    createdAt: '',
+    updatedAt: '',
+    tileHeight: TileHeight.Full,
+    active: true,
+    configuration: {
+      type: TierTileType.currentTargetSpecific,
+      progressType: 'POINTS',
+      pointsMultiplier: 1,
+      pointsPrefix: '',
+      pointsSuffix: ' points',
+      tier: {
+        id: '83642bc2-78cb-4d7e-ade3-e0f28f09e90f',
+        name: 'Bronze',
+        artworkUrl: goldImage,
+        pointsRequirement: 100,
+        earnedPoints: 50,
+        attained: true,
+        priority: 0,
+      },
+      targetTier: {
+        id: '93642bc2-78cb-4d7e-ade3-e0f28f09e90g',
+        name: 'Platinum',
         artworkUrl: silverImage,
         pointsRequirement: 5000,
         earnedPoints: 50,

diff --git a/lib/components/organisms/TierTile/index.tsx b/lib/components/organisms/TierTile/index.tsx
@@ -1,11 +1,13 @@
-// @ts-nocheck
-// TODO: Fix this file
-
 import React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
 import { useWllSdk } from '../../../context/WllSdkContext';
-import { TierTileConfig, Tile, TileHeight } from '../../../types/tile';
+import {
+  TierTileConfig,
+  TierTileType,
+  Tile,
+  TileHeight,
+} from '../../../types/tile';
 import { createResponsiveStyle } from '../../../utils/responsiveHelper';
 import { BaseTile, ProgressBar, Text } from '../../atoms';
 import { useTileContext } from '../../atoms/BaseTile';
@@ -14,22 +16,25 @@ type TierTileProps = {
   tile: Tile;
 };
 
-const TierTileBase: React.FC<TierTileProps> & {
-  Name: typeof TierTileName;
-  Count: typeof TierTileCount;
+const TierTile: React.FC<TierTileProps> & {
+  Name: typeof Name;
+  Count: typeof Count;
   Image: typeof TierTileImage;
-  Progress: typeof TierTileProgress;
-  Description: typeof TierTileDescription;
+  Progress: typeof Progress;
+  Description: typeof Description;
+  NextName?: typeof NextName;
+  NextCount?: typeof NextCount;
 } = ({ tile }) => {
   const { theme } = useWllSdk();
   const isFullSize = tile.tileHeight === TileHeight.Full;
+  const configuration = tile.configuration as TierTileConfig;
 
   const styles = StyleSheet.create({
     container: createResponsiveStyle({
       paddingHorizontal: [8, 8, 12],
       borderRadius: theme.sizes.borderRadiusSm,
       width: '100%',
-      flexDirection: isFullSize ? 'row' : 'row-reverse',
+      flexDirection: isFullSize ? 'column' : 'row-reverse',
       alignItems: isFullSize ? 'flex-start' : 'center',
       justifyContent: 'space-between',
     }),
@@ -38,11 +43,54 @@ const TierTileBase: React.FC<TierTileProps> & {
       width: isFullSize ? '100%' : 'auto',
     },
   });
-  return (
-    <BaseTile tile={tile}>
-      {isFullSize && <TierTileImage isFullSize={isFullSize} />}
-    </BaseTile>
-  );
+
+  const renderTileContent = () => {
+    switch (configuration.type) {
+      case TierTileType.currentTier:
+        return (
+          <View style={styles.container}>
+            <TierTile.Image isFullSize={isFullSize} />
+            <View>
+              <Text>Your Tier</Text>
+              <TierTile.Name />
+            </View>
+            {isFullSize && <TierTile.Description />}
+          </View>
+        );
+      case TierTileType.currentTargetNext:
+        return (
+          <>
+            <TierTile.Image isFullSize={isFullSize} />
+            <TierTile.Description />
+            <View style={styles.container}>
+              <View style={styles.contentContainer}>
+                <TierTile.Name />
+                <TierTile.Count />
+              </View>
+              <TierTile.Progress />
+            </View>
+          </>
+        );
+      case TierTileType.currentTargetSpecific:
+        return (
+          <>
+            <TierTile.Image isFullSize={isFullSize} />
+            <TierTile.Description />
+            <View style={styles.container}>
+              <View style={styles.contentContainer}>
+                <TierTile.Name />
+                <TierTile.Count />
+              </View>
+              <TierTile.Progress />
+            </View>
+          </>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return <BaseTile tile={tile}>{renderTileContent()}</BaseTile>;
 };
 
 type TierTileImageProps = {
@@ -81,19 +129,33 @@ const TierTileImage: React.FC<TierTileImageProps> = ({ isFullSize }) => {
   );
 };
 
-const TierTileName: React.FC = () => {
+const Name: React.FC = () => {
   const { configuration } = useTileContext();
   const { tier } = configuration as TierTileConfig;
   return <Text variant="title">{tier?.name}</Text>;
 };
 
-const TierTileCount: React.FC = () => {
+const NextName: React.FC = () => {
+  const { configuration } = useTileContext();
+  const { targetTier } = configuration as TierTileConfig;
+  return <Text variant="title">{targetTier?.name}</Text>;
+};
+
+const Count: React.FC = () => {
   const { configuration } = useTileContext();
   const { tier } = configuration as TierTileConfig;
   return <Text>{`${tier?.earnedPoints}/${tier?.pointsRequirement}`}</Text>;
 };
 
-const TierTileProgress: React.FC = () => {
+const NextCount: React.FC = () => {
+  const { configuration } = useTileContext();
+  const { targetTier } = configuration as TierTileConfig;
+  return (
+    <Text>{`${targetTier?.earnedPoints}/${targetTier?.pointsRequirement}`}</Text>
+  );
+};
+
+const Progress: React.FC = () => {
   const { configuration } = useTileContext();
   const { tier } = configuration as TierTileConfig;
   if (!tier) return null;
@@ -102,18 +164,18 @@ const TierTileProgress: React.FC = () => {
   );
 };
 
-const TierTileDescription: React.FC = () => {
+const Description: React.FC = () => {
   const { configuration } = useTileContext();
   const { tier } = configuration as TierTileConfig;
   return <Text variant="body">{tier?.description}</Text>;
 };
 
-TierTileBase.Name = TierTileName;
-TierTileBase.Count = TierTileCount;
-TierTileBase.Image = TierTileImage;
-TierTileBase.Progress = TierTileProgress;
-TierTileBase.Description = TierTileDescription;
-
-const TierTile = TierTileBase;
+TierTile.Name = Name;
+TierTile.Count = Count;
+TierTile.Image = TierTileImage;
+TierTile.Progress = Progress;
+TierTile.Description = Description;
+TierTile.NextName = NextName;
+TierTile.NextCount = NextCount;
 
 export default TierTile;
diff --git a/lib/components/organisms/index.ts b/lib/components/organisms/index.ts
@@ -17,4 +17,3 @@ export {
   Section,
   TierTile,
 };
-import TierTileNew from './TierTileNew';