@hulkapps/app-manager-vue 1.0.2 → 2.0.2

package/src/components/Plans/PlanBanners.vue

@@ -0,0 +1,50 @@
+<template>
+    <PLayoutSection class="app-manager-plan-footer"
+                    v-if="mappedStaticContentPlan && mappedStaticContentPlan.length">
+        <div v-for="(staticContent, key) in mappedStaticContentPlan" :key="key">
+
+            <PBanner
+                    v-if="staticContent.type === 'banner'"
+                    :id="`static-content-header-${key}`"
+                    :status="staticContent.status"
+                    @dismiss="() => dismissBanner(key)"
+            >
+                <div v-html="staticContent.content"></div>
+            </PBanner>
+            <div v-else v-html="staticContent.content"></div>
+        </div>
+    </PLayoutSection>
+</template>
+
+<script>
+
+    import axios from 'axios'
+    import {PLayoutSection} from "../polaris-vue/src/components/PLayout/components/PLayoutSection";
+    import {PBanner} from "../polaris-vue/src/components/PBanner";
+    export default {
+        components: { PBanner, PLayoutSection },
+        name: "PlanBanners",
+        data() {
+            return {
+                staticContent: {}
+            }
+        },
+        computed: {
+            mappedStaticContentPlan() {
+                return this.staticContent['plans'];
+            },
+        },
+        async mounted() {
+
+            const { data } = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/marketing-banners`).catch(error => {
+                console.error(error)
+            });
+
+            this.staticContent = data.banners
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/Plans/YearlyPlanPromotion.vue

@@ -0,0 +1,40 @@
+<template>
+    <PLayoutSection class="app-manager-plan-footer" v-if="mappedStaticContent && mappedStaticContent.length">
+        <div v-for="(staticContent, key) in mappedStaticContent" :key="key">
+            <div v-html="staticContent.content"></div>
+        </div>
+    </PLayoutSection>
+    <span v-else>
+        <p style="font-size: 17px; font-weight: 500" slot="default">{{('Annually')}}</p>
+    </span>
+</template>
+
+<script>
+    import axios from 'axios'
+    import {PLayoutSection} from "../polaris-vue/src/components/PLayout/components/PLayoutSection";
+
+    export default {
+        components: { PLayoutSection },
+        name: "YearlyPlanPromotion",
+        data() {
+            return {
+                staticContent: {}
+            }
+        },
+        computed: {
+            mappedStaticContent() {
+                return this.staticContent['yearlyPlanPromotions'];
+            },
+        },
+        async mounted() {
+            const { data } = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/marketing-banners`).catch(error => {
+                console.error(error)
+            });
+            this.staticContent = data.banners
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/polaris-vue/src/components/PActionList/PActionList.vue

@@ -0,0 +1,68 @@
+<template>
+    <component :is="(hasMultipleSections ? 'ul' : 'div')" :class="className">
+        <PActionListSection v-for="(section, key) in finalSections" :key="key" :section="section"
+                            @itemAction="onItemAction"
+                            :hasMultipleSections="hasMultipleSections" />
+    </component>
+</template>
+
+<script>
+import { classNames} from '../../utilities/css';
+import { PActionListSection } from '../../components/PActionList/components/PActionListSection';
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Action lists render a list of actions or selectable options. This component is usually placed inside a
+ *  <a href="https://polaris-vue.hulkapps.com/?path=/docs/overlays-popover--popover">popover</a>
+ *  container to create a dropdown menu or to let merchants select from a list of options.</h4>
+ */
+export default {
+    name: 'PActionList',
+    components: {
+        PActionListSection,
+    },
+    props: {
+        /**
+         * Collection of actions for list
+         */
+        items: {
+            type: Array,
+            default: () => ([]),
+        },
+        /**
+         * Collection of sectioned action items
+         */
+        sections: {
+            type: Array,
+            default: () => ([]),
+        }
+    },
+    computed: {
+        className() {
+            return classNames(
+                'Polaris-ActionList',
+            );
+        },
+        finalSections() {
+            /* tslint:disable-next-line */
+            if (typeof this.items != 'undefined' && this.items !== null && this.items.length != null
+                && this.items.length > 0) {
+                return [{items: this.items}, ...this.sections];
+            }
+            return this.sections;
+        },
+        hasMultipleSections() {
+            return this.finalSections.length > 1;
+        },
+    },
+    methods: {
+        onItemAction(action) {
+            /**
+             * Triggers when the item is selected/clicked
+             */
+            this.$emit('item-action', action);
+        },
+    },
+}
+</script>

package/src/components/polaris-vue/src/components/PActionList/components/PActionListItem/PActionListItem.vue

@@ -0,0 +1,91 @@
+<template>
+    <li>
+        <button
+            @click="handleAction(action)"
+            :disabled="disabled"
+            :class="className">
+            <template v-if="icon || image">
+                <span class="Polaris-ActionList__Content">
+                    <span
+                        role="presentation"
+                        class="Polaris-ActionList__Prefix"
+                        :style="{ backgroundImage: icon ? null : 'url('+image+')'}">
+                        <PIcon v-if="icon" :source="icon"/>
+                    </span>
+                    <span class="Polaris-ActionList__Text">
+                        <slot>
+                            <slot name="content">
+                                <span>{{ content }}</span>
+                                <slot name="helpText">
+                                    <span class="Polaris-TextStyle--variationSubdued"
+                                          v-if="helpText">{{ helpText }}</span>
+                                </slot>
+                            </slot>
+                        </slot>
+                    </span>
+                </span>
+            </template>
+            <template v-else>
+                <slot>
+                    <slot name="content">
+                        <span>{{ content }}</span>
+                        <slot name="helpText">
+                            <span class="Polaris-TextStyle--variationSubdued" v-if="helpText">{{ helpText }}</span>
+                        </slot>
+                    </slot>
+                </slot>
+            </template>
+        </button>
+    </li>
+</template>
+
+<script>
+    import { classNames } from '../../../../utilities/css';
+    import { PUnstyledLink } from '../../../../components/PUnstyledLink';
+    import { PIcon } from '../../../../components/PIcon';
+
+    export default {
+        name: 'PActionListItem',
+        components: {
+            PUnstyledLink, PIcon,
+        },
+        props: {
+            content: {
+                type: String,
+            },
+            helpText: {
+                type: String,
+            },
+            action: {
+                type: Object,
+            },
+            icon: {
+                type: String,
+            },
+            image: {
+                type: String,
+            },
+            disabled: {
+                type: Boolean,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-ActionList__Item',
+                );
+            },
+        },
+        methods: {
+            handleAction(action) {
+                let res = true;
+                if (action.onAction) {
+                    res = action.onAction();
+                }
+                if (res && action.url) {
+                    window.location.href = action.url;
+                }
+            },
+        }
+    }
+</script>

