{"version":3,"file":"show.page-C49xtuf3.js","sources":["../../../app/javascript/assets/images/slack-24x24.png","../../../app/javascript/modules/growthmentor/groups/components/SlackChannel.vue","../../../app/javascript/modules/growthmentor/groups/show.page.vue"],"sourcesContent":["export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAgdQTFRFAAAAALzUALzUALzUALzUALzUTa9QTK9QTK9QTK9QTK9QTK9QALzUALzUALzUALzUALzUTK9QTK9QTK9QTK9QTK9QALzUALzUTK9QALzUALzUTK9QTK9QALzUALzUALzUALzUALzUALzUALzUALzUALzUALzUALzUALzUTK9QTK9QTK9QTK9QALzUALzUALzUTK9QTK9QTK9QTK9QALzUALzUTK9QTK9QALzUALzUTK9QTK9QTK9QTK9QTK9QTK9QALzUALzUTK9QTK9QTK9QTK9QALzUALzUALzUALzUTK9QTK9QTK9QTK9QTK9QTK9QTK9QTK9QTK9Q6R5j6R5j6R5j6R5j6R5j6R5j6R5j6R5j6R5j/5gA/5gA/5gA/5gA/5gA6R5j6R5j6R5j6R5j6R5j6R5j6R5j6R5j6R5j6R5j6R5j/5gA/5gA/5gA/5gA/5gA6R5j6R5j6R5j6R5j/5gA/5gA6R5j6R5j6R5j6R5j6R5j/5gA/5gA/5gA6R5j6R5j6R5j6R5j6R5j/5gA/5gA/5gA/5gA6R5j6R5j/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA/5gA6R5j6R5j/5gA/5gA6R5j6R5j6R5j/5gA/5gA/5gA6R5j6R5j6R5j6R5j6R5j/5gA/5gA/5gA/5gAn1DXnAAAAK10Uk5TABOc9uJqAWnn8p0Jffz/7B836//8bLNOtf5SbrcUmOPoSgEPBhJ7tTEVhrB6m9EQApv+jfVFIeXh+VD5kSrq3vqjDKLSWCBQUzIGNUEQDkxTTR80aWxjCRxiTgsLVGxoNmTp/+oWL87++KAGoPv/61ninfszVebv5BC2UWL+85r8ngFSH9L9lXANIpy6tm8GESYaAmTo4ZhudbJMarF87B83/GsKkfXhW1rykgWmBey4AAABXklEQVR4nGNgAANGJmYWVgY2dg5OLm4GZMDDy8fHLyAoJCwsIooiIcYHBOKiwkAggapDEighJQ2SkEGRkJWTV1BQxCLBoKTMyKiCIqGqJqYOBnIaDFAJTS1tHW4GXV4+KNDTh0gYGBoJixgzmPDBgSlEwswcSHIyWMDFLTWsrIFCNrZ2QNKegZUfKu7gqOLkLGLkYgaSEHJlYHBz9wADTxUGBi9vH18GP/+AwCCgs4JDQsPCGSIio6IZGGJi48AgPoGBITEpOTklNS09IzMrOyYnNw8C8gsYCpNBEkVAsrikFCael1fGUA4UqqisApLJ1TW1cIk6hvqG5IzGJrBEc0srTLytnSE8tKqjkwEiwdDV3QMGvX390BCDSEyYOHHSZNTAhUhMmTp12vQYLBIzgKbXzkSRmAWSmD0HZO9cFIl5DcnJ8xcszM/LW7QYRWLJ0mXLVzAwrCxbtXoNRAQAddV16kRzk0wAAAAASUVORK5CYII=\"","<template>\n  <component :is=\"wrapperTag\" :href=\"channel\">\n    <div\n      class=\"tw-flex tw-w-full tw-flex-wrap tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-primary-300 tw-p-2 md:tw-w-max\"\n      :class=\"[\n        isUserGroupMember\n          ? 'tw-text-primary-500 tw-transition-colors hover:tw-border-primary-100 hover:tw-bg-primary-100'\n          : 'tw-cursor-not-allowed tw-select-none tw-text-primary-300',\n      ]\"\n      v-tooltip=\"\n        !isUserGroupMember &&\n        'You need to be a member of the city squad to join the Slack channel.'\n      \"\n    >\n      <img\n        class=\"tw-mr-2\"\n        src=\"../../../../assets/images/slack-24x24.png\"\n        alt=\"Slack logo\"\n      />\n      <span class=\"tw-truncate\">{{ channelName }}</span>\n      <LockIcon\n        v-if=\"!isUserGroupMember\"\n        class=\"tw-ml-2 tw-h-5 tw-w-5 tw-text-neutral-500\"\n      />\n    </div>\n  </component>\n</template>\n\n<script setup>\nimport LockIcon from '@/assets/images/icons/lock.svg'\nimport { computed } from 'vue'\n\nconst props = defineProps({\n  isUserGroupMember: {\n    type: Boolean,\n    required: true,\n  },\n  channel: {\n    type: String,\n    default: '#',\n  },\n  channelName: {\n    type: String,\n    default: 'Slack',\n  },\n})\n\nconst wrapperTag = computed(() => (props.isUserGroupMember ? 'a' : 'div'))\n</script>\n","<template>\n  <Container class=\"tw-mt-8\">\n    <div class=\"tw-mx-auto tw-max-w-5xl\">\n      <BaseButton\n        class=\"tw-mb-6\"\n        color=\"outline-gray\"\n        href=\"/cities\"\n        is-inertia-link\n      >\n        <ArrowLeftIcon class=\"tw-mr-2 tw-h-4 tw-w-4\" />\n        Back to cities\n      </BaseButton>\n\n      <Card>\n        <Alert\n          v-if=\"!isUserGroupMember\"\n          type=\"warning\"\n          is-block\n          class=\"tw-mb-6\"\n        >\n          <template #title>\n            You need to be a member to see other squad members and get a slack\n            channel invite\n          </template>\n        </Alert>\n        <div class=\"tw-flex tw-w-full tw-flex-wrap tw-justify-between\">\n          <h1 class=\"tw-display-2 tw-grow\">\n            {{ group.name }}\n          </h1>\n          <span class=\"tw-text-xs tw-text-neutral-400\">\n            created {{ formatRelativeDate(group.createdAt) }}\n          </span>\n        </div>\n        <div class=\"tw-text-medium tw-mt-2 tw-text-xs tw-text-neutral-500\">\n          {{ group.currentMembersCount }} {{ membersCountLabel }} • Goal\n          {{ group.maxMembers }} members\n        </div>\n        <div v-if=\"group.groupTagList.length\" class=\"tw-mt-4\">\n          <Tag v-for=\"tag in group.groupTagList\" :key=\"tag\">\n            {{ tag }}\n          </Tag>\n        </div>\n        <hr class=\"tw-my-4\" />\n        <p>{{ group.description }}</p>\n        <hr class=\"tw-my-4\" />\n        <div>\n          <p class=\"tw-mb-2\">\n            {{\n              isUserGroupMember\n                ? 'Here is your slack channel link invite. We’ve also sent it to your mail box.'\n                : 'Join this city squad to get a slack channel invite.'\n            }}\n          </p>\n          <SlackChannel\n            :is-user-group-member=\"isUserGroupMember\"\n            :channel=\"group.slackChannel\"\n            :channel-name=\"group.slackChannelName\"\n          />\n        </div>\n        <hr class=\"tw-my-4\" />\n        <GroupFooterButtons :group=\"group\" />\n        <template v-if=\"members.length\">\n          <hr class=\"tw-my-4\" />\n          <div class=\"tw-w-full\">\n            <div class=\"tw-caption-regular\">Squad members</div>\n            <div class=\"tw-mt-1 tw-divide-y tw-divide-neutral-100\">\n              <GroupMember\n                class=\"tw-py-2 first:tw-pt-0 last:tw-pb-0\"\n                v-for=\"member in members\"\n                :key=\"member.profileUrl\"\n                :member=\"member\"\n                :is-blurred=\"!isUserGroupMember\"\n                test_id=\"group-member\"\n              />\n            </div>\n          </div>\n        </template>\n      </Card>\n    </div>\n\n    <UnlockFullAccessModal v-if=\"hasRole(ROLE.GUEST)\" />\n  </Container>\n</template>\n\n<script setup>\nimport GroupMember from '@/modules/growthmentor/groups/components/GroupMember.vue'\nimport GroupFooterButtons from '@/modules/growthmentor/groups/components/GroupFooterButtons.vue'\nimport SlackChannel from '@/modules/growthmentor/groups/components/SlackChannel.vue'\nimport Alert from '@/shared/components/Alert.vue'\nimport Container from '@/shared/components/Container.vue'\nimport Card from '@/shared/components/Card.vue'\nimport Tag from '@/shared/components/Tag.vue'\nimport BaseButton from '@/shared/components/BaseButton.vue'\nimport ArrowLeftIcon from '@/assets/images/icons/arrow-left.svg'\nimport UnlockFullAccessModal from '@/shared/components/modals/UnlockFullAccessModal.vue'\nimport { OBJECT_PERMISSIONS, ROLE } from '@/shared/data/permissionSystem.js'\nimport { computed } from 'vue'\nimport { usePermissionSystem } from '@/shared/composables/usePermissionSystem.js'\nimport { useDateManager } from '@/shared/composables/useDateManager.js'\n\nconst props = defineProps({\n  members: {\n    type: Array,\n    required: true,\n  },\n  group: {\n    type: Object,\n    required: true,\n  },\n})\n\nconst { hasObjectPermissions, hasRole } = usePermissionSystem()\nconst { formatRelativeDate } = useDateManager()\n\nconst membersCountLabel = computed(() => {\n  return props.group.currentMembersCount === 1 ? 'member' : 'members'\n})\nconst isUserGroupMember = computed(() => {\n  return hasObjectPermissions(props.group, OBJECT_PERMISSIONS.GROUPS.APPROVED)\n})\n</script>\n"],"names":["_imports_0","props","__props","wrapperTag","computed","hasObjectPermissions","hasRole","usePermissionSystem","formatRelativeDate","useDateManager","membersCountLabel","isUserGroupMember","OBJECT_PERMISSIONS"],"mappings":"w4EAAeA,EAAA,wxDCgCf,MAAMC,EAAQC,EAeRC,EAAaC,EAAS,IAAOH,EAAM,kBAAoB,IAAM,KAAM,01CCqDzE,MAAMA,EAAQC,EAWR,CAAE,qBAAAG,EAAsB,QAAAC,CAAS,EAAGC,EAAqB,EACzD,CAAE,mBAAAC,CAAoB,EAAGC,EAAgB,EAEzCC,EAAoBN,EAAS,IAC1BH,EAAM,MAAM,sBAAwB,EAAI,SAAW,SAC3D,EACKU,EAAoBP,EAAS,IAC1BC,EAAqBJ,EAAM,MAAOW,EAAmB,OAAO,QAAQ,CAC5E"}