tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/api/orders.ts

@@ -1,30 +0,0 @@
-import { AxiosRequestConfig, AxiosResponse } from 'axios'
-
-import { CONFIGS } from '../utils'
-import { publicRequest } from './publicRequest'
-
-export const getOrders = async (
-  page: number,
-  limit: number,
-  eventSlug: string
-): Promise<IOrdersResponse> => {
-  const slug = eventSlug || CONFIGS.EVENT_SLUG || ''
-
-  const response: AxiosResponse<IOrdersResponse, AxiosRequestConfig> =
-    await publicRequest.get(
-      `v1/account/orders/?page=${page}&limit=${limit}&filter[event]=${slug}&${
-        CONFIGS.BRAND_SLUG
-          ? `filter[brand]=${CONFIGS.BRAND_SLUG}&filter[subbrands]=true`
-          : ''
-      }`
-    )
-
-  return response.data
-}
-
-export const getOrderDetails = async (orderId: string): Promise<IOrderResponse> => {
-  const response: AxiosResponse<IOrderResponse, AxiosRequestConfig> =
-    await publicRequest.get(`v1/account/order/${orderId}`)
-
-  return response.data
-}

package/src/api/payment.ts

@@ -1,77 +0,0 @@
-import { AxiosRequestConfig, AxiosResponse } from 'axios'
-import _map from 'lodash/map'
-import { nanoid } from 'nanoid'
-
-import { isBrowser } from '../utils'
-import { publicRequest } from './publicRequest'
-
-export const getPaymentData = async (hash: string): Promise<IPaymentDataResponse> => {
-  const response: AxiosResponse<IPaymentDataResponse, AxiosRequestConfig> =
-    await publicRequest.get(`v1/order/${hash}/review`, {
-      headers: { 'Referer-Url': isBrowser ? document.referrer : '' },
-    })
-
-  return response.data
-}
-
-export const handlePaymentSuccess = async (
-  orderHash: string
-): Promise<IPaymentSuccessDataResponse> => {
-  const response: AxiosResponse<IPaymentSuccessDataResponse, AxiosRequestConfig> =
-    await publicRequest.post(`v1/order/${orderHash}/success`, undefined, {
-      headers: {
-        ...publicRequest.defaults.headers.common,
-        'Referer-Url': isBrowser ? document.referrer : '',
-      },
-    })
-  return response.data
-}
-
-export const handleFreeSuccess = async (
-  orderHash: string
-): Promise<IFreeRegistrationDataResponse> => {
-  const response: AxiosResponse<IFreeRegistrationDataResponse, AxiosRequestConfig> =
-    await publicRequest.post(
-      `v1/order/${orderHash}/complete_free_registration`,
-      undefined,
-      { headers: { 'Referer-Url': isBrowser ? document.referrer : '' } }
-    )
-  return response.data
-}
-
-export const getConfirmationData = async (
-  orderHash: string
-): Promise<ICheckoutCompleteDataResponse> => {
-  const response: AxiosResponse<ICheckoutCompleteDataResponse, AxiosRequestConfig> =
-    await publicRequest.get(`v1/order/${orderHash}/payment/complete`)
-  return response.data
-}
-
-export const getConditions = async (
-  eventId: string
-): Promise<IConditionsAdaptedDataResponse> => {
-  const response: AxiosResponse<IConditionsDataResponse, AxiosRequestConfig> =
-    await publicRequest.get(`v1/event/${eventId}/conditions`)
-
-  const adaptedData: IConditionsAdaptedData[] = _map(
-    response.data.data.attributes,
-    item => ({
-      id: nanoid(),
-      text: item,
-      checked: false,
-    })
-  )
-
-  const returnData: AxiosResponse<IConditionsAdaptedDataResponse, AxiosRequestConfig> = {
-    ...response,
-    data: {
-      ...response.data,
-      data: {
-        ...response.data.data,
-        attributes: adaptedData,
-      },
-    },
-  }
-
-  return returnData.data
-}

package/src/api/preRegistrationComplete.ts

