feat: better biling

Author: nevo-david

apps/frontend/src/components/billing/embedded.billing.tsx

@@ -120,16 +120,20 @@ const FormWrapper: FC<{ showCoupon?: boolean; autoApplyCoupon?: string }> = ({
 
   return (
     <form onSubmit={handleSubmit} className="flex flex-col flex-1">
-      <StripeInputs showCoupon={showCoupon} autoApplyCoupon={autoApplyCoupon} />
-      <SubmitBar loading={loading} />
+      <StripeInputs
+        showCoupon={showCoupon}
+        autoApplyCoupon={autoApplyCoupon}
+        loading={loading}
+      />
     </form>
   );
 };
 
-const StripeInputs: FC<{ showCoupon: boolean; autoApplyCoupon?: string }> = ({
-  showCoupon,
-  autoApplyCoupon,
-}) => {
+const StripeInputs: FC<{
+  showCoupon: boolean;
+  autoApplyCoupon?: string;
+  loading: boolean;
+}> = ({ showCoupon, autoApplyCoupon, loading }) => {
   const checkout = useCheckout();
   const t = useT();
   const [ready, setReady] = useState(false);
@@ -147,8 +151,16 @@ const StripeInputs: FC<{ showCoupon: boolean; autoApplyCoupon?: string }> = ({
         <h4 className="mt-[40px] mb-[32px] text-[24px] font-[700]">
           {checkout.type === 'loading' ? '' : t('billing_payment', 'Payment')}
         </h4>
-        <PaymentElement id="payment-element" options={{ layout: 'tabs' }} onReady={() => setReady(true)} />
-        {showCoupon && ready && <CouponInput autoApplyCoupon={autoApplyCoupon} />}
+        <PaymentElement
+          id="payment-element"
+          options={{ layout: 'tabs' }}
+          onReady={() => setReady(true)}
+        />
+        {ready && <PriceBreakdown />}
+        {showCoupon && ready && (
+          <CouponInput autoApplyCoupon={autoApplyCoupon} />
+        )}
+        {ready && <SubmitBar loading={loading} />}
         {checkout.type === 'loading' ? null : (
           <div className="mt-[24px] text-[16px] font-[600] flex gap-[4px] items-center">
             <div>
@@ -176,6 +188,119 @@ const StripeInputs: FC<{ showCoupon: boolean; autoApplyCoupon?: string }> = ({
   );
 };
 
+const PriceBreakdown: FC = () => {
+  const checkoutState = useCheckout();
+  const t = useT();
+
+  if (checkoutState.type !== 'success') {
+    return null;
+  }
+
+  const { checkout } = checkoutState;
+  const lineItem = checkout?.lineItems?.[0];
+  const recurring = checkout?.recurring;
+  const discountAmounts = checkout?.discountAmounts;
+  const hasDiscount = discountAmounts && discountAmounts.length > 0;
+
+  // Get values
+  const planName = lineItem?.name || t('billing_subscription', 'Subscription');
+  const unitAmount = lineItem?.unitAmount?.amount || '$0.00';
+  const discountDisplay = hasDiscount ? discountAmounts[0] : null;
+  const dueToday = checkout?.total?.total?.amount || '$0.00';
+  const nextBillingTotal = recurring?.dueNext?.total?.amount;
+  const nextBillingDate = recurring?.trial?.trialEnd
+    ? dayjs(recurring.trial.trialEnd * 1000).format('MMMM D, YYYY')
+    : null;
+  const billingInterval =
+    recurring?.interval === 'month'
+      ? t('billing_monthly', 'Monthly')
+      : t('billing_yearly', 'Yearly');
+
+  return (
+    <div className="mt-[40px]">
+      <h4 className="mb-[16px] text-[24px] font-[700]">
+        {t('billing_order_summary', 'Order Summary')}
+      </h4>
+      <div className="rounded-[12px] border border-newColColor p-[20px] flex flex-col gap-[12px]">
+        {/* Plan */}
+        <div className="flex justify-between items-center">
+          <div className="flex flex-col">
+            <span className="font-[600] text-textColor">{planName}</span>
+            <span className="text-[13px] text-textColor/60">
+              {billingInterval}
+            </span>
+          </div>
+          <span className="font-[500] text-textColor">{unitAmount}</span>
+        </div>
+
+        {/* Discount */}
+        {discountDisplay && (
+          <div className="flex justify-between items-center font-[600]">
+            <div className="flex items-center gap-[6px]">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+                <line x1="7" y1="7" x2="7.01" y2="7" />
+              </svg>
+              <span className="font-[500]">
+                {discountDisplay.displayName || discountDisplay.promotionCode}
+                {discountDisplay.percentOff &&
+                  ` (${discountDisplay.percentOff}% off)`}
+              </span>
+            </div>
+            <span className="font-[500]">
+              {discountDisplay.amount !== '$0.00'
+                ? `-${discountDisplay.amount}`
+                : t('billing_applied', 'Applied')}
+            </span>
+          </div>
+        )}
+
+        {/* Divider */}
+        <div className="border-t border-newColColor my-[4px]" />
+
+        {/* Due today */}
+        <div className="flex justify-between items-center">
+          <span className="font-[600] text-textColor">
+            {t('billing_due_today', 'Due today')}
+          </span>
+          <span className="font-[700] text-[18px] text-textColor">
+            {dueToday}
+          </span>
+        </div>
+
+        {/* Next billing info */}
+        {nextBillingTotal && nextBillingDate && (
+          <div className="flex justify-between items-center text-[13px] text-textColor/60">
+            <span>
+              {t('billing_then', 'Then')} {nextBillingTotal}{' '}
+              {t('billing_on', 'on')} {nextBillingDate}
+            </span>
+          </div>
+        )}
+
+        <div className="text-[12px]">
+          <strong>
+            {t(
+              'billing_cancel_notice',
+              'Cancel anytime from settings without talking to a person and never be charged.'
+            )}
+          </strong>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const AppliedCouponDisplay: FC<{
   appliedCode: string;
   checkout: any;

apps/frontend/src/components/billing/faq.component.tsx

@@ -19,7 +19,7 @@ const useFaqList = () => {
             ),
             description: t(
               'faq_to_confirm_credit_card_information_postiz_will_hold',
-              'To confirm credit card information Postiz will hold $2 and release it immediately'
+              'To confirm credit card information Postiz will hold $2 and release it immediately, you can cancel your subscription anytime from settings without talking to a person'
             ),
           },
         ]
@@ -72,9 +72,7 @@ export const FAQSection: FC<{
       className="bg-sixth p-[24px] border border-tableBorder rounded-[8px] flex flex-col"
       onClick={changeShow}
     >
-      <div
-        className={`text-[20px] cursor-pointer flex justify-center`}
-      >
+      <div className={`text-[20px] cursor-pointer flex justify-center`}>
         <div className="flex-1">{title}</div>
         <div className="flex items-center justify-center w-[32px]">
           {!show ? (

i18n.lock

@@ -458,7 +458,7 @@ checksums:
     upload_content_to_tiktok_without_posting: 6c3943e4d796b720933b90d250bd611c
     choose_upload_without_posting_description: 223c59be260eeaafe420791b76e2523c
     faq_am_i_going_to_be_charged_by_postiz: f4aad17d35bcaf45427216a432f23af3
-    faq_to_confirm_credit_card_information_postiz_will_hold: 5087b85985bbb6f46ea869d4796fb891
+    faq_to_confirm_credit_card_information_postiz_will_hold: ec475e644e3b5db2550c5bc06320b1cd
     faq_can_i_trust_postiz_gitroom: 9ee3c694bc392c339333047484d36003
     faq_postiz_gitroom_is_proudly_open_source: 17658906aec47f1557f84c71efadee03
     faq_what_are_channels: 22bc7aebd017e487d9a5ac8946a2a08d
@@ -469,7 +469,6 @@ checksums:
     faq_we_automate_chatgpt_to_help_you_write: e19d331417449c114f03b2b6ad862f93
     enter_email: 57d0675d7ff70e463dd0389652f35b20
     are_you_sure: 6d5cd13628a7887711fd0c29f1123652
-    yes_delete_it: e028575f88f6dc8e25f7a02fde480df9
     no_cancel: 9ebf9f7c2d2591e603861ef4c0c7c559
     are_you_sure_you_want_to_delete: f41210d5066ca7ae76a171fbe4b085a3
     are_you_sure_you_want_to_delete_the_image: 5fc0522337ba24f14a15d5f35b19e1d3
@@ -509,7 +508,7 @@ checksums:
     delete_integration: ccc879ccfcf7f85bcfe09f2bc3fa0dd3
     start_writing_your_post: 471efc4f2a7e2cf02a065a2de34e7213
     billing_join_over: 6e1c237241ba00ddbb07fd603344c5c3
-    billing_entrepreneurs_count: 05164f2ca2e8e20de3f63977c07d39fe
+    billing_entrepreneurs_count: 1e90206cb8ea01d0a1084d3af1a4cbed
     billing_who_use: 63bdc59ef443e193eca87889e83ea07a
     billing_postiz_grow_social: 3cf5ab166df9cb65e17b9a039ccbbbad
     billing_no_risk_trial: 6e5c60d9ddf3affa8ba8870272f9f9ab
@@ -541,6 +540,27 @@ checksums:
     billing_pay_0_start_trial: 28e72154e6cce7541e707b35f3a67309
     billing_pay_now: 50cb14454e1b2df4a2f83bf1ac799819
     billing_per_month: 6293d01c3d13f6938d47285122bd1a48
+    billing_per_year: 7d37200832af52329220e7431cf1a0e2
+    billing_order_summary: 77352aa7eeded06ca26b3fe72e4bcfda
+    billing_applied: a79bcd1e53b38db7b03b506ff2e05904
+    billing_due_today: a14cb9dd0003485894d328bb803c80e5
+    billing_then: 5e941fb7dd51a18651fcfb865edd5ba6
+    billing_on: 221bc27170a3baba6741482c0b28baa1
+    billing_discount_applied: 66ca13dec03ff95bf7461fb5e9e3a3c5
+    billing_remove: dba2fe5fe9f83f8078c687f28cba4b52
+    billing_coupon_expires: 91d8dcbb9a0ec894dd769f99528f0768
+    billing_invalid_coupon: 07fdf7218d84836632d60d2819089587
+    billing_coupon_applied: 53d5f95a8b47b6771ac06fb48578367a
+    billing_coupon_removed: ebef384172a4632e325ddfa5de48d370
+    billing_error_removing_coupon: aedc7fb1697d846a707828e02059cd61
+    billing_have_discount_coupon: 7f3e2b5a65a2901492ea3d185003dc80
+    billing_discount_coupon: 417a5576094621af534c5b3ba1898f1b
+    billing_cancel: 2e2a849c2223911717de8caa2c71bade
+    billing_enter_coupon_code: 4abd909f35156b0964bd5993f14d7b78
+    billing_applying: 0a321e775629314323ab227340e1a919
+    billing_apply: 0f03e8e3752eb120bf8ea0b8f8f5d244
+    billing_subscription: ba9f3675e18987d067d48533c8897343
+    billing_cancel_notice: bc2edd49b3c0a51f8e11bb93f56c5571
     select_channels: 3aab82dc90ccafe55059c32c5a33c222
     start_a_new_chat: 65b9067206fa4e4929d48ce242d879a6
     your_assistant: bd6422d1c2a2ba461e1da169b082bf7b
@@ -656,6 +676,7 @@ checksums:
     are_you_sure_go_back_to_global_mode: e7e0913ac6a8bdecd5a9349ad84d2f3c
     yes_go_back_to_global_mode: 50484cd2f72d76bd6a02d5ac956ba466
     are_you_sure_delete_this_post: 25e67cb71ee64bf67af09ee20257655f
+    yes_delete_it: e028575f88f6dc8e25f7a02fde480df9
     cant_edit_networks_when_creating_set: 10c389a15c85e82b69f3202bcd8fc527
     click_to_exit_global_editing: fec20b458bec4dcabf3efe65d1e5777b
     edit_content: 13b729cc6459ecdc3ea84d476c6dcddd

libraries/react-shared-libraries/src/translation/locales/ar/translation.json

@@ -454,7 +454,7 @@
   "upload_content_to_tiktok_without_posting": "ارفع المحتوى إلى تيك توك دون نشره",
   "choose_upload_without_posting_description": "اختر الرفع دون النشر إذا كنت ترغب في مراجعة وتحرير المحتوى الخاص بك داخل تطبيق تيك توك قبل النشر. هذا يمنحك إمكانية الوصول إلى أدوات التحرير المدمجة في تيك توك ويسمح لك بإجراء التعديلات النهائية قبل النشر.",
   "faq_am_i_going_to_be_charged_by_postiz": "هل سيتم تحميلي رسوم من قبل Postiz؟",
-  "faq_to_confirm_credit_card_information_postiz_will_hold": "لتأكيد معلومات بطاقة الائتمان، سيقوم Postiz بحجز مبلغ 2 دولار وإطلاقه فوراً",
+  "faq_to_confirm_credit_card_information_postiz_will_hold": "لتأكيد معلومات بطاقة الائتمان، سيحتجز Postiz مبلغ 2 دولار ويعيده فوراً، يمكنك إلغاء اشتراكك في أي وقت من الإعدادات دون الحاجة للتحدث مع أي شخص.",
   "faq_can_i_trust_postiz_gitroom": "هل يمكنني الوثوق بـ Postiz؟",
   "faq_postiz_gitroom_is_proudly_open_source": "Postiz مفتوح المصدر بكل فخر! نحن نؤمن بثقافة أخلاقية وشفافة، مما يعني أن Postiz سيبقى للأبد. يمكنك الاطلاع على الكود بالكامل أو استخدامه في مشاريعك الشخصية. لعرض مستودع المصدر المفتوح، <a href=\"https://github.com/gitroomhq/postiz-app\" target=\"_blank\" style=\"text-decoration: underline;\">اضغط هنا</a>.",
   "faq_what_are_channels": "ما هي القنوات؟",
@@ -465,7 +465,6 @@
   "faq_we_automate_chatgpt_to_help_you_write": "نحن نستخدم ChatGPT لمساعدتك في كتابة المنشورات والمقالات الاجتماعية.",
   "enter_email": "أدخل البريد الإلكتروني",
   "are_you_sure": "هل أنت متأكد؟",
-  "yes_delete_it": "نعم، احذفه!",
   "no_cancel": "لا، إلغاء!",
   "are_you_sure_you_want_to_delete": "هل أنت متأكد أنك تريد حذف {{name}}؟",
   "are_you_sure_you_want_to_delete_the_image": "هل أنت متأكد أنك تريد حذف الصورة؟",
@@ -505,7 +504,7 @@
   "delete_integration": "حذف التكامل",
   "start_writing_your_post": "ابدأ بكتابة منشورك لمعاينة",
   "billing_join_over": "انضم إلى أكثر من",
-  "billing_entrepreneurs_count": "18,000+ رائد أعمال",
+  "billing_entrepreneurs_count": "أكثر من 20,000 رائد أعمال",
   "billing_who_use": "الذين يستخدمون",
   "billing_postiz_grow_social": "Postiz لتنمية حضورهم على وسائل التواصل الاجتماعي",
   "billing_no_risk_trial": "تجربة مجانية بدون أي مخاطرة 100%",
@@ -537,6 +536,27 @@
   "billing_pay_0_start_trial": "ادفع 0 دولار اليوم - ابدأ تجربتك المجانية!",
   "billing_pay_now": "ادفع الآن",
   "billing_per_month": "/ شهريًا",
+  "billing_per_year": "/ سنوياً",
+  "billing_order_summary": "ملخص الطلب",
+  "billing_applied": "تم التطبيق",
+  "billing_due_today": "المستحق اليوم",
+  "billing_then": "ثم",
+  "billing_on": "في",
+  "billing_discount_applied": "تم تطبيق الخصم",
+  "billing_remove": "إزالة",
+  "billing_coupon_expires": "تنتهي صلاحية القسيمة في",
+  "billing_invalid_coupon": "رمز القسيمة غير صالح",
+  "billing_coupon_applied": "تم تطبيق القسيمة بنجاح!",
+  "billing_coupon_removed": "تمت إزالة القسيمة",
+  "billing_error_removing_coupon": "حدث خطأ أثناء إزالة القسيمة",
+  "billing_have_discount_coupon": "هل لديك قسيمة خصم؟",
+  "billing_discount_coupon": "قسيمة خصم",
+  "billing_cancel": "إلغاء",
+  "billing_enter_coupon_code": "أدخل رمز القسيمة",
+  "billing_applying": "جارٍ التطبيق...",
+  "billing_apply": "تطبيق",
+  "billing_subscription": "الاشتراك",
+  "billing_cancel_notice": "يمكنك الإلغاء في أي وقت من الإعدادات دون الحاجة للتحدث مع أي شخص ولن يتم خصم أي مبلغ منك.",
   "select_channels": "اختر القنوات",
   "start_a_new_chat": "ابدأ محادثة جديدة",
   "your_assistant": "مساعدك",
@@ -652,6 +672,7 @@
   "are_you_sure_go_back_to_global_mode": "هذا الإجراء لا يمكن التراجع عنه. هل أنت متأكد أنك تريد العودة إلى الوضع العام؟",
   "yes_go_back_to_global_mode": "نعم، العودة إلى الوضع العام",
   "are_you_sure_delete_this_post": "هل أنت متأكد أنك تريد حذف هذا المنشور؟",
+  "yes_delete_it": "نعم، احذفه!",
   "cant_edit_networks_when_creating_set": "لا يمكنك تعديل الشبكات أثناء إنشاء مجموعة",
   "click_to_exit_global_editing": "انقر على هذا الزر للخروج من التحرير العام وتخصيص المنشور لهذه القناة",
   "edit_content": "تعديل المحتوى",