text: /* @ngInject */
  function selectPlan(dispatchers, gettextCatalog, subscriptionModel, translator) {
      const ACTIVE_BUTTON_CLASS = 'primary';
      const I18N = translator(() => ({
          downgradeToFree: gettextCatalog.getString('Switch to Free', null, 'Button to select plan on the dashboard'),
          downgradeToPlus: gettextCatalog.getString('Switch to Plus', null, 'Button to select plan on the dashboard'),
          downgradeToProfessional: gettextCatalog.getString(
              'Switch to Professional',
              null,
              'Button to select plan on the dashboard'
          ),
          updateFree: gettextCatalog.getString('Update Free', null, 'Button to select plan on the dashboard'),
          updatePlus: gettextCatalog.getString('Update Plus', null, 'Button to select plan on the dashboard'),
          updateProfessional: gettextCatalog.getString(
              'Update Professional',
              null,
              'Button to select plan on the dashboard'
          ),
          updateVisionary: gettextCatalog.getString('Update Visionary', null, 'Button to select plan on the dashboard'),
          upgradeToPlus: gettextCatalog.getString('Upgrade to Plus', null, 'Button to select plan on the dashboard'),
          upgradeToProfessional: gettextCatalog.getString(
              'Upgrade to Professional',
              null,
              'Button to select plan on the dashboard'
          ),
          upgradeToVisionary: gettextCatalog.getString(
              'Upgrade to Visionary',
              null,
              'Button to select plan on the dashboard'
          )
      }));
  
      const MAP = {
          free: {
              free: I18N.updateFree,
              plus: I18N.upgradeToPlus,
              professional: I18N.upgradeToProfessional,
              visionary: I18N.upgradeToVisionary
          },
          plus: {
              free: I18N.downgradeToFree,
              plus: I18N.updatePlus,
              professional: I18N.upgradeToProfessional,
              visionary: I18N.upgradeToVisionary
          },
          professional: {
              free: I18N.downgradeToFree,
              plus: I18N.downgradeToPlus,
              professional: I18N.updateProfessional,
              visionary: I18N.upgradeToVisionary
          },
          visionary: {
              free: I18N.downgradeToFree,
              plus: I18N.downgradeToPlus,
              professional: I18N.downgradeToProfessional,
              visionary: I18N.updateVisionary
          }
      };
  
      return {
          restrict: 'E',
          replace: true,
          scope: {},
          template: '<button class="selectPlan-button pm_button large" type="button"></button>',
          link(scope, element, { plan }) {
              const { dispatcher, on, unsubscribe } = dispatchers(['dashboard']);
              const onClick = () => dispatcher.dashboard('select.plan', { plan });
  
              on('subscription', (event, { type }) => {
                  type === 'update' && update();
              });
  
              function update() {
                  const currentPlanName = subscriptionModel.name();
  
                  element.text(MAP[currentPlanName][plan]);
                  element.addClass(ACTIVE_BUTTON_CLASS);
                  currentPlanName === plan && element.removeClass(ACTIVE_BUTTON_CLASS);
              }
  
              element.on('click', onClick);
              update();
  
              scope.$on('$destroy', () => {
                  element.off('click', onClick);
                  unsubscribe();
              });
          }
      };
  }
  export default selectPlan;
  