@telus-uds/components-base 1.74.0 → 1.76.0

package/src/PriceLockup/utils/renderPrice.jsx

@@ -0,0 +1,201 @@
+import React from 'react'
+import { StyleSheet, View, Text, Platform } from 'react-native'
+import A11yText from '../../A11yText'
+import renderTypography from './renderTypography'
+import renderFootnoteLinks from './renderFootnoteLinks'
+
+const selectStrikeThroughStyles = ({ strikeThroughColor }) => ({
+  textDecorationColor: strikeThroughColor
+})
+
+const selectFootnoteLinksStyles = ({ bottomLinksMarginLeft }) => ({
+  marginLeft: bottomLinksMarginLeft
+})
+
+const renderCurrencySymbol = (
+  currencySymbol,
+  currencySymbolTypographyTokens,
+  ratePosition,
+  fontColor
+) => renderTypography(`${currencySymbol}`, currencySymbolTypographyTokens, ratePosition, fontColor)
+
+const renderAmount = (
+  amount,
+  amountTypographyTokens,
+  strikeThrough,
+  a11yText,
+  fontColor,
+  themeTokens
+) => {
+  const amountText = renderTypography(amount, amountTypographyTokens, undefined, fontColor) // undefined is ratePosition
+  if (strikeThrough) {
+    return (
+      <>
+        <A11yText text={a11yText} />
+        <Text style={[staticStyles.strikeThroughContainer, selectStrikeThroughStyles(themeTokens)]}>
+          {amountText}
+        </Text>
+      </>
+    )
+  }
+
+  return amountText
+}
+
+const renderPrice = (
+  price,
+  rateText,
+  ratePosition,
+  signDirection,
+  currencySymbol,
+  currencySymbolTypographyTokens,
+  amountTypographyTokens,
+  centsTypographyTokens,
+  rateTypographyTokens,
+  fontColor,
+  strikeThrough,
+  a11yText,
+  bottomText,
+  bottomLinksMarginLeft,
+  footnoteLinks,
+  onClickFootnote,
+  themeTokens
+) => {
+  const priceString = price
+  const lastDotPosition = priceString.lastIndexOf('.')
+  const lastCommaPosition = priceString.lastIndexOf(',')
+  const [separator, separatorPosition] =
+    lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition]
+
+  // If the separator is at the fourth character from the end of the string or more, it's most probably
+  // a part of the amount, and the cents are not included in the price string
+  const EXCLUDE_CENTS = 3
+  const hasCents =
+    separatorPosition !== -1 && separatorPosition >= priceString.length - EXCLUDE_CENTS
+  const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString
+  const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
+
+  const footnoteLinkPositionStyles = rateText
+    ? staticStyles.footnoteLinksWithoutBottomText
+    : staticStyles.footnoteLinksWithoutBottomTextAndRateText
+
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3
+  return (
+    <>
+      <View
+        style={
+          ratePosition === 'bottom'
+            ? staticStyles.priceContainerColumn
+            : staticStyles.priceContainerRow
+        }
+      >
+        <View style={staticStyles.priceContainer}>
+          {signDirection === 'left' ? (
+            <Text>
+              {renderCurrencySymbol(
+                currencySymbol,
+                currencySymbolTypographyTokens,
+                ratePosition,
+                fontColor
+              )}
+            </Text>
+          ) : null}
+          {renderAmount(
+            amount,
+            amountTypographyTokens,
+            strikeThrough,
+            a11yText,
+            fontColor,
+            themeTokens
+          )}
+          {cents
+            ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor)
+            : null}
+          {signDirection === 'right' ? (
+            <Text style={staticStyles.currencySymbol}>
+              {renderCurrencySymbol(
+                currencySymbol,
+                currencySymbolTypographyTokens,
+                ratePosition,
+                fontColor
+              )}
+            </Text>
+          ) : null}
+        </View>
+        {rateText ? (
+          <Text
+            style={
+              ratePosition === 'bottom'
+                ? staticStyles.rateTextVerticalPosition
+                : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition]
+            }
+          >
+            {renderTypography(rateText, rateTypographyTokens, ratePosition, fontColor)}
+          </Text>
+        ) : null}
+        {!bottomText && footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
+          <Text
+            style={[
+              footnoteLinkPositionStyles,
+              selectFootnoteLinksStyles({ bottomLinksMarginLeft })
+            ]}
+          >
+            {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+          </Text>
+        ) : null}
+      </View>
+      {!bottomText && footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
+        <View style={staticStyles.verticalFootnoteLinkContainer}>
+          {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+        </View>
+      ) : null}
+    </>
+  )
+}
+
+export default renderPrice
+
+const staticStyles = StyleSheet.create({
+  priceContainerRow: {
+    flexDirection: 'row'
+  },
+  priceContainerColumn: {
+    flexDirection: 'column'
+  },
+  priceContainer: {
+    flexDirection: 'row',
+    alignSelf: 'flex-start',
+    marginTop: 4
+  },
+  currencySymbol: {
+    paddingLeft: 4
+  },
+  verticalFootnoteLinkContainer: {
+    ...Platform.select({
+      ios: { top: 10 },
+      android: { top: -2 }
+    })
+  },
+  footnoteLinksWithoutBottomText: {
+    ...Platform.select({
+      ios: { alignSelf: 'flex-end', top: -10 },
+      android: { alignSelf: 'center', top: -14 }
+    })
+  },
+  footnoteLinksWithoutBottomTextAndRateText: {
+    ...Platform.select({
+      ios: { alignSelf: 'center' },
+      android: { alignSelf: 'flex-start' }
+    })
+  },
+  strikeThroughContainer: {
+    textDecorationLine: 'line-through',
+    textDecorationThickness: '1px'
+  },
+  rateTextPosition: {
+    alignSelf: 'flex-end'
+  },
+  rateTextVerticalPosition: {
+    top: -8
+  }
+})

package/src/PriceLockup/utils/renderTypography.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Typography from '../../Typography'
+
+const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
+  const customProps =
+    ratePosition === 'bottom'
+      ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
+      : { tokens: { ...themeTokens, color: fontColor } }
+
+  return <Typography {...customProps}>{value}</Typography>
+}
+
+export default renderTypography

package/src/index.js

@@ -32,6 +32,7 @@ export { default as MultiSelectFilter } from './MultiSelectFilter'
 export { default as Notification } from './Notification'
 export { default as OrderedList } from './OrderedList'
 export { default as Pagination } from './Pagination'
+export { default as PriceLockup } from './PriceLockup'
 export { default as Progress } from './Progress'
 export { default as QuickLinks } from './QuickLinks'
 export { default as QuickLinksFeature } from './QuickLinksFeature'

package/src/utils/ssr-media-query/create-stylesheet/index.js

@@ -5,13 +5,14 @@ import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common'
 
 const createStyleSheet = (stylesWithQuery) => {
   if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
-  let cleanStyles
+
   let ids = {}
+  const cleanStyles = deepClone(stylesWithQuery)
+
   Object.keys(stylesWithQuery).forEach((key) => {
     if (!stylesWithQuery?.[key]) return
 
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
-    cleanStyles = deepClone(stylesWithQuery)
     mediaQueriesAndPseudoClasses.forEach((query) => {
       const css = createDeclarationBlock(stylesWithQuery[key][query])
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`