@quintype/native-components 2.20.32-beta.1 → 2.20.32-beta.2

package/CHANGELOG.md

@@ -2,14 +2,6 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [2.20.32](https://github.com/quintype/native-components/compare/v2.20.31...v2.20.32) (2024-06-05)
-
-### [2.20.31](https://github.com/quintype/native-components/compare/v2.20.30...v2.20.31) (2024-06-04)
-
-### [2.20.30](https://github.com/quintype/native-components/compare/v2.20.29...v2.20.30) (2024-06-04)
-
-### [2.20.29](https://github.com/quintype/native-components/compare/v2.20.28...v2.20.29) (2024-06-04)
-
 ### [2.20.28](https://github.com/quintype/native-components/compare/v2.20.27...v2.20.28) (2024-05-17)
 
 ### [2.20.27](https://github.com/quintype/native-components/compare/v2.20.26...v2.20.27) (2024-05-17)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.32-beta.1",
+  "version": "2.20.32-beta.2",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -23,8 +23,7 @@
     "react-native-pdf": "^5.1.4",
     "react-native-render-html": "^4.2.3",
     "react-native-share": "^8.1.0",
-    "rn-fetch-blob": "^0.10.16",
-    "react-native-star-rating-widget": "^1.7.3"
+    "rn-fetch-blob": "^0.10.16"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=5.7.3",

package/src/Icons/FallBackIcon/index.js

@@ -1,10 +1,18 @@
-import React, { useContext } from "react";
-import Icon from "react-native-vector-icons/FontAwesome";
-import { AppTheme } from "../../utils";
+import React from "react";
+import Icon from "react-native-vector-icons/Ionicons";
+import PropTypes from "prop-types";
 
-export const FallbackIcon = () => {
-  const { theme } = useContext(AppTheme);
-  const { COLORS } = theme;
+const DEFAULT_FALLBACK_SIZE = 25;
 
-  return <Icon name="image" size={25} color={COLORS.MONO4} />;
+export const FallbackIcon = ({ size = DEFAULT_FALLBACK_SIZE, color }) => (
+  <Icon
+    name="images"
+    size={size}
+    color={color}
+  />
+);
+
+FallbackIcon.propTypes = {
+  size: PropTypes.number,
+  color: PropTypes.string,
 };

package/src/components/CollectionCard/index.js

@@ -1,20 +1,22 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { memo } from 'react';
 import { getScreenPercentageWidth } from '../../utils/index';
 import {
   CollectionTitle,
   PrimaryStoryCard,
   SecondaryStoryCard,
+  ShareButton,
 } from '../index';
 
-export const CollectionCard = ({
+const CollectionCardNewBase = ({
   cdn,
   collectionName,
   stories,
   onCollectionPress,
   onStoryPress,
+  collectionTestID,
   offset,
   horizontalPadding,
   initialOffset, /* Number of items to load on first load */
@@ -22,10 +24,10 @@ export const CollectionCard = ({
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
+
   return (
     <>
-      {!hideCollectionTitle
-      && (
+      {!hideCollectionTitle && (
       <CollectionTitle
         title={collectionName}
         onPress={onCollectionPress}
@@ -33,11 +35,13 @@ export const CollectionCard = ({
       />
       )}
       <PrimaryStoryCard
+        collectionTestID={collectionTestID}
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
         }}
         cdn={cdn}
         story={!isEmpty(stories) ? primaryStory : {}}
+        iconComponent={<ShareButton story={primaryStory} />}
         imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
         horizontalPadding={horizontalPadding}
       />
@@ -45,11 +49,13 @@ export const CollectionCard = ({
         const secondaryStory = get(currentStory, ['story'], currentStory);
         return (
           <SecondaryStoryCard
+            collectionTestID={collectionTestID}
             onPress={() => onStoryPress(secondaryStory)}
-            key={`${secondaryStory?.id}`}
+            key={secondaryStory?.id}
             cdn={cdn}
             story={secondaryStory}
-            imageWidth={getScreenPercentageWidth(40)}
+            iconComponent={<ShareButton story={secondaryStory} />}
+            imageWidth={getScreenPercentageWidth(25)}
             horizontalPadding={horizontalPadding}
           />
         );
@@ -57,18 +63,22 @@ export const CollectionCard = ({
     </>
   );
 };
-CollectionCard.propTypes = {
+
+CollectionCardNewBase.propTypes = {
+  offset: PropTypes.number,
   initialOffset: PropTypes.number,
   cdn: PropTypes.string.isRequired,
-  collectionName: PropTypes.string.isRequired,
+  collectionName: PropTypes.string,
   stories: PropTypes.array.isRequired,
   onCollectionPress: PropTypes.func,
   onStoryPress: PropTypes.func,
-  offset: PropTypes.number,
+  collectionTestID: PropTypes.string,
   horizontalPadding: PropTypes.number,
   hideCollectionTitle: PropTypes.bool,
 };
 
-CollectionCard.defaultProps = {
+CollectionCardNewBase.defaultProps = {
   horizontalPadding: 12,
 };
+
+export const CollectionCard = memo(CollectionCardNewBase);

package/src/components/CollectionTitle/index.js

@@ -1,61 +1,44 @@
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { useContext, memo } from 'react';
 import {
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
-  View,
-  ViewStyle,
   StyleSheet,
 } from 'react-native';
-
 import { Text } from '../index';
-
-import { collectionStyles } from './styles';
+import { collectionTitleStyles } from './styles';
 import { AppTheme } from '../../utils';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
-export const CollectionTitle = (props) => {
+const CollectionTitleNewBase = (props) => {
   const { theme } = useContext(AppTheme);
-  const styles = collectionStyles(theme);
+  const styles = collectionTitleStyles(theme);
   const containerStyle = StyleSheet.flatten([
-    styles.titleContainer,
+    styles.container,
     { paddingHorizontal: props.horizontalPadding },
   ]);
-  const titleStyle = StyleSheet.flatten([styles.titleStyle, props.titleStyle]);
-  const indicatorStyle = StyleSheet.flatten([
-    styles.indicatorStyle,
-    props.indicatorStyle,
-  ]);
+  const titleStyle = StyleSheet.flatten([styles.title, props.titleStyle]);
 
   if (!props.title) {
     return null;
   }
 
   return (
-    <TouchableOpacity
-      style={containerStyle}
-      onPress={props.onPress}
-      testID={COMP_GENERAL_CONSTANTS.collectionTitleTouch}
-    >
-      <Text
-        style={titleStyle}
-        testID={COMP_GENERAL_CONSTANTS.collectionTitleText}
-      >
-        {props.title}
-      </Text>
-      <View style={indicatorStyle} />
+    <TouchableOpacity style={containerStyle} onPress={props.onPress}>
+      <Text style={titleStyle}>{props.title}</Text>
     </TouchableOpacity>
   );
 };
 
-CollectionTitle.propTypes = TouchableOpacityProps && {
-  title: PropTypes.string,
-  titleStyle: TextStyle,
-  indicatorStyle: ViewStyle,
-  horizontalPadding: PropTypes.number,
-};
+CollectionTitleNewBase.propTypes = TouchableOpacityProps
+  && {
+    title: PropTypes.string,
+    titleStyle: TextStyle,
+    horizontalPadding: PropTypes.number,
+  };
 
-CollectionTitle.defaultProps = {
+CollectionTitleNewBase.defaultProps = {
   horizontalPadding: 12,
 };
+
+export const CollectionTitle = memo(CollectionTitleNewBase);

package/src/components/CollectionTitle/styles.js

@@ -1,22 +1,19 @@
 import { StyleSheet } from 'react-native';
 
-export const collectionStyles = (appThemeContext) => {
+export const collectionTitleStyles = (appThemeContext) => {
   const { COLORS, FONT_SIZE } = appThemeContext;
+
   return StyleSheet.create({
-    titleContainer: {
-      backgroundColor: COLORS.BRAND_WHITE,
-      paddingVertical: 12,
+    container: {
       justifyContent: 'center',
+      backgroundColor: COLORS.BRAND_WHITE,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      marginTop: 8,
     },
-    titleStyle: {
-      fontSize: FONT_SIZE.h1,
+    title: {
+      fontSize: FONT_SIZE.h3,
       color: COLORS.BRAND_5,
     },
-    indicatorStyle: {
-      marginTop: 8,
-      width: 30,
-      height: 3,
-      backgroundColor: COLORS.BRAND_1,
-    },
   });
 };

package/src/components/PrimaryStoryCard/index.js

@@ -1,7 +1,6 @@
-import { throttle } from 'lodash';
-import get from 'lodash/get';
+import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { useContext, memo } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import {
@@ -17,25 +16,25 @@ import {
   COMP_GENERAL_CONSTANTS,
   COMP_CONTENT_CONSTANTS,
 } from '../../constants/component-constants';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
 
-export const PrimaryStoryCard = (props) => {
+const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-
-  const translate = get(theme, ['translate'], (word) => word);
-
   const {
     COLORS,
     FONT_SIZE,
     locale,
+    DARK_MODE,
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
     DATE_TIME_FORMAT,
+    premiumIcon
   } = theme || {};
 
-  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
+  const translate = get(theme, ['translate'], (word) => word);
 
-  const styles = storyStyles(COLORS, FONT_SIZE);
+  const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -44,16 +43,16 @@ export const PrimaryStoryCard = (props) => {
     styles.headline,
     props.headlineStyle,
   ]);
-  const autorStyle = StyleSheet.flatten([
-    styles.autorText,
-    props.authorTextStyle,
+  const timestampStyle = StyleSheet.flatten([
+    styles.timestamp,
+    props.timestampStyle,
   ]);
 
-  const name = get(story.authors, [0, 'name']);
-  const authorName = name ? `${translate('By')} ${name} | ` : '';
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
   const readTime = enableReadTimeOnStoryCards && story['read-time']
-    ? `${story['read-time']} ${translate('min read')}`
+    ? `${story['read-time']} ${translate('min read')} · `
     : '';
+  const isPremiumStory = story['access'] === 'subscription';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -97,54 +96,60 @@ export const PrimaryStoryCard = (props) => {
         cdn={props.cdn}
         imageWidth={props.imageWidth}
       >
-        <Text style={styles.xminContainer}>
-          {readTime && (
-            <View style={styles.xmin}>
-              <Text style={styles.xminText}>{readTime}</Text>
-            </View>
-          )}
-        </Text>
         <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
-      <Text
-        style={autorStyle}
-        numberOfLines={2}
-        // TODO: Add corrected testID here
-        testID={COMP_CONTENT_CONSTANTS.authorName}
-      >
-        {authorName
-          + getTimeForStoryCards(
-            story['published-at'],
-            DATE_FORMAT,
-            locale,
-            translate,
-            reverseTimeAdverbPosition,
-          )}
-      </Text>
-      <Text
-        primary
-        numberOfLines={3}
-        ellipsizeMode="tail"
-        style={headlineStyle}
-        testID={COMP_GENERAL_CONSTANTS.primaryStoryHeadline}
-      >
-        {getStoryHeadline(story)}
-      </Text>
+      <View style={styles.contentContainer}>
+        <View style={styles.headlineAndTimestampContainer}>
+        <View style={{display:'flex', flexDirection:'row'}}>
+
+
+          <Text
+            primary
+            numberOfLines={3}
+            ellipsizeMode="tail"
+            style={headlineStyle}
+            testID={COMP_GENERAL_CONSTANTS.primaryStoryHeadline}
+          >
+            {isPremiumStory && premiumIcon !=='none' && <PremiumIcons style={styles.premiumIcon} name={premiumIcon} color={COLORS.primary} size={FONT_SIZE.h2} /> }
+            {isPremiumStory && premiumIcon !=='none' && ' '}
+            {getStoryHeadline(story)}
+          </Text>
+          </View>
+          <Text
+            style={timestampStyle}
+            numberOfLines={2}
+            testID={COMP_CONTENT_CONSTANTS.publishedDate}
+          >
+            {readTime
+              + getTimeForStoryCards(
+                story['published-at'],
+                DATE_FORMAT,
+                locale,
+                translate,
+                reverseTimeAdverbPosition,
+              )}
+          </Text>
+        </View>
+        <View style={styles.icon}>{props.iconComponent}</View>
+      </View>
     </TouchableOpacity>
   );
 };
 
-PrimaryStoryCard.propTypes = {
+PrimaryStoryCardNewBase.propTypes = {
   cdn: PropTypes.string,
   imageWidth: PropTypes.number,
   headlineStyle: PropTypes.func,
-  authorTextStyle: PropTypes.func,
+  timestampStyle: PropTypes.func,
   story: PropTypes.object.isRequired,
   onPress: PropTypes.func,
   horizontalPadding: PropTypes.number,
+  iconComponent: PropTypes.element,
 };
 
-PrimaryStoryCard.defaultProps = {
+PrimaryStoryCardNewBase.defaultProps = {
   cdn: '',
   horizontalPadding: 12,
 };
+
+export const PrimaryStoryCard = memo(PrimaryStoryCardNewBase);

package/src/components/PrimaryStoryCard/styles.js

@@ -1,39 +1,32 @@
-export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
+export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
   container: {
     backgroundColor: COLORS.BRAND_WHITE,
-    marginTop: 12,
+    padding: 8,
   },
-  autorText: {
-    color: COLORS?.BRAND_6,
-    fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.3,
-    paddingVertical: 8,
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  headlineAndTimestampContainer: {
+    flexShrink: 1,
+    flex: 1,
   },
-  divider: {
-    backgroundColor: COLORS.BRAND_6,
-    height: 12,
-    marginHorizontal: 5,
-    width: 1,
+  timestamp: {
+    color: COLORS?.BRAND_BLACK,
+    fontSize: FONT_SIZE.h5,
+    lineHeight: FONT_SIZE.h5 * 1.5,
+    opacity: 0.6,
+    marginTop: 4,
   },
   headline: {
     fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * 1.5,
+    lineHeight: FONT_SIZE.title * 1.6,
     color: COLORS.BRAND_BLACK,
-    opacity: 0.9,
+    marginTop: 4,
   },
-  xminContainer: {
-    position: 'absolute',
-    bottom: 8,
-    right: 8,
-  },
-  xmin: {
-    backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
-    paddingLeft: 8,
-    paddingRight: 8,
-  },
-  xminText: {
-    color: COLORS.BRAND_BLACK,
-    fontSize: FONT_SIZE.h5,
+  icon: {
+    marginLeft: 8,
   },
   storyTypeContainer: {
     position: 'absolute',
@@ -63,4 +56,8 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
+  premiumIcon: {
+    marginTop: FONT_SIZE.h3 * 0.92,
+    marginRight: 5,
+  },
 });

package/src/components/RelatedStoriesCard/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { Text, View ,I18nManager} from 'react-native';
 import { getScreenPercentageWidth, AppTheme } from '../../utils/index';
-import { SecondaryStoryCard, SecondaryStoryCardNew, ShareButton } from '../index';
+import { SecondaryStoryCard, ShareButton } from '../index';
 
 import { relatedStoriesStyles } from './styles';
 
@@ -15,8 +15,7 @@ export const RelatedStoriesCard = ({
   onStoryPress,
   collectionTestID,
   RelatedCardID,
-  title,
-  switchToNewDesign,
+  title
 }) => {
   const sliceLimit = 5;
 
@@ -41,19 +40,12 @@ export const RelatedStoriesCard = ({
             onPress: () => onStoryPress(secondaryStory),
             key: secondaryStory?.id,
           };
-          return switchToNewDesign ? (
-            <SecondaryStoryCardNew
+          return <SecondaryStoryCard
               {...storyCardProps}
               iconComponent={<ShareButton story={secondaryStory} />}
               imageWidth={getScreenPercentageWidth(25)}
               horizontalPadding={4}
             />
-          ) : (
-            <SecondaryStoryCard
-              {...storyCardProps}
-              imageWidth={getScreenPercentageWidth(40)}
-            />
-          );
         })}
       </View>
     </>
@@ -65,6 +57,5 @@ RelatedStoriesCard.propTypes = {
   onStoryPress: PropTypes.func,
   collectionTestID: PropTypes.string,
   RelatedCardID: PropTypes.string,
-  title:PropTypes.string,
-  switchToNewDesign: PropTypes.bool,
+  title:PropTypes.string
 };

package/src/components/ResponsiveImage/index.js

@@ -33,7 +33,7 @@ const ResponsiveImageBase = (props) => {
 
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: (CustomFallBackIcon && CustomFallBackBackground) ?? COLORS.MONO6,
+    backgroundColor: CustomFallBackBackground || COLORS.MONO6,
     justifyContent: 'center',
     alignItems: 'center',
   };