package/src/components/polaris-vue/src/components/PActionList/components/PActionListSection/PActionListSection.vue

@@ -0,0 +1,68 @@
+<template>
+    <POptionalTag tag="li" :active="hasMultipleSections" class="Polaris-ActionList__Section">
+        <div :class="className">
+            <p v-if="section.title" class="Polaris-ActionList__Title">
+                {{ section.title }}
+            </p>
+            <ul class="Polaris-ActionList__Actions">
+                <PActionListItem
+                    v-for="(item, key) in section.items"
+                    :key="key"
+                    :content="item.content"
+                    :icon="item.icon"
+                    :helpText="item.helpText"
+                    :action="wrapAction(item)"
+                />
+            </ul>
+        </div>
+    </POptionalTag>
+</template>
+
+<script>
+    import { classNames } from '../../../../utilities/css';
+    import { POptionalTag } from '../../../../components/POptionalTag';
+    import { PActionListItem } from '../../../../components/PActionList/components/PActionListItem';
+    import ObjectValidator from '../../../../utilities/validators/ObjectValidator';
+
+    const SectionInterface = {
+        title: String,
+        items: Array,
+    }
+
+    export default {
+        name: 'PActionListSection',
+        components: {
+            PActionListItem, POptionalTag,
+        },
+        props: {
+            section: {
+                type: Object,
+                default: () => ({}),
+                ...ObjectValidator('actions', SectionInterface),
+            },
+            hasMultipleSections: {
+                type: Boolean,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    !this.section.title && 'Polaris-ActionList__Section--withoutTitle',
+                );
+            },
+        },
+        methods: {
+            wrapAction(action) {
+                const old = action.onAction;
+                const newAction = Object.assign({}, action);
+                if (old) {
+                    newAction.onAction = () => {
+                        old();
+                        this.$emit('item-action', action);
+                    };
+                }
+                return newAction;
+            },
+        }
+    }
+</script>