@@ -1,37 +0,0 @@
-import { AxiosRequestConfig, AxiosResponse } from 'axios'
-
-import { publicRequest } from '../api/publicRequest'
-
-export const getPreRegistrationInfluencers = async (
-  data: IInfluancersRequestData
-): Promise<IInfluancersResponseData> => {
-  const response: AxiosResponse<IInfluancersResponseData, AxiosRequestConfig> =
-    await publicRequest.get(`v1/event/${data.eventId}/pre-registration/influencers`)
-  return response.data
-}
-
-export const getPreRegistrationShareOptions = async (
-  data: IShareOptionsRequestData
-): Promise<IShareOptionsResponseData> => {
-  const response: AxiosResponse<IShareOptionsResponseData, AxiosRequestConfig> =
-    await publicRequest.get(`/v1/pre-registration/${data.hash}/confirmation-page`)
-  return response.data
-}
-
-export const submitShareAction = async (
-  data: ISubmitShareActionRequestData
-): Promise<ISubmitShareActionResponseData> => {
-  const { eventActionId, accessToken, hash } = data
-
-  const response: AxiosResponse<ISubmitShareActionResponseData, AxiosRequestConfig> =
-    await publicRequest.post(`/v1/pre-registration/${hash}/submit-action`, {
-      data: {
-        attributes: {
-          phase: 'pre-registration',
-          eventActionId: Number(eventActionId),
-          accessToken,
-        },
-      },
-    })
-  return response.data
-}

package/src/api/publicRequest.ts

@@ -1,47 +0,0 @@
-import axios, { AxiosInstance } from 'axios'
-
-import { getCookieByName } from '../utils'
-
-const headers: { [key: string]: string } = {
-  Accept: 'application/vnd.api+json',
-  'Content-Type': 'application/vnd.api+json',
-}
-
-const isWindowDefined = typeof window !== 'undefined'
-const authGuestToken = isWindowDefined ? localStorage.getItem('auth_guest_token') : ''
-if (isWindowDefined && authGuestToken) {
-  headers['Authorization-Guest'] = authGuestToken
-}
-
-export const setAxiosHeader = (key: string, value: string | number) => {
-  headers[key] = `${value}`
-}
-
-interface IPublicRequest extends AxiosInstance {
-  setBaseUrl: (baseUrl: string) => void;
-  setGuestToken: (guestToken: string) => void;
-}
-
-export const publicRequest: IPublicRequest = axios.create({
-  baseURL: 'https://www.ticketfairy.com/api',
-  headers,
-  withCredentials: true,
-}) as IPublicRequest
-
-publicRequest.interceptors.request.use(config => {
-  if (getCookieByName('X-TF-ECOMMERCE')) {
-    config.headers['X-TF-ECOMMERCE'] = getCookieByName('X-TF-ECOMMERCE')
-  }
-
-  return config
-})
-
-publicRequest.setBaseUrl = (baseUrl: string) =>
-  (publicRequest.defaults.baseURL = baseUrl + '/api')
-
-publicRequest.setGuestToken = (guestToken: string) =>
-  (publicRequest.defaults.headers.common['Authorization-Guest'] = guestToken)
-
-export const setBaseUrl = (baseUrl: string) => {
-  publicRequest.setBaseUrl(baseUrl)
-}

package/src/api/resale.ts

@@ -1,28 +0,0 @@
-import { AxiosRequestConfig, AxiosResponse } from 'axios'
-
-import { publicRequest } from './publicRequest'
-
-export const resaleTicket = async (
-  data: FormData,
-  hash: string
-): Promise<IResaleTicketResponse> => {
-  const response: AxiosResponse<IResaleTicketResponse, AxiosRequestConfig> =
-    await publicRequest.post(`v1/ticket/${hash}/sell`, data)
-
-  return response.data
-}
-
-export const removeFromResale = async (
-  hash: string
-): Promise<IRemoveFromResaleResponse> => {
-  const response: AxiosResponse<IRemoveFromResaleResponse, AxiosRequestConfig> =
-    await publicRequest.delete(`v1/ticket/${hash}/sell`)
-
-  return response.data
-}
-
-export const processTicket = (hash: string) =>
-  publicRequest.post(`v1/ticket/${hash}/process`)
-
-export const declineInvitation = (hash: string) =>
-  publicRequest.post(`v1/ticket/${hash}/decline`)

package/src/assets/images/cross.svg

@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="94.926px" height="94.926px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;"
-	 xml:space="preserve">
-<g>
-	<path d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0
-		c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096
-		c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476
-		c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62
-		s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

