From a6097c4990e9ed2c7cf7f5dc7e8c5b7c8d1a6d87 Mon Sep 17 00:00:00 2001
From: Juraj Piar <juraj.piar@icloud.com>
Date: Tue, 14 Sep 2021 15:49:00 +0100
Subject: [PATCH] RESOLVE CONFLICTS AND SQUASH ME!

      When done with conflicts, run:
      git rebase -i HEAD~ to reword message to:
      fix(notifier): makes exp date calc safer
---
 .../notifier/buy/CheckoutStepper.tsx          | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/components/organisms/notifier/buy/CheckoutStepper.tsx

diff --git a/src/components/organisms/notifier/buy/CheckoutStepper.tsx b/src/components/organisms/notifier/buy/CheckoutStepper.tsx
new file mode 100644
index 000000000..df76a4ae4
--- /dev/null
+++ b/src/components/organisms/notifier/buy/CheckoutStepper.tsx
@@ -0,0 +1,99 @@
+import React, { FC, useContext, useState } from 'react'
+import Stepper from '@material-ui/core/Stepper'
+import Step from '@material-ui/core/Step'
+import StepLabel from '@material-ui/core/StepLabel'
+import StepContent from '@material-ui/core/StepContent'
+import { Button } from '@rsksmart/rif-ui'
+import MarketContext from 'context/Market'
+import { OffersOrder } from 'context/Services/notifier/offers/interfaces'
+import { NotifierEventItem } from 'models/marketItems/NotifierEventItem'
+import CheckoutPayment from './CheckoutPayment'
+import EventsRegistrar from './EventsRegistrar'
+
+type Props = {
+  order: OffersOrder
+  onEventItemAdded: (eventitem: NotifierEventItem) => void
+  onEventItemRemoved: (eventitem: NotifierEventItem) => void
+  onBuy: () => void
+  eventsAdded: NotifierEventItem[]
+}
+
+const getExpirationDate = (daysLeft: number): Date => {
+  const now = new Date()
+  const expirationDate = new Date(Date.UTC(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  ))
+  expirationDate.setUTCDate(expirationDate.getUTCDate() + daysLeft)
+  return new Date(expirationDate)
+}
+
+const CheckoutStepper: FC<Props> = (
+  {
+    onBuy, order, onEventItemAdded, onEventItemRemoved, eventsAdded,
+  },
+) => {
+  const [activeStep, setActiveStep] = useState(0)
+  const {
+    state: {
+      exchangeRates: {
+        crypto: cryptoXRs,
+        currentFiat: { displayName: fiatDisplayName },
+      },
+    },
+  } = useContext(MarketContext)
+
+  const {
+    item: {
+      token: { symbol: tokenSymbol },
+      value: tokenValue,
+      daysLeft,
+    },
+  } = order
+
+  const handleNext = (): void => setActiveStep(1)
+  const handleBack = (): void => setActiveStep(0)
+
+  const expirationDate = getExpirationDate(daysLeft)
+  const tokenXR = cryptoXRs[tokenSymbol]
+
+  return (
+    <Stepper activeStep={activeStep} orientation="vertical">
+      <Step>
+        <StepLabel>Notification events</StepLabel>
+        <StepContent>
+          <EventsRegistrar
+            onNext={handleNext}
+            order={order}
+            onEventAdded={onEventItemAdded}
+            onEventRemoved={onEventItemRemoved}
+            eventsAdded={eventsAdded}
+          />
+        </StepContent>
+      </Step>
+      <Step>
+        <StepLabel>Payment</StepLabel>
+        <StepContent>
+          <CheckoutPayment
+            onBuy={onBuy}
+            fiatDisplayName={fiatDisplayName}
+            expirationDate={expirationDate}
+            cryptoPrice={tokenValue}
+            tokenXR={tokenXR}
+          />
+          <Button
+            onClick={handleBack}
+            variant="outlined"
+            color="secondary"
+            rounded
+          >
+            Back
+          </Button>
+        </StepContent>
+      </Step>
+    </Stepper>
+  )
+}
+
+export default CheckoutStepper