package/src/components/polaris-vue/src/components/PActionMenu/PActionMenu.vue

@@ -0,0 +1,54 @@
+<template>
+    <div :class="actionMenuClassNames">
+      <PActionMenuRollupActions v-if="rollup" :items="actions" :sections="rollupSections" />
+      <PActionMenuActions v-else :actions="actions" :groups="groups" />
+    </div>
+</template>
+
+<script>
+import {classNames} from '../../utilities/css';
+import {MenuActionDescriptor, MenuGroupDescriptor} from '../../types';
+import {PActionMenuRollupActions} from '../../components/PActionMenu/components/PActionMenuRollupActions';
+import {PActionMenuActions} from '../../components/PActionMenu/components/PActionMenuActions';
+import ArrayValidator from '../../utilities/validators/ArrayValidator';
+
+export default {
+  name: 'PActionMenu',
+  components: {
+    PActionMenuActions, PActionMenuRollupActions,
+  },
+  props: {
+    actions: {
+      type: Array,
+      ...ArrayValidator('actions', MenuActionDescriptor)
+    },
+    groups: {
+      type: Array,
+      ...ArrayValidator('groups', MenuGroupDescriptor)
+    },
+    rollup: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    rollupSections() {
+      return this.groups.map((group) => this.convertGroupToSection(group));
+    },
+    actionMenuClassNames() {
+      return classNames(
+          'Polaris-ActionMenu',
+          this.rollup && 'Polaris-ActionMenu--rollup',
+      );
+    }
+  },
+  methods: {
+    convertGroupToSection(MenuGroupDescriptor) {
+      return {
+        title: MenuGroupDescriptor.title,
+        items: MenuGroupDescriptor.actions,
+      };
+    }
+  },
+}
+</script>

package/src/components/polaris-vue/src/components/PActionMenu/components/PActionMenuActions/PActionMenuActions.vue

