Skip to content

Commit

Permalink
refactor: how you can help component (#381)
Browse files Browse the repository at this point in the history
  • Loading branch information
andreiio authored Jun 25, 2024
1 parent e7736f8 commit e55180c
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 297 deletions.
90 changes: 61 additions & 29 deletions resources/js/Components/HowCanYouHelp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,18 @@
</div>
</div>

<div class="bg-white px-9">
<ul
role="list"
class="grid grid-cols-1 gap-8 mx-auto max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3"
>
<li class="relative z-50 flex flex-col col-span-1 p-6 -mt-12 bg-white rounded-md shadow-lg">
<div class="px-9">
<ul class="grid grid-cols-1 gap-8 mx-auto -mt-12 max-w-7xl lg:grid-cols-3">
<li
class="relative z-50 flex flex-col col-span-1 p-6 bg-white rounded-md shadow-lg ring-1 ring-gray-100"
>
<ShareIcon
class="flex items-center justify-center w-10 h-10 p-2 rounded-lg text-primary-600 bg-primary-50"
class="flex items-center justify-center w-10 h-10 p-2 mb-6 rounded-lg text-primary-600 bg-primary-50"
/>

<h3 class="mt-6 mb-2 text-lg font-medium text-gray-900">{{ $t('social_media_share') }}</h3>
<h3 class="font-semibold leading-7 text-gray-900" v-text="$t('social_media_share')" />

<div class="text-sm text-gray-500">
<p class="mt-1 text-sm leading-relaxed text-gray-600">
{{ $t('share') }}
<a
class="text-blue-500 underline"
Expand Down Expand Up @@ -62,17 +61,19 @@
>{{ $t('messenger') }}</a
>
{{ $t('tell_about') }}
</div>
</p>
</li>

<li class="relative z-50 flex flex-col col-span-1 p-6 bg-white rounded-md shadow-lg sm:-mt-12">
<li
class="relative z-50 flex flex-col col-span-1 p-6 bg-white rounded-md shadow-lg ring-1 ring-gray-100"
>
<HeartIcon
class="flex items-center justify-center w-10 h-10 p-2 rounded-lg text-primary-600 bg-primary-50"
class="flex items-center justify-center w-10 h-10 p-2 mb-6 rounded-lg text-primary-600 bg-primary-50"
/>

<h3 class="mt-6 mb-2 text-lg font-medium text-gray-900">{{ $t('donate_or_volunteer') }}</h3>
<h3 class="font-semibold leading-7 text-gray-900" v-text="$t('donate_or_volunteer')" />

<div class="text-sm text-gray-500">
<p class="mt-1 text-sm leading-relaxed text-gray-600">
{{ $t('interested_in_ong') }}
<a
:href="pageRoute + '#projects'"
Expand All @@ -83,27 +84,48 @@
<button
type="button"
v-if="acceptsVolunteers"
@click="$emit('volunteer')"
@click="triggerVolunteer"
class="text-blue-500 underline cursor-pointer"
v-text="$t('register_to_volunteer')"
/>
{{ $t('for_ong') }}
</div>
</p>
</li>

<li class="relative z-50 flex flex-col col-span-1 p-6 bg-white rounded-md shadow-lg sm:-mt-12">
<li
class="relative z-50 flex flex-col col-span-1 p-6 bg-white rounded-md shadow-lg ring-1 ring-gray-100"
>
<GlobeAltIcon
class="flex items-center justify-center w-10 h-10 p-2 rounded-lg text-primary-600 bg-primary-50"
class="flex items-center justify-center w-10 h-10 p-2 mb-6 rounded-lg text-primary-600 bg-primary-50"
/>

<h3 class="mt-6 mb-2 text-lg font-medium text-gray-900">{{ $t('your_blog') }}</h3>
<h3 class="font-semibold leading-7 text-gray-900" v-text="$t('your_blog')" />

<div class="text-sm text-gray-500">
{{ $t('you_have_blog') }}
<p @click="$emit('copyCode')" class="text-blue-500 underline cursor-pointer">
{{ $t('embed_code') }}
<div class="relative mt-1">
<p class="text-sm leading-relaxed text-gray-600">
{{ $t('you_have_blog') }}
<button
type="button"
@click="copy(embedCode)"
class="text-blue-500 underline"
v-text="$t('embed_code')"
/>
{{ $t('copy_code') }}
</p>
{{ $t('copy_code') }}

<div
v-if="copied && text === embedCode"
class="absolute inset-0 z-50 flex items-center py-4 overflow-hidden transition-opacity duration-150 bg-white"
>
<div class="flex gap-x-2">
<CheckCircleIcon class="w-5 h-5 text-green-400 shrink-0" aria-hidden="true" />

<span
class="text-sm font-medium text-green-800 max-w-64"
v-text="$t('embed_code_copied')"
/>
</div>
</div>
</div>
</li>
</ul>
Expand All @@ -114,18 +136,28 @@
</template>

<script setup>
/** Import components */
import { computed } from 'vue';
import { useClipboard } from '@vueuse/core';
import LargeSquarePattern from '@/Components/patterns/LargeSquarePattern.vue';
import { SpeakerphoneIcon } from '@heroicons/vue/outline';
import { ShareIcon, HeartIcon, GlobeAltIcon } from '@heroicons/vue/solid';
import { CheckCircleIcon, ShareIcon, HeartIcon, GlobeAltIcon } from '@heroicons/vue/solid';
/** Component props. */
const props = defineProps({
pageRoute: String,
acceptsVolunteers: Boolean,
acceptsVolunteers: {
type: Boolean,
default: false,
},
});
/** Component emits. */
defineEmits(['copyCode', 'donate', 'volunteer']);
const embedCode = computed(() => `<iframe src="${window.location.href}" width="800" height="600"></iframe>`);
const { text, copy, copied } = useClipboard({ legacy: true });
const triggerVolunteer = () => {
document.getElementById('volunteer-active-modal').click();
};
</script>
53 changes: 0 additions & 53 deletions resources/js/Pages/Public/Bcr/Show.vue
Original file line number Diff line number Diff line change
Expand Up @@ -147,57 +147,4 @@
required: true,
},
});
onMounted(() => {
console.log(project);
});
const project = ref(props.project);
/**
* Copy embed code.
*/
const copyEmbed = () => {
/** Embed iframe. */
const embedCode = `<iframe src="${window.location.href}" width="800px" height="600px"></iframe>`;
/** Check if navigator object exists and copy iframe. */
if (navigator.clipboard) {
navigator.clipboard
.writeText(embedCode)
.then(() => alert('Embed code copied to clipboard!'))
.catch(() => alert('Failed to copy embed code to clipboard!'));
} else {
/** Create textarea element. */
const tempInput = document.createElement('textarea');
/** Set textarea value as embed code. */
tempInput.value = embedCode;
/** Apend textarea to body. */
document.body.appendChild(tempInput);
/** Select textarea text. */
tempInput.select();
/** Copy textarea content. */
document.execCommand('copy');
/** Remove textarea. */
document.body.removeChild(tempInput);
}
};
/** Trigger volunteer modal from card. */
const triggerVolunteer = () => {
document.getElementById('volunteer-active-modal').click();
};
/** Trigger donate modal from card. */
const triggerDonate = () => {
if (false === props.project.is_period_active) {
document.getElementById('project-donation-expired').click();
return;
}
document.getElementById('donate-active-modal').click();
};
</script>
47 changes: 0 additions & 47 deletions resources/js/Pages/Public/Donor/ThankYou.vue
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,6 @@
v-if="project"
class="mb-20"
:pageRoute="route('projects.show', project.slug)"
@donate="triggerDonate"
@volunteer="triggerVolunteer"
@copyCode="copyEmbed"
:acceptsVolunteers="project.accepting_volunteers"
/>

