packages/components/containers/payments/StartDateCheckoutRow.tsx

   1 import { c } from 'ttag';
   2
   3 import Info from '@proton/components/components/link/Info';
   4 import Time from '@proton/components/components/time/Time';
   5
   6 export interface Props {
   7     nextSubscriptionStart: number;
   8 }
   9
  10 const StartDateCheckoutRow = ({ nextSubscriptionStart }: Props) => {
  11     const formattedTime = <Time key="time-text">{nextSubscriptionStart}</Time>;
  12
  13     return (
  14         <div className="flex flex-nowrap justify-space-between mb-4" data-testid="start-date-row">
  15             <span className="inline-flex items-center">
  16                 <span className="mr-2">{c('Label').t`Start date`}</span>
  17                 <Info title={c('Tooltip').jt`The new subscription cycle starts on ${formattedTime}`} />
  18             </span>
  19             {formattedTime}
  20         </div>
  21     );
  22 };
  23
  24 export default StartDateCheckoutRow;