@@ -0,0 +1,197 @@
+<template>
+  <div :ref="id" class="Polaris-ActionMenu-Actions__ActionsLayout">
+    <template v-for="(action, index) in overriddenActions">
+      <template v-if="'title' in action">
+        <div v-if="action.actions.length > 0" :key="`MenuGroup-${index}`">
+          <PActionMenuMenuGroup
+              :title="action.title"
+              :active="action.title === computedActiveMenuGroup"
+              :actions="[...computedHiddenActions, ...action.actions]"
+              v-bind="action"
+              :onAction="handleMenuGroupClose"
+              @open="handleMenuGroupToggle"
+              @close="handleMenuGroupClose"
+              :getOffsetWidth="handleActionsOffsetWidth"
+          />
+        </div>
+      </template>
+      <PActionMenuMenuAction v-else-if="!computedHiddenActions.includes(action)" :key="`MenuAction-${index}`"
+                             :getOffsetWidth="handleActionsOffsetWidth" :content="action.content" v-bind="action"/>
+    </template>
+  </div>
+</template>
+
+<script>
+import {MenuActionDescriptor, MenuGroupDescriptor} from '../../../../types';
+import {sortAndOverrideActionOrder} from '../../../../components/PActionMenu/utilities';
+import { PActionMenuMenuGroup } from '../../../../components/PActionMenu/components/PActionMenuMenuGroup';
+import { PActionMenuMenuAction } from '../../../../components/PActionMenu/components/PActionMenuMenuAction';
+import ArrayValidator from '../../../../utilities/validators/ArrayValidator';
+
+const Props = {
+  actions: {
+    type: Object,
+    properties: MenuActionDescriptor
+  },
+  groups: {
+    type: Object,
+    properties: MenuGroupDescriptor
+  },
+}
+
+const ACTION_SPACING = 8;
+
+export default {
+  name: 'PActionMenuActions',
+  components: {
+    PActionMenuMenuGroup, PActionMenuMenuAction,
+  },
+  props: {
+    id: {
+      type: [String, Number],
+      default: `ActionMenuLayout${new Date().getUTCMilliseconds()}`,
+    },
+   actions: {
+      type: Array,
+     ...ArrayValidator('actions', MenuActionDescriptor)
+   },
+    groups: {
+      type: Array,
+      ...ArrayValidator('actions', MenuGroupDescriptor)
+    }
+  },
+  data() {
+    return {
+      activeMenuGroup: '',
+      hiddenActions: [],
+      showableActions: [],
+      availableWidthRef: 0,
+      timesMeasured: 0,
+      actionsAndGroupsLengthRef: 0,
+      actionWidthsRef: [],
+    }
+  },
+  computed: {
+    lastMenuGroupWidth() {
+      return [...this.actionWidthsRef].pop() || 0;
+    },
+
+    lastMenuGroup() {
+      return [...this.groups].pop();
+    },
+
+    /* Measure Variables End*/
+
+    computedShowableActions: {
+      get() {
+        return this.showableActions;
+      },
+      set(value) {
+        this.showableActions = value;
+      }
+    },
+
+    computedHiddenActions: {
+      get() {
+        return this.hiddenActions;
+      },
+      set(value) {
+        this.hiddenActions = value;
+      }
+    },
+
+    computedActiveMenuGroup: {
+      get() {
+        return this.activeMenuGroup;
+      },
+      set(value) {
+        this.activeMenuGroup = value;
+      }
+    },
+
+    menuActions() {
+      return [...this.actions, ...this.groups];
+    },
+
+    overriddenActions() {
+      return sortAndOverrideActionOrder(this.menuActions);
+    },
+  },
+  methods: {
+    handleMenuGroupToggle(group) {
+      if(typeof group === 'string') {
+        this.computedActiveMenuGroup = this.computedActiveMenuGroup ? undefined : group;
+      }
+    },
+    handleMenuGroupClose() {
+      this.computedActiveMenuGroup = undefined;
+    },
+    handleResize() {
+      const actionsLayoutRef = this.$refs[this.id];
+      this.availableWidthRef = actionsLayoutRef.offsetWidth;
+
+      // // Set timesMeasured to 0 to allow re-measuring
+      this.timesMeasured = 0;
+      this.measureActions();
+    },
+    handleActionsOffsetWidth(width) {
+      this.actionWidthsRef = [...this.actionWidthsRef, width];
+    },
+    measureActions() {
+      if (
+          this.actionWidthsRef.length === 0 ||
+          this.availableWidthRef === 0
+      ) {
+        return;
+      }
+
+      const actionsAndGroups = [...this.actions, ...this.groups];
+
+      if (actionsAndGroups.length === 1) {
+        this.showableActions = actionsAndGroups;
+        this.hiddenActions = [];
+        return;
+      }
+
+      let currentAvailableWidth = this.availableWidthRef;
+      let newShowableActions = [];
+      let newRolledUpActions = [];
+
+      actionsAndGroups.forEach((action, index) => {
+        const canFitAction =
+            this.actionWidthsRef[index] +
+            0 + // menuGroupWidthRef.current
+            ACTION_SPACING +
+            this.lastMenuGroupWidth <=
+            currentAvailableWidth;
+
+        if (canFitAction) {
+          currentAvailableWidth -=
+              this.actionWidthsRef[index] + ACTION_SPACING * 2;
+          newShowableActions = [...newShowableActions, action];
+        } else {
+          currentAvailableWidth = 0;
+          // Find last group if it exists and always render it as a rolled up action below
+          if (action === this.lastMenuGroup) {
+            return;
+          }
+          newRolledUpActions = [...newRolledUpActions, action];
+        }
+      });
+
+      this.showableActions = newShowableActions;
+      this.computedHiddenActions = newRolledUpActions;
+
+      this.timesMeasured += 1;
+      this.actionsAndGroupsLengthRef = actionsAndGroups.length;
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+}
+</script>

package/src/components/polaris-vue/src/components/PActionMenu/components/PActionMenuMenuAction/PActionMenuMenuAction.vue

@@ -0,0 +1,97 @@
+<template>
+    <PUnstyledLink :ref="id" v-if="url" :class="menuActionClassNames" :url="url" :external="external">
+        <span v-if="icon || disclosure" class="Polaris-ActionMenu-MenuAction__ContentWrapper">
+            <span v-if="icon" class="Polaris-ActionMenu-MenuAction__IconWrapper">
+                <PIcon :source="icon" />
+            </span>
+            <span class="Polaris-ActionMenu-MenuAction__Content">{{content}}</span>
+            <span v-if="disclosure" class="Polaris-ActionMenu-MenuAction__IconWrapper">
+                <PIcon source="CaretDownMinor" />
+            </span>
+        </span>
+        <template v-else>{{content}}</template>
+    </PUnstyledLink>
+    <button :ref="id" v-else type="button" :class="menuActionClassNames" :disabled="disabled" @click.stop="onAction()">
+        <span v-if="icon || disclosure" class="Polaris-ActionMenu-MenuAction__ContentWrapper">
+            <span v-if="icon" class="Polaris-ActionMenu-MenuAction__IconWrapper">
+                <PIcon :source="icon" />
+            </span>
+            <span class="Polaris-ActionMenu-MenuAction__Content">{{content}}</span>
+            <span v-if="disclosure" class="Polaris-ActionMenu-MenuAction__IconWrapper">
+                <PIcon source="CaretDownMinor" />
+            </span>
+        </span>
+        <template v-else>{{content}}</template>
+    </button>
+</template>
+
+<script>
+    import {classNames} from '../../../../utilities/css';
+    import {ComplexAction, MenuActionDescriptor} from '../../../../types';
+    import {PIcon} from '../../../../components/PIcon';
+    import {PUnstyledLink} from '../../../../components/PUnstyledLink';
+
+    export const MenuActionProps = {
+      ...ComplexAction,
+        disclosure: Boolean,
+    }
+
+    export default {
+      name: 'PActionMenuMenuAction',
+      components: {
+        PUnstyledLink, PIcon,
+      },
+      props: {
+        id: {
+          type: [String, Number],
+          default: `ActionMenuMenuAction${new Date().getUTCMilliseconds()}`,
+        },
+        content: {
+          type: String,
+        },
+        url: {
+          type: String,
+        },
+        external: {
+          type: Boolean,
+        },
+        icon: {
+          type: String,
+        },
+        disclosure: {
+          type: Boolean,
+        },
+        disabled: {
+          type: Boolean,
+        },
+        onAction: {
+          type: Function,
+          default: () => {
+            return 0
+          },
+        },
+        getOffsetWidth: {
+          type: Function,
+          default: () => {
+            return 0
+          },
+        },
+      },
+      computed: {
+        menuActionClassNames() {
+          return classNames(
+              'Polaris-ActionMenu-MenuAction',
+              this.disabled && 'Polaris-ActionMenu-MenuAction--disabled',
+          );
+        }
+      },
+      mounted() {
+          const actionsLayoutRef = this.$refs[this.id];
+          if (typeof this.getOffsetWidth === 'function' && actionsLayoutRef) {
+            if(actionsLayoutRef.offsetWidth) {
+              this.getOffsetWidth(actionsLayoutRef.offsetWidth);
+            }
+          }
+        }
+    }
+</script>