payme price calculation update on modal

src/features/modals/paymentModal/ui/Paymebutton.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { PaymentStatus } from '../lib/types';
+import { useTranslations } from 'next-intl';
+
+// ─── Payme Logo SVG ────────────────────────────────────────────────────────────
+
+const PaymeLogo: React.FC = () => (
+  <svg
+    width="72"
+    height="18"
+    viewBox="0 0 72 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label="Payme"
+  >
+    <text
+      x="0"
+      y="14"
+      fontFamily="'Arial Black', sans-serif"
+      fontWeight="900"
+      fontSize="16"
+      fill="white"
+      letterSpacing="-0.5"
+    >
+      Payme
+    </text>
+  </svg>
+);
+
+// ─── Spinner ───────────────────────────────────────────────────────────────────
+
+const Spinner: React.FC = () => (
+  <svg
+    className="animate-spin h-5 w-5 text-white"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+    />
+  </svg>
+);
+
+// ─── PaymeButton ───────────────────────────────────────────────────────────────
+
+interface PaymeButtonProps {
+  onClick: () => void;
+  status: PaymentStatus;
+}
+
+export const PaymeButton: React.FC<PaymeButtonProps> = ({
+  onClick,
+  status,
+}) => {
+  const isLoading = status === 'loading';
+  const t = useTranslations('Payment');
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={isLoading}
+      aria-busy={isLoading}
+      aria-label={t('payButton')}
+      className={`
+        w-full flex items-center justify-center gap-3
+        rounded-xl px-6 py-4
+        font-semibold text-white text-sm tracking-wide
+        transition-all duration-200 ease-out
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500
+        ${
+          isLoading
+            ? 'bg-blue-400 cursor-not-allowed opacity-80'
+            : 'bg-[#00AAFF] hover:bg-[#009AEE] active:scale-[0.98] shadow-md hover:shadow-lg'
+        }
+      `}
+    >
+      {isLoading ? (
+        <>
+          <Spinner />
+          <span>{t('connecting')}</span>
+        </>
+      ) : (
+        <>
+          <PaymeLogo />
+        </>
+      )}
+    </button>
+  );
+};