[購買頁面] 信用卡圖示 (#1035)

* Add credit cards

* Add opacity to active card types

* useCallback

* Highlight all for unknown card types

* alt card type

src/components/Buy/PaymentSection/CreditCards/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { keys } from 'ramda';
+import Amex from './amex.svg';
+import Jcb from './jcb.svg';
+import MasterCard from './mastercard.svg';
+import UnionPay from './union_pay.8271208.png';
+import Visa from './visa.svg';
+import styles from './styles.module.css';
+
+const cardTypeSrc = {
+  visa: Visa,
+  mastercard: MasterCard,
+  jcb: Jcb,
+  amex: Amex,
+  unionpay: UnionPay,
+};
+
+const cardTypes = keys(cardTypeSrc);
+
+const isUnknownCardType = cardType => cardTypes.includes(cardType) === false;
+
+const CreditCards = ({ activeCardType }) => (
+  <React.Fragment>
+    {cardTypes.map(cardType => (
+      <img
+        key={cardType}
+        className={cn(styles.creditCard, {
+          [styles.active]:
+            activeCardType === cardType || isUnknownCardType(activeCardType),
+        })}
+        src={cardTypeSrc[cardType]}
+        alt={cardType}
+      />
+    ))}
+  </React.Fragment>
+);
+
+CreditCards.propTypes = {
+  activeCardType: PropTypes.string,
+};
+
+export default CreditCards;

src/components/Buy/PaymentSection/CreditCards/styles.module.css

@@ -0,0 +1,15 @@
+.creditCard {
+  width: auto;
+  height: 22px;
+
+  & + .creditCard {
+    margin-left: 8px;
+  }
+
+  opacity: 0.3;
+  transition: opacity 0.3s;
+
+  &.active {
+    opacity: 1;
+  }
+}

src/components/Buy/PaymentSection/PaymentSection.module.css

@@ -41,3 +41,16 @@
     font-size: 13px;
   }
 }
+
+.cardNumberGroup {
+  position: relative;
+
+  .cardIcons {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    height: 100%;
+    left: 100%;
+    margin-left: 8.75px;
+  }
+}

src/components/Buy/PaymentSection/index.js

@@ -7,15 +7,22 @@ import Label from 'common/form/Label';
 import useTappay from 'hooks/tappay/useTappay';
 import { CardCCV, CardExpirationDate, CardNumber } from './TappayElement';
 import Row from './Row';
+import CreditCards from './CreditCards';
 import styles from './PaymentSection.module.css';
 
 const PaymentSection = ({ ...props }) => {
   const [isPrimary, setPrimary] = useState(false);
+  const [activeCardType, setActiveCardType] = useState('unknown');
+  const handleUpdate = useCallback(update => {
+    setActiveCardType(update.cardType);
+  }, []);
+  const handlePrime = useCallback(prime => {
+    alert('get prime 成功，prime: ' + prime);
+    alert('creditCard', { prime });
+  }, []);
   const submit = useTappay({
-    handlePrime: prime => {
-      alert('get prime 成功，prime: ' + prime);
-      alert('creditCard', { prime });
-    },
+    handleUpdate,
+    handlePrime,
   });
   const onSubmit = useCallback(
     e => {
@@ -37,7 +44,12 @@ const PaymentSection = ({ ...props }) => {
               <Label className={styles.label} isRequired>
                 卡號
               </Label>
-              <CardNumber />
+              <div className={styles.cardNumberGroup}>
+                <div className={styles.cardIcons}>
+                  <CreditCards activeCardType={activeCardType} />
+                </div>
+                <CardNumber />
+              </div>
             </Row>
             <Row half>
               <Label className={styles.label} isRequired>

src/hooks/tappay/useTappay.js

@@ -40,7 +40,7 @@ const styles = {
   },
 };
 
-const useTappay = ({ handlePrime }) => {
+const useTappay = ({ handleUpdate, handlePrime }) => {
   const [tappaySDKLoaded, setTappySDKLoad] = useState(false);
   const [directCardSetup, setDirectCardSetup] = useState(false);
 
@@ -73,10 +73,10 @@ const useTappay = ({ handlePrime }) => {
     if (tappaySDKLoaded) {
       TPDirect.card.onUpdate(update => {
         // 即時反應每個行為
-        console.log(update);
+        handleUpdate(update);
       });
     }
-  }, [tappaySDKLoaded]);
+  }, [handleUpdate, tappaySDKLoaded]);
 
   // 送出 Tappay 表單
   const submit = useCallback(() => {