@quintype/native-components 2.20.18 → 2.20.19

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.19](https://github.com/quintype/native-components/compare/v2.20.18...v2.20.19) (2023-12-29)
+
 ### [2.20.18](https://github.com/quintype/native-components/compare/v2.20.17...v2.20.18) (2023-12-06)
 
 ### [2.20.17](https://github.com/quintype/native-components/compare/v2.20.16...v2.20.17) (2023-11-16)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.18",
+  "version": "2.20.19",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/Icons/PremiumIcons/index.js

@@ -0,0 +1,20 @@
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import React, { useContext } from 'react';
+import { AppTheme } from "../../utils/context";
+import PropTypes from "prop-types";
+
+const PremiumIcon = ({name, style, size, color}) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS } = theme;
+  color = color ?? COLORS.BRAND_1;
+    return <MaterialIcon name={name} style={style} size={size} color={color} />
+}
+PremiumIcon.propTypes = {
+  name: PropTypes.string.isRequired,
+  size: PropTypes.any.isRequired,
+  color: PropTypes.string,
+  style: PropTypes.any
+};
+
+
+export default PremiumIcon;

package/src/components/PrimaryStoryCardNew/index.js

@@ -16,6 +16,7 @@ import {
   COMP_GENERAL_CONSTANTS,
   COMP_CONTENT_CONSTANTS,
 } from '../../constants/component-constants';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
 
 const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
@@ -28,6 +29,7 @@ const PrimaryStoryCardNewBase = (props) => {
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
     DATE_TIME_FORMAT,
+    premiumIcon
   } = theme || {};
 
   const translate = get(theme, ['translate'], (word) => word);
@@ -50,6 +52,7 @@ const PrimaryStoryCardNewBase = (props) => {
   const readTime = enableReadTimeOnStoryCards && story['read-time']
     ? `${story['read-time']} ${translate('min read')} · `
     : '';
+  const isPremiumStory = story['access'] === 'subscription';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -97,6 +100,9 @@ const PrimaryStoryCardNewBase = (props) => {
       </ResponsiveImage>
       <View style={styles.contentContainer}>
         <View style={styles.headlineAndTimestampContainer}>
+        <View style={{display:'flex', flexDirection:'row'}}>
+
+
           <Text
             primary
             numberOfLines={3}
@@ -104,8 +110,11 @@ const PrimaryStoryCardNewBase = (props) => {
             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}

package/src/components/PrimaryStoryCardNew/styles.js

@@ -57,4 +57,8 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
+  premiumIcon:{
+    marginTop: FONT_SIZE.h3 * 0.92,
+    marginRight:5
+  }
 });

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,6 +1,6 @@
-import { get, throttle } from 'lodash';
+import { get, isNull, throttle } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
+import React, { useContext, memo, useState, useEffect } from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
@@ -22,6 +22,7 @@ import {
   COMP_GENERAL_CONSTANTS,
   COMP_CONTENT_CONSTANTS,
 } from '../../constants/component-constants';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
@@ -33,10 +34,11 @@ const SecondaryStoryCardNewBase = (props) => {
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
     DATE_TIME_FORMAT,
+    premiumIcon,
+    FONT_SIZE
   } = theme;
 
   const translate = get(theme, ['translate'], (word) => word);
-
   const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
@@ -55,6 +57,7 @@ const SecondaryStoryCardNewBase = (props) => {
   const readTime = enableReadTimeOnStoryCards && story['read-time']
     ? `${story['read-time']} ${translate('min read')} · `
     : '';
+  const isPremiumStory = story['access'] === 'subscription';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -102,6 +105,7 @@ const SecondaryStoryCardNewBase = (props) => {
         <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
       <View style={styles.headlineAndTimestampBlockContainer}>
+        <View style={{display:'flex', flexDirection:'row'}}>
         <Text
           primary
           numberOfLines={2}
@@ -109,8 +113,11 @@ const SecondaryStoryCardNewBase = (props) => {
           style={headlineStyle}
           testID={COMP_GENERAL_CONSTANTS.secondaryStoryHeadline}
         >
+          {isPremiumStory && premiumIcon !=='none' && <PremiumIcons style={styles.premiumIcon} name={premiumIcon} color={COLORS.primary} size={FONT_SIZE.h4} />}
+          {isPremiumStory && premiumIcon !=='none' && ' '}
           {getStoryHeadline(story)?.trim()}
         </Text>
+        </View>
         <Text
           style={timestampStyle}
           numberOfLines={2}

package/src/components/SecondaryStoryCardNew/styles.js

@@ -57,4 +57,8 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
+  premiumIcon:{
+    marginTop: FONT_SIZE.h3 * 0.45,
+    marginRight:3
+  }
 });

package/src/components/StoryHeader/index.js

@@ -18,7 +18,6 @@ import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
-
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
@@ -66,13 +65,14 @@ export const StoryHeader = (props) => {
   const { theme } = useContext(AppTheme);
 
   const {
-    COLORS, locale, FONT_FAMILY, DATE_TIME_FORMAT,
+    COLORS, locale, FONT_FAMILY, DATE_TIME_FORMAT, premiumIcon, FONT_SIZE
   } = theme;
 
   const DATE_FORMAT = `${DATE_TIME_FORMAT.dateFormat} ${DATE_TIME_FORMAT.timeFormat}`;
-  const styles = storyHeaderStyles(COLORS, FONT_FAMILY);
+  const styles = storyHeaderStyles(COLORS, FONT_FAMILY, FONT_SIZE);
   const caption = story['hero-image-caption'];
   const attribution = story['hero-image-attribution'];
+  const isPremiumStory = story['access'] === 'subscription';
 
 
   const showAttribution = () => {
@@ -121,7 +121,7 @@ export const StoryHeader = (props) => {
           {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
         </Text>
       </View>
-      <StoryTitle title={story.headline} subTitle={story.subheadline} />
+        <StoryTitle title={story.headline} subTitle={story.subheadline} isPremiumStory={isPremiumStory}/>
       <AuthorRow
         authors={story.authors}
         onPress={props.onAuthorPress}

package/src/components/StoryTitle/index.js

@@ -5,10 +5,14 @@ import { Text } from '../index';
 import { storyTitleStyles } from './styles';
 import { AppTheme } from '../../utils';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
 
-export const StoryTitle = ({ title, subTitle }) => {
+export const StoryTitle = ({ title, subTitle, isPremiumStory }) => {
   const { theme } = useContext(AppTheme);
   const styles = storyTitleStyles(theme);
+  const {
+    premiumIcon, COLORS, FONT_SIZE
+  } = theme;
   return (
     <View style={styles.container}>
       <Text
@@ -16,8 +20,11 @@ export const StoryTitle = ({ title, subTitle }) => {
         style={styles.titleStyle}
         testID={COMP_CONTENT_CONSTANTS.storyTitle}
       >
+        {isPremiumStory && premiumIcon !=='none' && <PremiumIcons style={styles.premiumIcon} size={FONT_SIZE.h2}  name={premiumIcon} color={COLORS.primary} />}
+        {isPremiumStory && premiumIcon !=='none' && ' '}
         {title?.trim() || ''}
       </Text>
+
       {subTitle && (
         <Text
           style={styles.subTitleStyle}

package/src/components/StoryTitle/styles.js

@@ -17,4 +17,9 @@ export const storyTitleStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     marginTop: 15,
     paddingVertical: 5,
   },
+  premiumIcon : { 
+    paddingLeft:10, 
+    marginRight:-5, 
+    borderWidth:1
+  }
 });