<commit_before>import * as React from 'react';

import { LoadingSpinner } from '@waldur/core/LoadingSpinner';
import { Query } from '@waldur/core/Query';
import { defaultCurrency } from '@waldur/core/services';
import { translate } from '@waldur/i18n';
import { getResource, getOffering } from '@waldur/marketplace/common/api';
import { BillingPeriod } from '@waldur/marketplace/common/BillingPeriod';
import { CloseDialogButton } from '@waldur/modal/CloseDialogButton';
import { ModalDialog } from '@waldur/modal/ModalDialog';
import { connectAngularComponent } from '@waldur/store/connect';

import { PureDetailsTable } from './PlanDetailsTable';
import { combinePrices } from './utils';

interface PlanDetailsDialogProps {
  resolve: { resourceId: string };
}

async function loadData(resourceId: string) {
  const resource = await getResource(resourceId);
  const offering = await getOffering(resource.offering_uuid);
  const plan = resource.plan && offering.plans.find(item => item.url === resource.plan);
  return {
    offering,
    plan: plan && {...plan, unit_price: parseFloat(plan.unit_price)},
    ...combinePrices(plan, resource.limits, offering),
  };
}

const PlanDetailsDialog: React.SFC<PlanDetailsDialogProps> = props => (
  <ModalDialog title={translate('Plan details')} footer={<CloseDialogButton/>}>
    <Query loader={loadData} variables={props.resolve.resourceId}>
      {({ loading, data, error }) => {
        if (loading) {
          return <LoadingSpinner/>;
        }
        if (error) {
          return <p>{translate('Unable to load plan details.')}</p>;
        }
        if (!data.plan) {
          return <p>{translate('Resource does not have plan.')}</p>;
        }
        return (
        <>
          <p><strong>{translate('Plan name')}</strong>: {data.plan.name}</p>
          {data.plan.description && (
            <p><strong>{translate('Plan description')}</strong>: {data.plan.description}</p>
          )}
          {data.plan.unit_price > 0 && (
            <>
              <p><strong>{translate('Plan price')}</strong>: {defaultCurrency(data.plan.unit_price)}</p>
              <p><strong>{translate('Billing period')}</strong>: <BillingPeriod unit={data.plan.unit}/></p>
            </>
          )}
          <PureDetailsTable {...data} formGroupClassName="" columnClassName=""/>
        </>);
      }}
    </Query>
  </ModalDialog>
);

export default connectAngularComponent(PlanDetailsDialog, ['resolve']);<commit_msg>Fix plan detail dialog for usage components.<commit_after>import * as React from 'react';

import { LoadingSpinner } from '@waldur/core/LoadingSpinner';
import { Query } from '@waldur/core/Query';
import { defaultCurrency } from '@waldur/core/services';
import { translate } from '@waldur/i18n';
import { getResource, getOffering } from '@waldur/marketplace/common/api';
import { BillingPeriod } from '@waldur/marketplace/common/BillingPeriod';
import { CloseDialogButton } from '@waldur/modal/CloseDialogButton';
import { ModalDialog } from '@waldur/modal/ModalDialog';
import { connectAngularComponent } from '@waldur/store/connect';

import { PureDetailsTable } from './PlanDetailsTable';
import { combinePrices } from './utils';

interface PlanDetailsDialogProps {
  resolve: { resourceId: string };
}

async function loadData(resourceId: string) {
  const resource = await getResource(resourceId);
  const offering = await getOffering(resource.offering_uuid);
  const plan = resource.plan && offering.plans.find(item => item.url === resource.plan);
  return {
    offering,
    plan: plan && {...plan, unit_price: parseFloat(plan.unit_price)},
    ...combinePrices(plan, resource.limits, offering),
  };
}

const PlanDetailsDialog: React.SFC<PlanDetailsDialogProps> = props => (
  <ModalDialog title={translate('Plan details')} footer={<CloseDialogButton/>}>
    <Query loader={loadData} variables={props.resolve.resourceId}>
      {({ loading, data, error }) => {
        if (loading) {
          return <LoadingSpinner/>;
        }
        if (error) {
          return <p>{translate('Unable to load plan details.')}</p>;
        }
        if (!data.plan) {
          return <p>{translate('Resource does not have plan.')}</p>;
        }
        return (
        <>
          <p><strong>{translate('Plan name')}</strong>: {data.plan.name}</p>
          {data.plan.description && (
            <p><strong>{translate('Plan description')}</strong>: {data.plan.description}</p>
          )}
          {data.plan.unit_price > 0 && (
            <>
              <p><strong>{translate('Plan price')}</strong>: {defaultCurrency(data.plan.unit_price)}</p>
              <p><strong>{translate('Billing period')}</strong>: <BillingPeriod unit={data.plan.unit}/></p>
            </>
          )}
          <PureDetailsTable {...data} formGroupClassName="" columnClassName="" viewMode={true}/>
        </>);
      }}
    </Query>
  </ModalDialog>
);

export default connectAngularComponent(PlanDetailsDialog, ['resolve']);
{'fraction_non_alphanumeric': 0.160481444332999, 'fraction_numerical': 0.0012036108324974925, 'mean_word_length': 3.3852242744063323, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 77, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1080239', 'n_tokens_mistral': 1424, 'n_tokens_neox': 1417, 'n_words': 294}