@@ -4,11 +4,12 @@ import React, {
44 useEffect ,
55 useState ,
66} from "react" ;
7- import styles from "../../styles/components/registerV2 .module.css" ;
7+ import styles from "../../styles/components/registerV3 .module.css" ;
88import { gweiToEth , numberToFixedString } from "../../utils/feltService" ;
99import { CurrencyType } from "../../utils/constants" ;
1010import CurrencyDropdown from "./currencyDropdown" ;
1111import { Skeleton } from "@mui/material" ;
12+ import ArrowRightIcon from "../UI/iconsComponents/icons/arrowRightIcon" ;
1213
1314type RegisterSummaryProps = {
1415 duration : number ;
@@ -22,6 +23,9 @@ type RegisterSummaryProps = {
2223 displayedCurrency : CurrencyType ;
2324 onCurrencySwitch : ( type : CurrencyType ) => void ;
2425 loadingPrice ?: boolean ;
26+ isUpselled ?: boolean ;
27+ discountedPrice ?: string ; // price the user will pay after discount
28+ discountedDuration ?: number ; // years the user will have the domain for after discount
2529} ;
2630
2731const RegisterSummary : FunctionComponent < RegisterSummaryProps > = ( {
@@ -36,6 +40,9 @@ const RegisterSummary: FunctionComponent<RegisterSummaryProps> = ({
3640 displayedCurrency,
3741 onCurrencySwitch,
3842 loadingPrice,
43+ isUpselled = false ,
44+ discountedPrice,
45+ discountedDuration,
3946} ) => {
4047 const [ ethUsdPrice , setEthUsdPrice ] = useState < string > ( "0" ) ; // price of 1ETH in USD
4148 const [ usdRegistrationPrice , setUsdRegistrationPrice ] = useState < string > ( "0" ) ;
@@ -56,19 +63,42 @@ const RegisterSummary: FunctionComponent<RegisterSummaryProps> = ({
5663 function computeUsdPrice ( ) {
5764 if ( ethUsdPrice ) {
5865 return (
59- Number ( ethUsdPrice ) * Number ( gweiToEth ( ethRegistrationPrice ) )
66+ Number ( ethUsdPrice ) *
67+ Number ( gweiToEth ( ethRegistrationPrice ) ) *
68+ duration
6069 ) . toFixed ( 2 ) ;
6170 }
6271 return "0" ;
6372 }
6473
6574 setUsdRegistrationPrice ( computeUsdPrice ( ) ) ;
66- } , [ ethRegistrationPrice , ethUsdPrice ] ) ;
75+ } , [ ethRegistrationPrice , ethUsdPrice , duration ] ) ;
6776
6877 function displayPrice ( priceToPay : string , salesTaxInfo : string ) : ReactNode {
6978 return (
7079 < div className = "flex items-center justify-center" >
71- < span className = { styles . price } > { priceToPay } </ span >
80+ < span className = { styles . price } >
81+ { priceToPay } { displayedCurrency } { recurrence }
82+ </ span >
83+ { isSwissResident ? (
84+ < p className = { styles . legend } > { salesTaxInfo } </ p >
85+ ) : null }
86+ </ div >
87+ ) ;
88+ }
89+
90+ function displayDiscountedPrice (
91+ price : string ,
92+ priceDiscounted : string ,
93+ salesTaxInfo : string
94+ ) : ReactNode {
95+ return (
96+ < div className = "flex items-center justify-center" >
97+ < span className = { styles . priceCrossed } > { price } </ span >
98+ < ArrowRightIcon width = "25" color = "#454545" />
99+ < span className = { styles . price } >
100+ { priceDiscounted } { displayedCurrency } { recurrence } 🔥
101+ </ span >
72102 { isSwissResident ? (
73103 < p className = { styles . legend } > { salesTaxInfo } </ p >
74104 ) : null }
@@ -87,24 +117,34 @@ const RegisterSummary: FunctionComponent<RegisterSummaryProps> = ({
87117 ) } $ worth of ${ displayedCurrency }
88118 : "" ;
89119
120+ if ( isUpselled && discountedPrice ) {
121+ return displayDiscountedPrice (
122+ numberToFixedString ( Number ( gweiToEth ( registrationPrice ) ) , 3 ) ,
123+ numberToFixedString ( Number ( gweiToEth ( discountedPrice ) ) , 3 ) ,
124+ salesTaxInfo
125+ ) ;
126+ }
90127 return displayPrice (
91- numberToFixedString ( Number ( gweiToEth ( registrationPrice ) ) , 3 )
92- . concat ( ` ${ displayedCurrency } )
93- . concat ( recurrence ) ,
128+ numberToFixedString ( Number ( gweiToEth ( registrationPrice ) ) , 3 ) ,
94129 salesTaxInfo
95130 ) ;
96131 }
97132
133+ function getMessage ( ) {
134+ if ( customMessage ) return customMessage ;
135+ else {
136+ return `${ gweiToEth ( ethRegistrationPrice ) } ${
137+ isUpselled ? discountedDuration : duration
138+ } ${ isUpselled || duration > 1 ? "years" : "year" } ;
139+ }
140+ }
141+
98142 return (
99143 < div className = { styles . pricesSummary } >
100144 < div className = { styles . totalDue } >
101145 < h4 className = { styles . totalDueTitle } > Total due:</ h4 >
102146 < div className = { styles . priceContainer } >
103- < p className = { styles . legend } >
104- { customMessage
105- ? customMessage
106- : `For ${ duration } ${ duration === 1 ? "year" : "years" } }
107- </ p >
147+ < p className = { styles . legend } > { getMessage ( ) } </ p >
108148 { loadingPrice ? (
109149 < Skeleton variant = "text" width = "150px" height = "24px" />
110150 ) : (
0 commit comments