package/src/assets/images/done.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47717 15.5228 0 10 0C4.47717 0 0 4.47717 0 10C0 15.5228 4.47717 20 10 20ZM8.14661 15.8678L16.8782 6.39722C16.9561 6.31335 17 6.19922 17 6.08008C17 5.96094 16.9561 5.8468 16.8782 5.76282L16.3016 5.12854C16.1386 4.95715 15.8796 4.95715 15.7167 5.12854L7.85004 13.661L4.28326 9.79236C4.20593 9.70776 4.10071 9.66016 3.99084 9.66016C3.9353 9.66016 3.88086 9.67236 3.83069 9.69531C3.78168 9.71777 3.73663 9.75061 3.69843 9.79236L3.12183 10.4177C3.07635 10.4667 3.04248 10.5259 3.02216 10.5905C3.00763 10.6365 3 10.6853 3 10.735C3 10.8541 3.04388 10.9683 3.12183 11.0521L7.56177 15.8678C7.6391 15.9524 7.74438 16 7.85419 16C7.96399 16 8.06927 15.9524 8.14661 15.8678Z" fill="#569F44"/>
-</svg>

package/src/assets/images/edit.svg

@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_996_11495)">
-<path d="M6.162 12.6667L5 13.6667L2 14.0001V11.1714L8.6 4.57139L11.428 7.40072L6.16133 12.6667H6.162ZM9.542 3.62939L10.9567 2.21472C11.0817 2.08974 11.2512 2.01953 11.428 2.01953C11.6048 2.01953 11.7743 2.08974 11.8993 2.21472L13.7853 4.10072C13.9103 4.22574 13.9805 4.39528 13.9805 4.57206C13.9805 4.74883 13.9103 4.91837 13.7853 5.04339L12.3707 6.45739L9.54267 3.62939H9.542Z" fill="#03053D"/>
-</g>
-<defs>
-<clipPath id="clip0_996_11495">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/src/assets/images/email.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>

package/src/assets/images/instagram.svg

@@ -1,5 +0,0 @@
-<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32px" height="32px">
-    <circle cx="32" cy="32" r="31" fill='#A01173' />
-    <path
-        d="M 23.8513 12.0905 C 17.3957 12.0905 12.0905 17.3886 12.0905 23.8513 L 12.0905 40.3279 C 12.0905 46.7835 17.3886 52.0887 23.8513 52.0887 L 40.3279 52.0887 C 46.7835 52.0887 52.0887 46.7906 52.0887 40.3279 L 52.0887 23.8513 C 52.0887 17.3957 46.7906 12.0905 40.3279 12.0905 Z M 23.8513 15.7267 L 40.3279 15.7267 C 44.8234 15.7267 48.4525 19.3558 48.4525 23.8513 L 48.4525 40.3279 C 48.4525 44.8234 44.8234 48.4525 40.3279 48.4525 L 23.8513 48.4525 C 19.3558 48.4525 15.7267 44.8234 15.7267 40.3279 L 15.7267 23.8513 C 15.7267 19.3558 19.3558 15.7267 23.8513 15.7267 Z M 42.8278 19.7038 C 41.9116 19.7038 41.1801 20.4353 41.1801 21.3514 C 41.1801 22.2676 41.9116 22.9991 42.8278 22.9991 C 43.7439 22.9991 44.4754 22.2676 44.4754 21.3514 C 44.4754 20.4353 43.7439 19.7038 42.8278 19.7038 Z M 32.0896 21.181 C 26.0885 21.181 21.181 26.0885 21.181 32.0896 C 21.181 38.0907 26.0885 42.9982 32.0896 42.9982 C 38.0907 42.9982 42.9982 38.0907 42.9982 32.0896 C 42.9982 26.0885 38.0907 21.181 32.0896 21.181 Z M 32.0896 24.8172 C 36.1306 24.8172 39.362 28.0486 39.362 32.0896 C 39.362 36.1306 36.1306 39.362 32.0896 39.362 C 28.0486 39.362 24.8172 36.1306 24.8172 32.0896 C 24.8172 28.0486 28.0486 24.8172 32.0896 24.8172 Z" />
-</svg>

