feat: add yandex metric, smartlook manage, add payment buttons

src/components/StripePage/ApplePayButton/index.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import {
+  PaymentRequestButtonElement,
+  useStripe,
+  useElements,
+} from "@stripe/react-stripe-js";
+import { PaymentRequest } from "@stripe/stripe-js";
+import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
+import { useAuth } from "@/auth";
+import { useApi } from "@/api";
+import styles from "./styles.module.css";
+
+interface ApplePayButtonProps {
+  activeSubPlan: ISubscriptionPlan | null;
+}
+
+function ApplePayButton({ activeSubPlan }: ApplePayButtonProps) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const api = useApi();
+  const { token } = useAuth();
+  const [paymentRequest, setPaymentRequest] = useState<PaymentRequest | null>(
+    null
+  );
+//   const [test, setTest] = useState<string>("");
+
+  const getAmountFromSubPlan = (subPlan: ISubscriptionPlan) => {
+    if (subPlan.trial) {
+      return subPlan.trial.price_cents;
+    }
+    return subPlan.price_cents;
+  };
+
+  useEffect(() => {
+    if (!stripe || !elements || !activeSubPlan) {
+      return;
+    }
+
+    const pr = stripe.paymentRequest({
+      country: "US",
+      currency: "usd",
+      total: {
+        label: activeSubPlan.name || "Subscription",
+        amount: getAmountFromSubPlan(activeSubPlan),
+      },
+      requestPayerName: true,
+      requestPayerEmail: true,
+    });
+    console.log("paymentRequest: ", pr);
+
+    // Check the availability of the Payment Request API.
+    pr.canMakePayment().then((result) => {
+      console.log("canMakePayment: ", result);
+    //   setTest("canMakePayment: " + JSON.stringify(result));
+
+      if (result) {
+        setPaymentRequest(pr);
+      }
+    });
+
+    pr.on("paymentmethod", async (e) => {
+      //   const { error: backendError, clientSecret } = await fetch(
+      //     "/create-payment-intent",
+      //     {
+      //       method: "POST",
+      //       headers: {
+      //         "Content-Type": "application/json",
+      //       },
+      //       body: JSON.stringify({
+      //         paymentMethodType: "card",
+      //         currency: "usd",
+      //       }),
+      //     }
+      //   ).then((r) => r.json());
+
+      const { subscription_receipt } = await api.createSubscriptionReceipt({
+        token,
+        way: "stripe",
+        subscription_receipt: {
+          sub_plan_id: activeSubPlan?.id || "stripe.7",
+        },
+      });
+      const { client_secret } = subscription_receipt.data;
+
+      if (!subscription_receipt) {
+        return;
+      }
+
+      const { error: stripeError } = await stripe.confirmCardPayment(
+        client_secret,
+        {
+          payment_method: e.paymentMethod.id,
+        },
+        { handleActions: false }
+      );
+
+      if (stripeError) {
+        // Show error to your customer (e.g., insufficient funds)
+        return;
+      }
+
+      // Show a success message to your customer
+      // There's a risk of the customer closing the window before callback
+      // execution. Set up a webhook or plugin to listen for the
+      // payment_intent.succeeded event that handles any business critical
+      // post-payment actions.
+    });
+  }, [stripe, elements, activeSubPlan, api, token]);
+
+  return (
+    <>
+      {/* {test} */}
+      {paymentRequest && (
+        <PaymentRequestButtonElement
+          className={styles["stripe-element"]}
+          options={{ paymentRequest }}
+        />
+      )}
+    </>
+  );
+}
+
+export default ApplePayButton;

src/components/StripePage/ApplePayButton/styles.module.css

@@ -0,0 +1,4 @@
+.stripe-element {
+  width: 100%;
+  max-width: 300px;
+}

src/components/StripePage/index.tsx

@@ -11,6 +11,7 @@ import { selectors } from "@/store";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import SubPlanInformation from "../SubPlanInformation";
+import ApplePayButton from "./ApplePayButton";
 
 export function StripePage(): JSX.Element {
   const api = useApi();
@@ -25,6 +26,16 @@ export function StripePage(): JSX.Element {
     navigate(routes.client.priceList());
   }
 
+  // const appleReceipt = async () => {
+  //   const { subscription_receipt } = await api.createSubscriptionReceipt({
+  //     token,
+  //     receiptData: "",
+  //     autorenewable: true,
+  //     sandbox: true,
+  //   });
+  //   console.log(subscription_receipt);
+  // };
+
   useEffect(() => {
     (async () => {
       const siteConfig = await api.getAppConfig({ bundleId: "auraweb" });
@@ -63,7 +74,10 @@ export function StripePage(): JSX.Element {
       {stripePromise && clientSecret && (
         <Elements stripe={stripePromise} options={{ clientSecret }}>
           <CheckoutForm>
-            {activeSubPlan && <SubPlanInformation subPlan={activeSubPlan} />}
+            <>
+              <ApplePayButton activeSubPlan={activeSubPlan} />
+              {activeSubPlan && <SubPlanInformation subPlan={activeSubPlan} />}
+            </>
           </CheckoutForm>
         </Elements>
       )}