Merge pull request #976 from msalcala11/gift-card-fixes

Fix gift card barcode rendering in print view, and properly render redeem instructions and terms containing HTML

src/lib/gift-cards/gift-card.ts

@@ -271,6 +271,7 @@ export function getGiftCardIcons(supportedCardMap: CardConfigMap) {
 export function generateGiftCardPrintHtml(
   cardConfig: CardConfig,
   giftCard: GiftCard,
+  scannableCodeDimensions: {height: number; width: number},
 ): string {
   return `<div style="text-align: center; margin-top: 50px; font-family: Arial;">
  <h1 style="font-size: 30px;">${formatFiatAmount(
@@ -287,7 +288,7 @@ export function generateGiftCardPrintHtml(
  <h3 style="color: gray;">Claim Code</h3>
  ${
    giftCard.barcodeImage
-     ? `<img src="${giftCard.barcodeImage}" style="margin-top: 10px;">`
+     ? `<img src="${giftCard.barcodeImage}" style="margin-top: 10px; height: ${scannableCodeDimensions.height}px; width: ${scannableCodeDimensions.width}px; ">`
      : ''
  }
  <h1 style="font-size: 22px;">${giftCard.claimCode}</h1>

src/navigation/tabs/shop/components/GiftCardTerms.tsx

@@ -0,0 +1,27 @@
+import {WIDTH} from '../../../../components/styled/Containers';
+import React from 'react';
+import RenderHTML from 'react-native-render-html';
+import {horizontalPadding} from './styled/ShopTabComponents';
+import {SlateDark} from '../../../../styles/colors';
+
+const termsStyle = {
+  color: SlateDark,
+  fontSize: 12,
+  fontWeight: '300',
+  padding: 10,
+  paddingBottom: 50,
+  paddingTop: 20,
+  textAlign: 'justify',
+};
+
+export default ({terms}: {terms: string}) => {
+  return (
+    <RenderHTML
+      baseStyle={termsStyle}
+      contentWidth={WIDTH - 2 * horizontalPadding}
+      source={{
+        html: terms || '',
+      }}
+    />
+  );
+};

src/navigation/tabs/shop/components/styled/ShopTabComponents.tsx

@@ -116,15 +116,6 @@ export const NavIconButtonContainer = styled.TouchableOpacity`
   overflow: hidden;
 `;
 
-export const Terms = styled(BaseText)`
-  color: ${SlateDark};
-  font-size: 12px;
-  line-height: 15px;
-  padding: 20px 10px 50px;
-  text-align: justify;
-  font-weight: 300;
-`;
-
 export const BillOption = styled.View<{isLast?: boolean}>`
   align-items: center;
   justify-content: center;

src/navigation/tabs/shop/gift-card/screens/GiftCardDetails.tsx

@@ -42,7 +42,6 @@ import {
   horizontalPadding,
   NavIconButtonContainer,
   SectionSpacer,
-  Terms,
 } from '../../components/styled/ShopTabComponents';
 import {
   ArchiveSvg,
@@ -69,6 +68,7 @@ import {generateGiftCardPrintHtml} from '../../../../../lib/gift-cards/gift-card
 import {Analytics} from '../../../../../store/analytics/analytics.effects';
 import Markdown from 'react-native-markdown-display';
 import {ScrollableBottomNotificationMessageContainer} from '../../../../../components/modal/bottom-notification/BottomNotification';
+import GiftCardTerms from '../../components/GiftCardTerms';
 
 const maxWidth = 320;
 
@@ -244,7 +244,8 @@ const GiftCardDetails = ({
         'Paste this code on . This gift card cannot be recovered if your claim code is lost.',
         {website: cardConfig.website},
       );
-    const containsHtml = redeemInstructions.includes('</');
+    const containsHtml =
+      redeemInstructions.includes('</') || redeemInstructions.includes('/>');
     const redeemHtml = redeemInstructions
       .replaceAll(': \n', ': <br>')
       .replaceAll('\n\n', '<br><br>');
@@ -324,7 +325,11 @@ const GiftCardDetails = ({
             onPress: async () => {
               await sleep(600); // Wait for options sheet to close on iOS
               await RNPrint.print({
-                html: generateGiftCardPrintHtml(cardConfig, giftCard),
+                html: generateGiftCardPrintHtml(
+                  cardConfig,
+                  giftCard,
+                  scannableCodeDimensions,
+                ),
               });
             },
           },
@@ -357,6 +362,7 @@ const GiftCardDetails = ({
         contentContainerStyle={{
           alignItems: 'center',
           paddingHorizontal: horizontalPadding,
+          paddingBottom: 50,
         }}
         refreshControl={
           giftCard.status !== 'SUCCESS' ? (
@@ -540,7 +546,7 @@ const GiftCardDetails = ({
             {t('Created')} <TimeAgo time={giftCard.date} />
           </Paragraph>
         ) : null}
-        <Terms>{cardConfig.terms}</Terms>
+        <GiftCardTerms terms={cardConfig.terms} />
       </ScrollView>
     </>
   );

src/navigation/wallet/screens/send/confirm/GiftCardConfirm.tsx

@@ -42,7 +42,6 @@ import {AppActions} from '../../../../../store/app';
 import {CustomErrorMessage} from '../../../components/ErrorMessages';
 import {APP_NETWORK, BASE_BITPAY_URLS} from '../../../../../constants/config';
 import {URL} from '../../../../../constants';
-import {Terms} from '../../../../tabs/shop/components/styled/ShopTabComponents';
 import {
   CardConfig,
   GiftCardDiscount,
@@ -63,6 +62,7 @@ import {
 import {getTransactionCurrencyForPayInvoice} from '../../../../../store/coinbase/coinbase.effects';
 import {Analytics} from '../../../../../store/analytics/analytics.effects';
 import {getCurrencyCodeFromCoinAndChain} from '../../../../bitpay-id/utils/bitpay-id-utils';
+import GiftCardTerms from '../../../../tabs/shop/components/GiftCardTerms';
 
 export interface GiftCardConfirmParamList {
   amount: number;
@@ -454,7 +454,7 @@ const Confirm = () => {
               }}
             />
             <Amount description={t('Total')} amount={total} />
-            <Terms>{cardConfig.terms}</Terms>
+            <GiftCardTerms terms={cardConfig.terms} />
           </>
         ) : null}
       </DetailsList>