package/src/assets/images/spotify.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0"?><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32px"
-    height="32px">
-    <circle cx="32" cy="32" r="31" fill='#60BD82' />
-    <path
-        d="M 11 25 z M 45.3205 48.134 c -0.4019 0.6035 -1.0638 0.9289 -1.7382 0.9289 c -0.3977 0 -0.7996 -0.1126 -1.1556 -0.3504 C 38.9877 46.4194 33.1556 44.8897 28.2885 44.8911 c -5.1647 0.0028 -9.0361 1.271 -9.075 1.2835 c -1.0902 0.3699 -2.2736 -0.2253 -2.638 -1.3183 s 0.2267 -2.275 1.3197 -2.638 c 0.1836 -0.0612 4.5598 -1.4949 10.3933 -1.4977 C 33.1556 40.718 39.925 42.0307 44.742 45.2416 C 45.7015 45.8812 45.9602 47.1759 45.3205 48.134 z M 49.4812 39.5957 c -0.4519 0.7259 -1.2321 1.125 -2.0289 1.125 c -0.4311 0 -0.8677 -0.1154 -1.2599 -0.3616 c -6.2354 -3.8853 -12.6433 -4.7072 -18.164 -4.6585 c -6.2327 0.0556 -11.2166 1.2446 -11.3014 1.2696 c -1.2613 0.3588 -2.5879 -0.3782 -2.9481 -1.6451 c -0.3602 -1.2696 0.3782 -2.5893 1.6465 -2.9481 c 0.3852 -0.1099 5.3594 -1.3336 12.1691 -1.3906 c 6.209 -0.0515 13.9463 0.8483 21.1246 5.3204 C 49.8358 37.0023 50.1793 38.4763 49.4812 39.5957 z M 53.6321 29.6112 C 53.1134 30.4929 52.1845 30.9838 51.2306 30.9838 c -0.4784 0 -0.9623 -0.1238 -1.4059 -0.3824 c -7.2673 -4.2664 -16.1031 -5.1716 -22.2357 -5.18 c -0.0292 0 -0.0584 0 -0.0876 0 c -7.4161 0 -13.1272 1.3044 -13.1843 1.3183 c -1.4991 0.3435 -2.9912 -0.5827 -3.3388 -2.0789 c -0.3476 -1.4949 0.5799 -2.9884 2.0748 -3.3374 C 13.3103 21.2635 19.4123 19.859 27.5014 19.859 c 0.032 0 0.064 0 0.096 0 c 6.8209 0.0097 16.7025 1.0471 25.0447 5.9448 C 53.9659 26.5825 54.4095 28.2874 53.6321 29.6112 z" />
-</svg>

package/src/assets/images/user.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>

package/src/assets/images/xmark.svg

@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 48 48"
-   version="1.1"
-   id="svg15"
-   sodipodi:docname="cross red circle.svg"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)">
-  <metadata
-     id="metadata19">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1027"
-     id="namedview17"
-     showgrid="false"
-     inkscape:zoom="4.9166667"
-     inkscape:cx="-11.694915"
-     inkscape:cy="40.271186"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g13" />
-  <defs
-     id="defs7">
-    <linearGradient
-       id="linearGradient828"
-       osb:paint="solid">
-      <stop
-         style="stop-color:#ff0000;stop-opacity:1;"
-         offset="0"
-         id="stop826" />
-    </linearGradient>
-    <linearGradient
-       id="0"
-       gradientUnits="userSpaceOnUse"
-       y1="47.37"
-       x2="0"
-       y2="-1.429">
-      <stop
-         stop-color="#c52828"
-         id="stop2" />
-      <stop
-         offset="1"
-         stop-color="#ff5454"
-         id="stop4" />
-    </linearGradient>
-  </defs>
-  <g
-     transform="matrix(.99999 0 0 .99999-58.37.882)"
-     enable-background="new"
-     id="g13"
-     style="fill-opacity:1">
-    <circle
-       cx="82.37"
-       cy="23.12"
-       r="24"
-       fill="url(#0)"
-       id="circle9"
-       style="fill-opacity:1;fill:#dd3333" />
-    <path
-       d="m87.77 23.725l5.939-5.939c.377-.372.566-.835.566-1.373 0-.54-.189-.997-.566-1.374l-2.747-2.747c-.377-.372-.835-.564-1.373-.564-.539 0-.997.186-1.374.564l-5.939 5.939-5.939-5.939c-.377-.372-.835-.564-1.374-.564-.539 0-.997.186-1.374.564l-2.748 2.747c-.377.378-.566.835-.566 1.374 0 .54.188.997.566 1.373l5.939 5.939-5.939 5.94c-.377.372-.566.835-.566 1.373 0 .54.188.997.566 1.373l2.748 2.747c.377.378.835.564 1.374.564.539 0 .997-.186 1.374-.564l5.939-5.939 5.94 5.939c.377.378.835.564 1.374.564.539 0 .997-.186 1.373-.564l2.747-2.747c.377-.372.566-.835.566-1.373 0-.54-.188-.997-.566-1.373l-5.939-5.94"
-       fill="#fff"
-       fill-opacity=".842"
-       id="path11"
-       style="fill-opacity:1;fill:#ffffff" />
-  </g>
-</svg>

package/src/components/account-settings/index.tsx