Expand All @@ -112,48 +109,4 @@
const props = defineProps({
project: Object,
});
/**
* Copy embed code.
*/
const copyEmbed = () => {
/** Embed iframe. */
const embedCode = `<iframe src="${window.location.href}" width="800px" height="600px"></iframe>`;
/** Check if navigator object exists and copy iframe. */
if (navigator.clipboard) {
navigator.clipboard
.writeText(embedCode)
.then(() => alert('Embed code copied to clipboard!'))
.catch(() => alert('Failed to copy embed code to clipboard!'));
} else {
/** Create textarea element. */
const tempInput = document.createElement('textarea');
/** Set textarea value as embed code. */
tempInput.value = embedCode;
/** Apend textarea to body. */
document.body.appendChild(tempInput);
/** Select textarea text. */
tempInput.select();
/** Copy textarea content. */
document.execCommand('copy');
/** Remove textarea. */
document.body.removeChild(tempInput);
}
};
/** Trigger volunteer modal from card. */
const triggerVolunteer = () => {
document.getElementById('volunteer-active-modal').click();
};
/** Trigger donate modal from card. */
const triggerDonate = () => {
document.getElementById('donate-active-modal').click();
};
</script>
11 changes: 0 additions & 11 deletions resources/js/Pages/Public/Organizations/Show.vue
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,6 @@
<HowCanYouHelp
class="mb-20"
:pageRoute="route('organizations.show', organization)"
@volunteer="triggerVolunteer"
:acceptsVolunteers="organization.accepting_volunteers"
/>
</div>
Expand Down Expand Up @@ -175,14 +174,4 @@
const props = defineProps({
organization: [Array, Object],
});
/** Trigger volunteer modal from card. */
const triggerVolunteer = () => {
document.getElementById('volunteer-active-modal').click();
};
/** Trigger donate modal from card. */
const triggerDonate = () => {
document.getElementById('donate-active-modal').click();
};
</script>
Loading

0 comments on commit e55180c

Please sign in to comment.