Untitled

<Box className="display-box-border" align="start" gap="15px">
  <Box direction="row" align="center" justify="between" gap="15px" fill="horizontal">
    <Box>
      <Text color="text" size="xsmall">Saat ini Anda sedang berlangganan layanan kami</Text>
      <Box gap="5px">
        <Box direction="row" align="center" gap="10px">
          <Text className="text-bold" size="large" color="brand">{nama_paket}</Text>
          <Text className="statuses active" size="xsmall">Aktif</Text>
        </Box>
        <Box>
          <Text size="xsmall">Layanan aktif hingga: {tanggal_expired_paket}</Text>
        </Box>
      </Box>
    </Box>
    <Box justify="end">
      <Button primary size="xsmall" label="Kelola" onClick={() => this.props.history.replace({pathname: '/my-services'})} />
    </Box>
  </Box>
</Box>