@@ -1,161 +0,0 @@
-import React from "react"
-import './style.css'
-import Icon from "../../../src/assets/images/Polygon.png"
-
-
-export const AccountSettings = () => {
-    return (
-        <div className="account-settings">
-            <h2>Account Settings</h2>
-            <div className="tab">
-               <div className="tab-menu">
-                   <ul>
-                       <li className="active">ACCOUNT INFO/PASSWORD</li>
-                       <li>PRIVACY SETTINGS</li>
-                       <li>ACTIVE SESSIONS</li>
-                   </ul>
-               </div>
-                <div className="tab-content">
-                    <div className="account-info">
-
-                    </div>
-                    <div className="privacy">
-                        <p>
-                            Please note: Opting Out here doesn’t mean you’ll be removed
-                            from that Brand’s mailing list outside of Restless Nites
-                            – just from communications inside our site. You’ll have
-                            to contact them directly to break ties further.
-                        </p>
-                        <div className="pr-settings">
-                            <div className="pr-settings-item">
-                                <div className="item-name">
-                                    <img src={Icon} alt="Icon"/>
-                                    <span>Das Bunker</span>
-                                </div>
-                                <div className="item-box">
-                                    <span>Opt In?</span>
-                                    <label className="checkbox-block">
-                                        <input type="checkbox" />
-                                        <span className="checkmark" />
-                                    </label>
-                                </div>
-                            </div>
-                            <div className="pr-settings-item">
-                                <div className="item-name">
-                                    <img src={Icon} alt="Icon"/>
-                                    <span>Das Bunker</span>
-                                </div>
-                                <div className="item-box">
-                                    <span>Opt In?</span>
-                                    <label className="checkbox-block">
-                                        <input type="checkbox" />
-                                        <span className="checkmark" />
-                                    </label>
-                                </div>
-                            </div>
-                            <div className="pr-settings-item">
-                                <div className="item-name">
-                                    <img src={Icon} alt="Icon"/>
-                                    <span>Das Bunker</span>
-                                </div>
-                                <div className="item-box">
-                                    <span>Opt In?</span>
-                                    <label className="checkbox-block">
-                                        <input type="checkbox" />
-                                        <span className="checkmark" />
-                                    </label>
-                                </div>
-                            </div>
-                            <div className="pr-settings-item">
-                                <div className="item-name">
-                                    <img src={Icon} alt="Icon"/>
-                                    <span>Das Bunker</span>
-                                </div>
-                                <div className="item-box">
-                                    <span>Opt In?</span>
-                                    <label className="checkbox-block">
-                                        <input type="checkbox" />
-                                        <span className="checkmark" />
-                                    </label>
-                                </div>
-                            </div>
-                            <div className="pr-settings-item">
-                                <div className="item-name">
-                                    <img src={Icon} alt="Icon"/>
-                                    <span>Das Bunker</span>
-                                </div>
-                                <div className="item-box">
-                                    <span>Opt In?</span>
-                                    <label className="checkbox-block">
-                                        <input type="checkbox" />
-                                        <span className="checkmark" />
-                                    </label>
-                                </div>
-                            </div>
-                            <div className="pr-settings-item">
-                                <div className="item-name">
-                                    <img src={Icon} alt="Icon"/>
-                                    <span>Das Bunker</span>
-                                </div>
-                                <div className="item-box">
-                                    <span>Opt In?</span>
-                                    <label className="checkbox-block">
-                                        <input type="checkbox" />
-                                        <span className="checkmark" />
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="sessions">
-                       <div className="sessions-item">
-                           <div className="sessions-info">
-                               <span>Apple – Los Angeles, United States</span>
-                               <span>Chrome – Current session</span>
-                           </div>
-                           <button>
-                               Log Out
-                           </button>
-                       </div>
-                        <div className="sessions-item">
-                            <div className="sessions-info">
-                                <span>Apple – Los Angeles, United States</span>
-                                <span>Chrome – Current session</span>
-                            </div>
-                            <button>
-                                Log Out
-                            </button>
-                        </div>
-                        <div className="sessions-item">
-                            <div className="sessions-info">
-                                <span>Apple – Los Angeles, United States</span>
-                                <span>Chrome – Current session</span>
-                            </div>
-                            <button>
-                                Log Out
-                            </button>
-                        </div>
-                        <div className="sessions-item">
-                            <div className="sessions-info">
-                                <span>Apple – Los Angeles, United States</span>
-                                <span>Chrome – Current session</span>
-                            </div>
-                            <button>
-                                Log Out
-                            </button>
-                        </div>
-                        <div className="sessions-item">
-                            <div className="sessions-info">
-                                <span>Apple – Los Angeles, United States</span>
-                                <span>Chrome – Current session</span>
-                            </div>
-                            <button>
-                                Log Out
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}