minor fixes to billing page and trial banner (#1648)
This commit is contained in:
		
							parent
							
								
									a8d2cf0b58
								
							
						
					
					
						commit
						b616d36fcc
					
				
					 2 changed files with 10 additions and 3 deletions
				
			
		| 
						 | 
					@ -23,7 +23,7 @@ const TrialBanner = () => {
 | 
				
			||||||
      data-testid="trial-banner">
 | 
					      data-testid="trial-banner">
 | 
				
			||||||
      <div className="mb-2 text-left">{t("trial_days_left", { days: trialDaysLeft })}</div>
 | 
					      <div className="mb-2 text-left">{t("trial_days_left", { days: trialDaysLeft })}</div>
 | 
				
			||||||
      <Button
 | 
					      <Button
 | 
				
			||||||
        href="/api/upgrade"
 | 
					        href="/settings/billing"
 | 
				
			||||||
        color="minimal"
 | 
					        color="minimal"
 | 
				
			||||||
        className="justify-center w-full border-2 border-gray-600 hover:bg-yellow-100">
 | 
					        className="justify-center w-full border-2 border-gray-600 hover:bg-yellow-100">
 | 
				
			||||||
        {t("upgrade_now")}
 | 
					        {t("upgrade_now")}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,6 @@
 | 
				
			||||||
import { ExternalLinkIcon } from "@heroicons/react/solid";
 | 
					import { ExternalLinkIcon } from "@heroicons/react/solid";
 | 
				
			||||||
import { ReactNode } from "react";
 | 
					import { ReactNode } from "react";
 | 
				
			||||||
 | 
					import { useIntercom } from "react-use-intercom";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import { useLocale } from "@lib/hooks/useLocale";
 | 
					import { useLocale } from "@lib/hooks/useLocale";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -24,6 +25,7 @@ export default function Billing() {
 | 
				
			||||||
  const { t } = useLocale();
 | 
					  const { t } = useLocale();
 | 
				
			||||||
  const query = useMeQuery();
 | 
					  const query = useMeQuery();
 | 
				
			||||||
  const { data } = query;
 | 
					  const { data } = query;
 | 
				
			||||||
 | 
					  const { boot, show } = useIntercom();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <Shell heading={t("billing")} subtitle={t("manage_your_billing_info")}>
 | 
					    <Shell heading={t("billing")} subtitle={t("manage_your_billing_info")}>
 | 
				
			||||||
| 
						 | 
					@ -44,7 +46,7 @@ export default function Billing() {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
          <Card title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
 | 
					          <Card title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
 | 
				
			||||||
            <form method="POST" action={`/api/integrations/stripepayment/portal`}>
 | 
					            <form method="POST" action={`/api/integrations/stripepayment/portal`}>
 | 
				
			||||||
              <Button type="submit">
 | 
					              <Button type="submit" color="secondary">
 | 
				
			||||||
                {t("go_to_billing_portal")} <ExternalLinkIcon className="w-4 h-4 ml-1" />
 | 
					                {t("go_to_billing_portal")} <ExternalLinkIcon className="w-4 h-4 ml-1" />
 | 
				
			||||||
              </Button>
 | 
					              </Button>
 | 
				
			||||||
            </form>
 | 
					            </form>
 | 
				
			||||||
| 
						 | 
					@ -56,7 +58,12 @@ export default function Billing() {
 | 
				
			||||||
                <p>{t("further_billing_help")}</p>
 | 
					                <p>{t("further_billing_help")}</p>
 | 
				
			||||||
              </div>
 | 
					              </div>
 | 
				
			||||||
              <div className="mt-5">
 | 
					              <div className="mt-5">
 | 
				
			||||||
                <Button href="mailto:help@cal.com" color="secondary" type="submit">
 | 
					                <Button
 | 
				
			||||||
 | 
					                  onClick={() => {
 | 
				
			||||||
 | 
					                    boot();
 | 
				
			||||||
 | 
					                    show();
 | 
				
			||||||
 | 
					                  }}
 | 
				
			||||||
 | 
					                  color="secondary">
 | 
				
			||||||
                  {t("contact_our_support_team")}
 | 
					                  {t("contact_our_support_team")}
 | 
				
			||||||
                </Button>
 | 
					                </Button>
 | 
				
			||||||
              </div>
 | 
					              </div>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in a new issue