diff --git a/index.html b/index.html index 2d0d1da..e1616df 100755 --- a/index.html +++ b/index.html @@ -89,7 +89,6 @@ Aura - Energy of your Horoscope - diff --git a/package-lock.json b/package-lock.json index 7dc1d88..7dc0036 100755 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "name": "aurawebapp", "version": "0.0.0", "dependencies": { - "@chargebee/chargebee-js-react-wrapper": "^0.6.3", "@reduxjs/toolkit": "^1.9.5", "@smakss/react-scroll-direction": "^4.0.4", "@stripe/react-stripe-js": "^2.3.1", @@ -30,7 +29,6 @@ "unique-names-generator": "^4.7.1" }, "devDependencies": { - "@chargebee/chargebee-js-types": "^1.0.1", "@types/node": "^20.5.1", "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", @@ -417,21 +415,6 @@ "node": ">=6.9.0" } }, - "node_modules/@chargebee/chargebee-js-react-wrapper": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@chargebee/chargebee-js-react-wrapper/-/chargebee-js-react-wrapper-0.6.3.tgz", - "integrity": "sha512-U3KJLZZiUxxkW4HAkAZr2bs6r4HqL1S59zo3AAp4UYtJZbxmBpfX5e/MlsSENvsRxd2GvOpumcHr8rR4V0D5vw==", - "peerDependencies": { - "react": "^18.0.0 || ^17.0.0", - "react-dom": "^18.0.0 || ^17.0.0" - } - }, - "node_modules/@chargebee/chargebee-js-types": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@chargebee/chargebee-js-types/-/chargebee-js-types-1.0.1.tgz", - "integrity": "sha512-JsHlIAjZDwX2Q/vDGN4xzKRC8n1K4xCwzKl7wZOOwUH9ow030CRspVRkP3OWHrY5gLmpbmICc/iK2aptF3t/Ow==", - "dev": true - }, "node_modules/@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -3865,18 +3848,6 @@ "to-fast-properties": "^2.0.0" } }, - "@chargebee/chargebee-js-react-wrapper": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@chargebee/chargebee-js-react-wrapper/-/chargebee-js-react-wrapper-0.6.3.tgz", - "integrity": "sha512-U3KJLZZiUxxkW4HAkAZr2bs6r4HqL1S59zo3AAp4UYtJZbxmBpfX5e/MlsSENvsRxd2GvOpumcHr8rR4V0D5vw==", - "requires": {} - }, - "@chargebee/chargebee-js-types": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@chargebee/chargebee-js-types/-/chargebee-js-types-1.0.1.tgz", - "integrity": "sha512-JsHlIAjZDwX2Q/vDGN4xzKRC8n1K4xCwzKl7wZOOwUH9ow030CRspVRkP3OWHrY5gLmpbmICc/iK2aptF3t/Ow==", - "dev": true - }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", diff --git a/package.json b/package.json index 03a0ec7..eedc075 100755 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "preview": "vite preview" }, "dependencies": { - "@chargebee/chargebee-js-react-wrapper": "^0.6.3", "@reduxjs/toolkit": "^1.9.5", "@smakss/react-scroll-direction": "^4.0.4", "@stripe/react-stripe-js": "^2.3.1", @@ -32,7 +31,6 @@ "unique-names-generator": "^4.7.1" }, "devDependencies": { - "@chargebee/chargebee-js-types": "^1.0.1", "@types/node": "^20.5.1", "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", diff --git a/src/api/api.ts b/src/api/api.ts index 3143f8b..ca2c811 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -13,7 +13,6 @@ import { SubscriptionCheckout, SubscriptionReceipts, SubscriptionStatus, - PaymentIntents, AICompatCategories, AICompats, AIRequests, @@ -50,7 +49,6 @@ const api = { getSubscriptionStatus: createMethod(SubscriptionStatus.createRequest), getSubscriptionReceipt: createMethod(SubscriptionReceipts.createGetRequest), createSubscriptionReceipt: createMethod(SubscriptionReceipts.createRequest), - createPaymentIntent: createMethod(PaymentIntents.createRequest), getAiCompatCategories: createMethod(AICompatCategories.createRequest), getAiCompat: createMethod(AICompats.createRequest), getAiRequest: createMethod(AIRequests.createRequest), diff --git a/src/api/resources/Apps.ts b/src/api/resources/Apps.ts index de4c19f..03c5e7c 100644 --- a/src/api/resources/Apps.ts +++ b/src/api/resources/Apps.ts @@ -13,7 +13,6 @@ export interface Response { active_iaps: ActiveIAps[] version: string apple_music_api: AppleMusicApi - chargebee: ChargebeeConfig first_open_subscription_popup: boolean runs_before_subscription_popup: number appirater_alerts: AppiraterAlertAppiraterAlert[] @@ -53,12 +52,6 @@ export interface AppleMusicApi { jwt: string } -export interface ChargebeeConfig { - site: string - publishableKey: string - gatewayAccountId: string -} - export const createRequest = ({ bundleId }: Payload): Request => { const url = new URL(routes.server.apps(bundleId)) return new Request(url, { method: 'GET', headers: getBaseHeaders() }) diff --git a/src/api/resources/UserPaymentIntents.ts b/src/api/resources/UserPaymentIntents.ts deleted file mode 100644 index c20ab27..0000000 --- a/src/api/resources/UserPaymentIntents.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { PaymentIntent } from '@chargebee/chargebee-js-types' -import { AuthPayload } from '../types' -import { getAuthHeaders } from '../utils' -import routes from '@/routes' - -export interface Payload extends AuthPayload { - paymentMethod: PaymentMethod - currencyCode: CurrencyCode -} - -export interface Response { - payment_intent: PaymentIntent - customer: Customer -} - -export type PaymentMethod = 'apple_pay' | 'google_pay' | 'card' -export type CurrencyCode = 'USD' - -export interface Customer { - id: string - email: string - auto_collection: 'on' | 'off' - net_term_days: number - allow_direct_debit: boolean - taxability: 'taxable' | 'exempt' - created_at: number - updated_at: number - pii_cleared: 'active' | 'scheduled_for_clear' | 'cleared' - channel: 'web' | 'app_store' | 'play_store' - resource_version: number - deleted: boolean - card_status: 'no_card' | 'valid' | 'expiring' | 'expired' - promotional_credits: number - refundable_credits: number - excess_payments: number - unbilled_charges: number - preferred_currency_code: CurrencyCode -} - -export const createRequest = ({ token, paymentMethod, currencyCode }: Payload): Request => { - const url = new URL(routes.server.paymentIntents()) - const body = JSON.stringify({ - payment_intent: { - payment_method_type: paymentMethod, - currency_code: currencyCode, - } - }) - return new Request(url, { method: 'POST', headers: getAuthHeaders(token), body }) -} diff --git a/src/api/resources/UserSubscriptionReceipts.ts b/src/api/resources/UserSubscriptionReceipts.ts index 8d5611d..906a9b1 100644 --- a/src/api/resources/UserSubscriptionReceipts.ts +++ b/src/api/resources/UserSubscriptionReceipts.ts @@ -6,12 +6,6 @@ export interface GetPayload extends AuthPayload { id: string; } -export interface ChargebeeReceiptPayload extends AuthPayload { - itemPriceId: string; - gwToken: string; - referenceId?: string; -} - export interface AppleReceiptPayload extends AuthPayload { receiptData: string; autorenewable?: boolean; @@ -33,7 +27,6 @@ export interface PayPalReceiptPayload extends AuthPayload { } export type Payload = - | ChargebeeReceiptPayload | AppleReceiptPayload | StripeReceiptPayload | PayPalReceiptPayload; @@ -78,12 +71,6 @@ interface IPayPalLink { method: "GET" | "PATCH"; } -function createRequest({ - token, - itemPriceId, - gwToken, - referenceId, -}: ChargebeeReceiptPayload): Request; function createRequest({ token, receiptData, @@ -104,16 +91,6 @@ function createRequest(payload: Payload): Request { } function getDataPayload(payload: Payload) { - if ("itemPriceId" in payload && "gwToken" in payload) { - return { - way: "chargebee", - subscription_receipt: { - item_price_id: payload.itemPriceId, - gw_token: payload.gwToken, - reference_id: payload.referenceId, - }, - }; - } if ("receiptData" in payload) { return { way: "apple", diff --git a/src/api/resources/index.ts b/src/api/resources/index.ts index 2f721e5..32faca6 100644 --- a/src/api/resources/index.ts +++ b/src/api/resources/index.ts @@ -11,7 +11,6 @@ export * as SubscriptionItems from "./UserSubscriptionItemPrices"; export * as SubscriptionCheckout from "./UserSubscriptionCheckout"; export * as SubscriptionStatus from "./UserSubscriptionStatus"; export * as SubscriptionReceipts from "./UserSubscriptionReceipts"; -export * as PaymentIntents from "./UserPaymentIntents"; export * as AICompatCategories from "./AICompatCategories"; export * as AICompats from "./AICompats"; export * as AIRequests from "./AIRequests"; diff --git a/src/components/PaymentPage/index.tsx b/src/components/PaymentPage/index.tsx index 6720ba5..214ee76 100644 --- a/src/components/PaymentPage/index.tsx +++ b/src/components/PaymentPage/index.tsx @@ -1,74 +1,15 @@ -import { usePayment } from "@/payment"; import routes from "@/routes"; import { selectors } from "@/store"; -import { useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import Header from "../Header"; import Loader from "../Loader"; -import Title from "../Title"; import UserHeader from "../UserHeader"; -import ErrorModal from "./ErrorModal"; -import { ApplePayBanner, GooglePayBanner } from "./methods"; -import { StripeButton } from "./methods/Stripe"; -import secure from "./secure.png"; import "./styles.css"; -// import { PayPalButton } from "./methods/PayPal/Button"; -// import { useAuth } from "@/auth"; -// import { useApi } from "@/api"; -// import { PayPalReceiptPayload } from "@/api/resources/UserSubscriptionReceipts"; -import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; - -const getPrice = (activeSubPlan: ISubscriptionPlan | null) => { - if (!activeSubPlan) return 0; - return String( - activeSubPlan?.trial?.price_cents - ? activeSubPlan.trial.price_cents / 100 - : 0 - ); -}; function PaymentPage(): JSX.Element { - const { t } = useTranslation(); - const { applePay } = usePayment(); - // const api = useApi(); - // const { token } = useAuth(); - const [openErrorModal, setOpenErrorModal] = useState(false); const navigate = useNavigate(); - const isLoading = applePay === null; - const isApplePayAvailable = - import.meta.env.PROD && applePay?.canMakePayments(); const email = useSelector(selectors.selectEmail); - const activeSubPlan = useSelector(selectors.selectActiveSubPlan); - - // Do not allow to go to this page if there is no other payment methods - useEffect(() => { - // Have only Stripe for now - navigate(routes.client.paymentStripe()); - }, []); - - const navigateToStripe = () => { - navigate(routes.client.paymentStripe()); - }; - - // const navigateToPayPal = async () => { - // const { subscription_receipt } = await api.createSubscriptionReceipt({ - // token, - // itemInterval: "year", - // way: "paypal", - // subscription_receipt: { - // sub_plan_id: activeSubPlan?.id || "", - // }, - // } as PayPalReceiptPayload); - // const url = subscription_receipt.data.links?.find( - // (link) => link.rel === "approve" - // )?.href; - // if (!url?.length) { - // return setOpenErrorModal(true); - // } - // window.location.href = url; - // }; return ( <> @@ -78,38 +19,7 @@ function PaymentPage(): JSX.Element { />
- {isLoading ? ( - - ) : ( - <> -
- {isApplePayAvailable ? : } - 100% Secure -
- - {t("choose_payment")} - -
- {/* */} - -
-

- {t("will_be_charged", { - strongText: ( - - {t("trial_price", { - price: getPrice(activeSubPlan || null), - })} - - ), - })} -

- setOpenErrorModal(false)} - /> - - )} +
); diff --git a/src/components/PaymentPage/methods/ApplePay/Apple-Pay.png b/src/components/PaymentPage/methods/ApplePay/Apple-Pay.png deleted file mode 100644 index 2e7c7dd..0000000 Binary files a/src/components/PaymentPage/methods/ApplePay/Apple-Pay.png and /dev/null differ diff --git a/src/components/PaymentPage/methods/ApplePay/Banner.tsx b/src/components/PaymentPage/methods/ApplePay/Banner.tsx deleted file mode 100644 index 20b889d..0000000 --- a/src/components/PaymentPage/methods/ApplePay/Banner.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import applePaySafeCheckout from './Apple-Pay.png' - -export function ApplePayBanner (): JSX.Element { - return Guaranteed safe checkout -} diff --git a/src/components/PaymentPage/methods/ApplePay/Button.tsx b/src/components/PaymentPage/methods/ApplePay/Button.tsx deleted file mode 100644 index e062afa..0000000 --- a/src/components/PaymentPage/methods/ApplePay/Button.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useCallback, useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' -import { PaymentIntent } from '@chargebee/chargebee-js-types' -import { useApi, useApiCall, extractErrorMessage, SubscriptionReceipts } from '@/api' -import { usePayment, ApplePayButtonOptions } from '@/payment' -import { useAuth } from '@/auth' -import Loader, { LoaderColor } from '@/components/Loader' -import ErrorText from '@/components/ErrorText' - -const currencyCode = 'USD' -const paymentMethod = 'apple_pay' -const buttonId = 'apple-pay-btn' - -interface ApplePayButtonProps { - onSuccess: (receipt: SubscriptionReceipts.SubscriptionReceipt) => void - onError: (error: Error) => void -} - -export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX.Element { - const api = useApi() - const { i18n } = useTranslation() - const { token } = useAuth() - const { applePay } = usePayment() - const [isMounting, setIsMounting] = useState(true) - const loadData = useCallback(() => { - return api.createPaymentIntent({ token, paymentMethod, currencyCode }) - .then(({ payment_intent }) => payment_intent) - }, [api, token]) - const { data, error, isPending } = useApiCall(loadData) - - if (error) console.error(error) - - useEffect(() => { - if (data === null) return - const buttonOptions: ApplePayButtonOptions = { - buttonColor: 'black', - buttonType: 'plain', - locale: i18n.language - } - applePay?.setPaymentIntent(data) - applePay?.mountPaymentButton(`#${buttonId}`, buttonOptions) - .then(() => setIsMounting(false)) - .then(() => applePay?.handlePayment()) - .then((paymentIntent) => { - return api.createSubscriptionReceipt({ - token, receiptData: paymentIntent.id, autorenewable: true, sandbox: true, - }) - }) - .then(({ subscription_receipt }: SubscriptionReceipts.Response) => onSuccess(subscription_receipt)) - .catch((error: Error) => onError(error)) - }, [data, applePay, i18n.language, api, token, onSuccess, onError]) - - return ( -
- {isPending || isMounting ? : null} - {error ? : null} -
- ) -} - -function FakeApplePayButton() { - return ( -
- -
- ) -} diff --git a/src/components/PaymentPage/methods/ApplePay/index.ts b/src/components/PaymentPage/methods/ApplePay/index.ts deleted file mode 100644 index 3818e10..0000000 --- a/src/components/PaymentPage/methods/ApplePay/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Banner' -export * from './Button' diff --git a/src/components/PaymentPage/methods/Card/Button.tsx b/src/components/PaymentPage/methods/Card/Button.tsx deleted file mode 100644 index fe4f8be..0000000 --- a/src/components/PaymentPage/methods/Card/Button.tsx +++ /dev/null @@ -1,18 +0,0 @@ - -import { useTranslation } from 'react-i18next' -import MainButton from '@/components/MainButton' -import card from './card.svg' - -interface CardButtonProps { - onClick: () => void -} - -export function CardButton({ onClick }: CardButtonProps): JSX.Element { - const { t } = useTranslation() - return ( - - Credit / Debit Card - {t('card')} - - ) -} diff --git a/src/components/PaymentPage/methods/Card/Modal.tsx b/src/components/PaymentPage/methods/Card/Modal.tsx deleted file mode 100644 index 7bc7a26..0000000 --- a/src/components/PaymentPage/methods/Card/Modal.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { useCallback, useEffect, useRef, useState, ChangeEvent } from 'react' -import { useTranslation } from 'react-i18next' -import { - CardCVV, CardComponent, CardExpiry, CardNumber, Provider -} from '@chargebee/chargebee-js-react-wrapper' -import ChargebeeComponents from '@chargebee/chargebee-js-react-wrapper/dist/components/ComponentGroup' -import { PaymentIntent } from '@chargebee/chargebee-js-types' -import { usePayment } from '@/payment' -import { useApi, SubscriptionReceipts, useApiCall } from '@/api' -import { useAuth } from '@/auth' -import Modal from '@/components/Modal' -import Title from '@/components/Title' -import MainButton from '@/components/MainButton' -import Loader from '@/components/Loader' -import visa from './visa.svg' -import mastercard from './mastercard.svg' -import amex from './amex.svg' -import diners from './diners.svg' -import discover from './discover.svg' -import { cardStyles } from './styles' - -interface CardModalProps { - open: boolean - onClose: () => void - onSuccess: (receipt: SubscriptionReceipts.SubscriptionReceipt) => void - onError: (error: Error) => void -} - -interface Field { - cardType: string | undefined - complete: boolean - empty: boolean - error: Error | undefined - field: 'number' | 'expiry' | 'cvv' - key: string | undefined - type: string -} - -type Status = 'idle' | 'loading' | 'filling' | 'subscribing' | 'ready' | 'success' | 'error' - -const initCompletedFields = { - number: false, - expiry: false, - cvv: false, -} - -type CompletedFields = typeof initCompletedFields - -const isReady = (fields: CompletedFields) => Object.values(fields).every((complete: boolean) => complete) - -const currencyCode = 'USD' -const paymentMethod = 'card' -const itemPriceId = 'aura-membership-2-week-USD' - -export function CardModal({ open, onClose, onSuccess, onError }: CardModalProps): JSX.Element { - const api = useApi() - const cardRef = useRef(null) - const [status, setStatus] = useState('idle') - const [fields, setFields] = useState(initCompletedFields) - const { token, user } = useAuth() - const { t, i18n } = useTranslation() - const locale = i18n.language - const isInit = status === 'idle' - const isLoading = status === 'loading' - const { chargebee } = usePayment() - const loadData = useCallback(() => { - return api.createPaymentIntent({ token, paymentMethod, currencyCode }) - .then(({ payment_intent }) => payment_intent) - }, [api, token]) - const { data, error } = useApiCall(loadData) - const handleReady = () => setStatus('filling') - const handleClose = () => { - setStatus('loading') - onClose() - } - const handleChange = ({ field, complete, error }: ChangeEvent & Field) => { - setFields((state) => ({ ...state, [field]: complete && !error })) - } - const payWithCard = () => { - if (data === null) return - setStatus('subscribing') - cardRef.current?.authorizeWith3ds(data, { email: user?.email }, {}) - .then((paymentIntent: PaymentIntent) => { - return api.createSubscriptionReceipt({ token, itemPriceId, gwToken: paymentIntent.id }) - }) - .then(({ subscription_receipt }: SubscriptionReceipts.Response) => { - setStatus('success') - onSuccess(subscription_receipt) - }) - .catch((error: Error) => { - setStatus('error') - onError(error) - }) - } - - if (error) console.error(error) - - useEffect(() => { - if (status !== 'filling' && status !== 'ready' && status !== 'error') return - setStatus(isReady(fields) ? 'ready' : 'filling') - }, [fields, status]) - - useEffect(() => { - if (isInit) setStatus('loading') - }, [isInit]) - - return ( - - { isLoading ?
: null} -
-
- {t('card')} -
- Visa Card - Mastercard Card - Amex Card - Diners Card - Discover Card -
-
- - -
-
-
-
-
- - -

{t('charged_only')}

- - { status === 'subscribing' ? : <>{t('start_trial')} } - -
- - ) -} - -function LockIcon(): JSX.Element { - return ( - - - - - ) -} diff --git a/src/components/PaymentPage/methods/Card/amex.svg b/src/components/PaymentPage/methods/Card/amex.svg deleted file mode 100644 index 1fa5c94..0000000 --- a/src/components/PaymentPage/methods/Card/amex.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/PaymentPage/methods/Card/card.svg b/src/components/PaymentPage/methods/Card/card.svg deleted file mode 100644 index 0568eee..0000000 --- a/src/components/PaymentPage/methods/Card/card.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/components/PaymentPage/methods/Card/diners.svg b/src/components/PaymentPage/methods/Card/diners.svg deleted file mode 100644 index 6c050b6..0000000 --- a/src/components/PaymentPage/methods/Card/diners.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/components/PaymentPage/methods/Card/discover.svg b/src/components/PaymentPage/methods/Card/discover.svg deleted file mode 100644 index b9884e8..0000000 --- a/src/components/PaymentPage/methods/Card/discover.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/PaymentPage/methods/Card/index.ts b/src/components/PaymentPage/methods/Card/index.ts deleted file mode 100644 index 794d8c4..0000000 --- a/src/components/PaymentPage/methods/Card/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Button' -export * from './Modal' diff --git a/src/components/PaymentPage/methods/Card/mastercard.svg b/src/components/PaymentPage/methods/Card/mastercard.svg deleted file mode 100644 index 0f02395..0000000 --- a/src/components/PaymentPage/methods/Card/mastercard.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/components/PaymentPage/methods/Card/styles.ts b/src/components/PaymentPage/methods/Card/styles.ts deleted file mode 100644 index 6af1925..0000000 --- a/src/components/PaymentPage/methods/Card/styles.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const cardStyles = { - base: { - color: '#121620', - lineHeight: '18px', - fontSize: '16px', - fontWeight: '400', - fontFamily: 'SF Pro Text, system-ui, sans-serif', - '::placeholder': { - color: '#8E8E93', - } - }, - invalid: { - color: '#FF5758', - }, - empty: { - fontWeight: '400', - }, -} diff --git a/src/components/PaymentPage/methods/Card/visa.svg b/src/components/PaymentPage/methods/Card/visa.svg deleted file mode 100644 index 3efb559..0000000 --- a/src/components/PaymentPage/methods/Card/visa.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/PaymentPage/methods/GooglePay/Banner.tsx b/src/components/PaymentPage/methods/GooglePay/Banner.tsx deleted file mode 100644 index af82d77..0000000 --- a/src/components/PaymentPage/methods/GooglePay/Banner.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import gPaySafeCheckout from './Google-Pay.png' - -export function GooglePayBanner(): JSX.Element { - return Guaranteed safe checkout -} diff --git a/src/components/PaymentPage/methods/GooglePay/Button.tsx b/src/components/PaymentPage/methods/GooglePay/Button.tsx deleted file mode 100644 index cf9a8a9..0000000 --- a/src/components/PaymentPage/methods/GooglePay/Button.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useCallback, useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' -import { PaymentIntent } from '@chargebee/chargebee-js-types' -import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '@/api' -import { usePayment, GooglePayButtonOptions } from '@/payment' -import { useAuth } from '@/auth' -import Loader, { LoaderColor } from '@/components/Loader' -import ErrorText from '@/components/ErrorText' - -const currencyCode = 'USD' -const paymentMethod = 'google_pay' -const buttonId = 'google-pay-btn' - -interface GooglePayButtonProps { - onSuccess: (receipt: SubscriptionReceipts.SubscriptionReceipt) => void - onError: (error: Error) => void -} - -export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): JSX.Element { - const api = useApi() - const { i18n } = useTranslation() - const { token } = useAuth() - const { googlePay } = usePayment() - const [isMounting, setIsMounting] = useState(true) - const loadData = useCallback(() => { - return api.createPaymentIntent({ token, paymentMethod, currencyCode }) - .then(({ payment_intent }) => payment_intent) - }, [api, token]) - const { data, error, isPending } = useApiCall(loadData) - - if (error) console.error(error) - - useEffect(() => { - if (data === null) return - const buttonOptions: GooglePayButtonOptions = { - buttonColor: 'black', - buttonType: 'plain', - buttonLocale: i18n.language, - buttonSizeMode: 'fill', - } - googlePay?.setPaymentIntent(data) - googlePay?.mountPaymentButton(`#${buttonId}`, buttonOptions) - .then(() => setIsMounting(false)) - .then(() => googlePay?.handlePayment()) - .then((result) => { - console.log('Success payment by GooglePay', result) - // TODO: implement api.createSubscriptionReceipt for GooglePay - }) - .then(() => onSuccess({} as SubscriptionReceipts.SubscriptionReceipt)) - .catch((error: Error) => onError(error)) - }, [data, googlePay, i18n.language, onSuccess, onError]) - - return ( -
- {isPending || isMounting ? : null} - {error ? : null} -
- ) -} - -function FakeGPayButton() { - return ( -
- -
- ) -} diff --git a/src/components/PaymentPage/methods/GooglePay/Google-Pay.png b/src/components/PaymentPage/methods/GooglePay/Google-Pay.png deleted file mode 100644 index 7973303..0000000 Binary files a/src/components/PaymentPage/methods/GooglePay/Google-Pay.png and /dev/null differ diff --git a/src/components/PaymentPage/methods/GooglePay/dark_gpay.svg b/src/components/PaymentPage/methods/GooglePay/dark_gpay.svg deleted file mode 100644 index 8979835..0000000 --- a/src/components/PaymentPage/methods/GooglePay/dark_gpay.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/PaymentPage/methods/GooglePay/index.ts b/src/components/PaymentPage/methods/GooglePay/index.ts deleted file mode 100644 index 3818e10..0000000 --- a/src/components/PaymentPage/methods/GooglePay/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Banner' -export * from './Button' diff --git a/src/components/PaymentPage/methods/index.ts b/src/components/PaymentPage/methods/index.ts deleted file mode 100644 index e343ee4..0000000 --- a/src/components/PaymentPage/methods/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './ApplePay' -export * from './GooglePay' -export * from './Card' diff --git a/src/components/PaymentPage/styles.css b/src/components/PaymentPage/styles.css index 89be04d..1e943cb 100644 --- a/src/components/PaymentPage/styles.css +++ b/src/components/PaymentPage/styles.css @@ -44,10 +44,6 @@ letter-spacing: 0.0008em; } -.payment-chargebee { - width: 100%; -} - .payment-card-list { display: flex; justify-content: space-between; diff --git a/src/components/SubPlanInformation/index.tsx b/src/components/SubPlanInformation/index.tsx index 3e42867..7e1f270 100644 --- a/src/components/SubPlanInformation/index.tsx +++ b/src/components/SubPlanInformation/index.tsx @@ -2,7 +2,6 @@ import { useTranslation } from "react-i18next"; import styles from "./styles.module.css"; import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import TotalToday from "./TotalToday"; -// import ApplePayButton from "../StripePage/ApplePayButton"; import MainButton from "../MainButton"; import { useApi } from "@/api"; import { useAuth } from "@/auth"; diff --git a/src/init.tsx b/src/init.tsx index c8573fb..33318eb 100755 --- a/src/init.tsx +++ b/src/init.tsx @@ -8,7 +8,6 @@ import { store } from "./store"; import { AuthProvider } from "./auth"; import { ApiContext, createApi } from "./api"; import { LegalContext, buildLegal } from "./legal"; -import { PaymentContext } from "./payment"; import { getClientLocale, buildResources, fallbackLng } from "./locales"; import App from "./components/App"; @@ -35,7 +34,6 @@ const init = async () => { .use(initReactI18next) .use(new ReactPostprocessor()) .init(options); - window.Chargebee.init(config.chargebee); const isProduction = import.meta.env.MODE === "production"; @@ -72,11 +70,7 @@ const init = async () => { - - - + diff --git a/src/payment/PaymentContext.ts b/src/payment/PaymentContext.ts deleted file mode 100644 index cb406b2..0000000 --- a/src/payment/PaymentContext.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createContext } from 'react' -import { ChargebeeInstance } from '@chargebee/chargebee-js-types' - -export const PaymentContext = createContext({} as ChargebeeInstance) diff --git a/src/payment/index.ts b/src/payment/index.ts deleted file mode 100644 index 7258f41..0000000 --- a/src/payment/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './PaymentContext' -export * from './usePayment' -export * from './types' diff --git a/src/payment/types.ts b/src/payment/types.ts deleted file mode 100644 index 36398ef..0000000 --- a/src/payment/types.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { PaymentIntent } from '@chargebee/chargebee-js-types' - -interface Handler { - handlePayment: () => Promise - setPaymentIntent: (paymentIntent: PaymentIntent) => void -} - -export interface GooglePayButtonOptions { - buttonColor: 'default' | 'black' | 'white' - buttonType: 'long' | 'short' | 'book' | 'buy' | 'checkout' | 'donate' | 'order' | 'pay' | 'plain' | 'subscribe' - buttonSizeMode: 'static' | 'fill' - buttonLocale: string -} - -export interface PaymentOptions { - requestPayerEmail: boolean - requestBillingAddress: boolean - requestShippingAddress: boolean -} - -export interface ApplePayButtonOptions { - locale: string - buttonColor: 'black' | 'white' | 'white-outline' - buttonType: 'add-money' | 'book' | 'buy' | 'check-out' | 'continue' | 'contribute' | 'donate' | 'order' | 'pay' | 'plain' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up' -} - -interface ApplePay extends Handler { - canMakePayments: () => boolean - mountPaymentButton: (selector: string, options?: ApplePayButtonOptions) => Promise -} - -interface GooglePay extends Handler { - getPaymentIntent: () => PaymentIntent - updatePaymentIntent: (paymentIntent: PaymentIntent) => void - mountPaymentButton: ( - selector: string, - buttonOptions?: GooglePayButtonOptions, - paymentOptions?: PaymentOptions - ) => Promise -} - -export type ApplePayHandler = ApplePay | null -export type GooglePayHandler = GooglePay | null diff --git a/src/payment/usePayment.ts b/src/payment/usePayment.ts deleted file mode 100644 index c8af806..0000000 --- a/src/payment/usePayment.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useContext, useEffect, useState } from 'react' -import { PaymentContext } from './PaymentContext' -import { ApplePayHandler, GooglePayHandler } from './types' - -export const usePayment = () => { - const chargebee = useContext(PaymentContext) - const [googlePay, setGooglePay] = useState(null) - const [applePay, setApplePay] = useState(null) - - useEffect(() => { - Promise.all([ - chargebee.load('google-pay'), - chargebee.load('apple-pay'), - ]).then(([googlePay, applePay]) => { - setGooglePay(googlePay) - setApplePay(applePay) - }) - }, [chargebee]) - - return { chargebee, googlePay, applePay } -} diff --git a/src/types.ts b/src/types.ts index e124ca4..c664802 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,11 +1,3 @@ -import { Chargebee } from "@chargebee/chargebee-js-types"; - -declare global { - interface Window { - Chargebee: typeof Chargebee; - } -} - export enum EDirectionOnboarding { LEFT = "left", RIGHT = "right",